@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

iOS7 SafariのURLバーの色を変える

ページを見ているとたまにSafariのURLバーの色が白ではないサイトがあり、どうやってるんだろうと思い調べました。

bodyの背景色を変えるだけだった

CSSを見たらbodyの色を変更しているだけでした。
これだけで出来るんですね。
ただ指定した色になるわけではなく、すりガラス越しに見たような色になります。

body {
    background-color: blue;
}

こんな感じに色が変わります。

URLバーの色とページの色を変えたいときは

URLには赤っぽい色を表示させて、ページの色は他の色がいいという場合は以下のようにCSSを設定すればいいみたいです。

body {
    background-color: blue;
    background-image: linear-gradient(to bottom, red, red);
}

背景画像はURLバーの下に映らないという仕様を利用し、ページの背景色をlinear-gradientで指定しています。
あとはページ全体を囲っているdiv要素などに背景色を設定する、とかでしょうか。

何個か確認用のページを作りました。
どのように変わるかご覧ください。

参考にしたページ

以上、地味エントリでした。