にわかに写真をポラロイドっぽく見せる話題が増えた･･気がする。というかポラロイドっぽく見せること自体は常にある表現方法ですね。写真には薄いボーダしか付けていなかったので見栄えを変えてみました。
パディングで写真の下の余白を多くとって、ボーダで影を付ければそれっぽくします。Flickrの写真だけポラ風にしたいけど、今までのimg要素にクラスセレクタを付けていくのは面倒すぎるので属性セレクタを利用。前方にマッチするパターン[foo^=”bar”]を使って、src属性の先頭がhttp://farm2.static.flickr.com/ならマッチするようにします。属性セレクタのうちこれらのマッチング(^→前方にマッチ、$→後方にマッチ、*→少なくとも一つにマッチ)はCSS3で追加予定のものですが、手元のIE7、Firefox2、Opera9、Netscape7では先行実装されているようです。
これがポラっぽいかと言われれば、ポラっぽくはないのだが。
div.entry img[src^="http://farm2.static.flickr.com/"] {
border-top: solid 1px #ededed;
border-right: solid 1px #dbdbdb;
border-bottom: solid 1px #dbdbdb;
border-left: solid 1px #ededed;
margin: 5px 10px;
padding: 20px 10px 60px 10px;
background: #f2f2f2;
}