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要素などに背景色を設定する、とかでしょうか。
何個か確認用のページを作りました。
どのように変わるかご覧ください。
参考にしたページ
以上、地味エントリでした。