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のフォロワーの画像の加工とかはてなのユーザー画像の加工に使うと面白いと思う。