CSS3のbox-shadowプロパティではinsetという値を取ることができ、その場合ブロックの内側に影が付く。これをある工夫と共に利用すると写真の端に影がつけられる。更にradial-gradientでセピア色のグラデーションを重ねてやれば、良い具合に古ぼけさせることもできるので、両方の効果を重ねてやればポラロイド写真風に見えないこともない？
Demo: Polaroid effects using inset box-shadow and radial-gradient
キモは以下のようにz-indexを使って画像を背面に回してやること。そうすれば親のブロック要素でのbox-shadowやbackground-imageを画像の上に重ねることができる。
.polaroid {
float: left;
width: 400px;
height: 400px;
background-image: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 283, color-stop(0, rgba(112, 66, 20, 0.2)), color-stop(1, rgba(112, 66, 20, 0.4)));
background-image: -webkit-radial-gradient(rgba(112, 66, 20, 0.2), rgba(112, 66, 20, 0.4));
background-image: -moz-radial-gradient(rgba(112, 66, 20, 0.2), rgba(112, 66, 20, 0.4));
background-image: radial-gradient(rgba(112, 66, 20, 0.2), rgba(112, 66, 20, 0.4));
-webkit-box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.polaroid img {
position: relative;
z-index: -1;
}写真の縁に影を付ける
box-shadowの文法は以下の通りで、text-shadowとの違いはinsetで内側に影を作れることと、ぼかし以外に影のサイズを微調整することができること。
box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?;
ここではぼかしを40pxにしたがもっと少なくてもいいかもしれないが、少ないと縁が黒くなった感よりも凹んでいる感が強くなってしまう気がする。影の色はある程度透過させた色を指定しないと縁が真っ黒になってしまうので注意。
セピア色のフィルタ
古びた感を出すために、rgb(112, 66, 20)を適当に透過させてradial-gradientで円形グラデーションを作りセピア色のフィルタの代わりにした。内から外へ少し濃くなっていくようにしたんだけど、逆な気がしてしょうがない。
Safari 5とかはまだだけどChrome 9あたりでは既に-webkit-(linear|radial)-gradient()というCSS3の(linear|radial)-gradient()と同じ文法のベンダー拡張が実装されているのでそれも併記しておいた。早い所-webkit-gradient()書かなくて済むようになるといいな。
どっちかというとz-indexで写真を背面に回し、background-imageと重ねたりするといろいろ写真にエフェクトをかけられるよっていう話。