[CSS]画像の四辺をふんわりとぼかすスタイルシート

CSS3のボックスシャドウを内向きにし、画像の四辺をぼかしたエフェクトにするスタイルシートを紹介します。

デモのキャプチャ

CSS の box-shadow を使った画像輪郭のぼかし
デモページ

対応ブラウザはChrome, Safari, Firefox, Operaで、IEは非対応とのことです。下記はFirefoxでのキャプチャです。

デモのキャプチャ

全体のキャプチャ

当サイトの記事「画像の四辺のボーダーを一味違ったスタイルにするチュートリアル」が参考になったとのことで、嬉しい限りです。

昨日、紹介したIEをCSS3対応にする「CSS3 PIE」がbox-shadowもサポートしているのでやってみましたが、insetへの対応は未なのかな、残念。

デモのキャプチャ

CSS3 PIEでのデモページ
IE7でのキャプチャ

sponsors

top of page

©2024 coliss