iOSのホーム・スクリーンのアイコンをCSSでパクる

iOSはホーム・スクリーンにアプリケーションのアイコンを置く時、いくつかエフェクトをかけて配置する。そこら辺の話はiOS Human Interface Guidelinesに載っているので詳しくはそちらを参照。それぞれのエフェクトはCSS3ならできそうな感じのものだったので、パクっと。

Demo: iOS Home screen icon effect with CSS

デモでは左から順になし→角丸→影→反射光とエフェクトを加えていっている。

iOSがかける(ような)エフェクトはそれぞれ、

角の丸め: border-radius
影: box-shadow
反射光: radial-gradient()

で(ほぼ)実現することができる。といっても角の丸めと影については全く難しいことはなく、

.shadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 1);
}

.round {
  border-radius: 9px;
}

こんな見たままの感じで十分。問題は反射光で、円形のためradial-gradient()を使えば良いのはわかるとは思うが、どこから始めてどう色を指定すればいいかなかなか難しい。正解(?)は以下のようなコードになる。

.gloss {
  background-image: radial-gradient(
    center -60px,
    rgba(255, 255, 255, 1)   57px,
    rgba(255, 255, 255, 0.3) 87px,
    rgba(255, 255, 255, 0)   89px
  );
}

つまり

ボックスの外側を開始地点にして(center -60px)
ボックスの少し外側から白でグラデーションを始め(rgba(255, 255, 255, 1) 57px)
ボックスの中央付近で白のグラデーションを終了させ(rgba(255, 255, 255, 0.3) 87px)
最後に若干なめらかに透明になるように調節する(rgba(255, 255, 255, 0) 89px)

ということをやっている。グラデーションの開始位置には制限は殆ど無いので、ボックスの外側からグラデーションを始めることができる。あとは反射光っぽく白のグラデーションを透明度付きで作成するだけ。最後のrgba(255, 255, 255, 0)はないとグラデーションを止められないので必須。transparentでも良さそうだが、そうしてしまうと黒の完全透明へのグラデーションになるようで縁が少し黒っぽくなってしまった。

更にbox-shadowとradial-gradientで画像をポラロイド写真風にで紹介したテクニックを使って、ボックスの背景を使った効果が上にかかるように画像へz-indexを指定すればおしまい。

.ios img {
  position: relative;
  z-index: -1;
  width: 57px;
  height: 57px;
  border-radius: 9px;
}

border-radiusをここでも指定する必要があるのは注意。そうしないと画像が丸めた角からはみ出してしまう。

Twitterのフォロワーの画像の加工とかはてなのユーザー画像の加工に使うと面白いと思う。