[CSS]画像の四辺をふんわりとぼかすスタイルシート
CSS3のボックスシャドウを内向きにし、画像の四辺をぼかしたエフェクトにするスタイルシートを紹介します。
CSS の box-shadow を使った画像輪郭のぼかし
デモページ
対応ブラウザはChrome, Safari, Firefox, Operaで、IEは非対応とのことです。下記はFirefoxでのキャプチャです。
全体のキャプチャ
当サイトの記事「画像の四辺のボーダーを一味違ったスタイルにするチュートリアル」が参考になったとのことで、嬉しい限りです。
昨日、紹介したIEをCSS3対応にする「CSS3 PIE」がbox-shadowもサポートしているのでやってみましたが、insetへの対応は未なのかな、残念。
CSS3 PIEでのデモページ
IE7でのキャプチャ
Post on:2010年7月16日
Comments
Phorsythia » メモ:画像の四辺をふんわりとぼかすスタイルシート
on 2010年7月16日
[...] [CSS]画像の四辺をふんわりとぼかすスタイルシート | コリス [...]
» [CSS]画像の四辺をふんわりとぼかすスタイルシート | コリス My_Room-bookmarks
on 2010年7月16日
[...] [CSS]画像の四辺をふんわりとぼかすスタイルシート | コリス [...]
links for 2010-07-16 « 個人的な雑記
on 2010年7月17日
[...] [CSS]画像の四辺をふんわりとぼかすスタイルシート | コリス (tags: webdesign css) [...]