CSS の box-shadow を使った画像輪郭のぼかし

[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル | コリス』の記事を読んで、画像のボーダーの代りにボックスのドロップシャドウを内側に向けて適用すれば画像の輪郭をぼかすことができるのではと思い試してみた。

上記記事での CSS で outline の部分を box-shadow に変更し、影を内側に向けるために inset を指定する。
また、影の色を背景色と同じものにしておく。
疑似要素で作られるボックスの topleftbottomright1px から 0 に変更する。

CSSコード

.blur, .blur > img {
    margin: 0; padding: 0;
    border: 0;
}

.blur {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.blur:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #fff;
    -webkit-box-shadow: inset 0px 0px 15px 15px #fff;
    box-shadow: inset 0px 0px 15px 15px #fff;
    content: " ";
}

HTMLコード

<span class="blur"><img src="./owl.jpg" /></span>

以上で、画像の輪郭をぼかすことができた。
動作するのは、Firefox、Safari、Google Chrome、Opera といったモダンブラウザのみ。IE はダメ。

CSS の box-shadow を使った画像輪郭のぼかし サンプル画像

デモ

参考:Fancy Inset CSS Image Borders | Evan Byrne’ Writings

コメント

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

CSS3のボックスシャドウを内向きにし、画像の四辺をぼかしたエフェクトにするスタイルシートを紹介します。 CSS の box-shadow を使った画像輪郭のぼかし デモページ 対応ブラウザはChrome, Safari, Firefox, Operaで、IEは非対応とのことです。下記はFirefoxでのキャプチャです。 全体のキャプチャ 当サイトの記事「画像の四辺のボーダーを一味違ったスタイルにするチュートリアル」が参考になったとのことで、嬉しい限りです。 昨日、紹介したIEをCSS3対応にする「…

コメント by コリス | 2010年7月16日 - 08:40
Top