box-shadowとradial-gradientで画像をポラロイド写真風に

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-i

[miyoom]

css

[chalcedony_htn]

CSSだけで画像に古ぼけた写真のような効果をかけられる（CSS3のbox-shadowやradial-gradientを使用）。こういう見せ方をするのに画像加工が要らなくなったんだなあ……

[d4-1977]

ほえ〜

[hiro_y]

ポラロイド風に画像の上に影を乗せる

[efcl]

セピア色のフィルタのポラロイド風のエフェクトをCSS3で div > img

[mattn]

せこんさん風に言うと、「画像をオサーン風にする」って事ですね。

[machida_fjord]

これ使う

[ub-pnr]

古い写真って感じが出てる。すごい。