[CSS]画像に美しい角丸とボックスシャドウを適用する方法

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。
これを解消するCSSのTrickを紹介します。

サイトのキャプチャ

CSS3 Rounded Image With jQuery
デモページ

FirefoxとWebkitブラウザ(Safari)のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。
それを下記のように美しく適用されるようにします。

サイトのキャプチャ

角丸とボックスシャドウをこういう風にしたい
左:角丸と外側にシャドウ、右:角丸と内側にシャドウ

CSS3で素直にスタイリング

Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

デモのキャプチャ

Firefoxのキャプチャ

HTML

CSS

CSSのTrickを使用

background-imageを使用して、この問題を解決します。

デモのキャプチャ

Firefoxのキャプチャ

HTML

CSS

Trickは非常にシンプルです。
img要素をspanで内包します。

サイトのキャプチャ

オリジナルとなるimg要素は「opacity:0」か「display:none」で隠し、span要素の背景を目に見える画像として表示します。
「display:none」は画像のダウンロードが不可になるため、「opacity:0」を使用した方がよいでしょう。

CSSのTrickにjQueryを併用

上記のCSSのTrickを簡単に実現するために、jQueryを使用してspanを自動で配置するようにします。

デモのキャプチャ

Firefoxのキャプチャ

HTML

spanはスクリプトで自動挿入するので、追加のマークアップは必要ありません。

CSS

CSSはCSSのTrickと同じものを使用します。

JavaScript

jquery.jsを外部ファイルとして指定します。

top of page

Trackback

Comments

INFINITY フリーランスWEBデザイナーのIT/WEBニュースブログ » Blog Archive » 画像に美しい角丸とボックスシャドウを適用する方法

on 2010年10月6日

[…] ネタ元:画像に美しい角丸とボックスシャドウを適用する方法 (コリス) […]

iPhoneアイコン角丸にしていたマスク用の画像が no found になっていた件 | Roguer

on 2012年5月13日

[…] 試してみたかったのはこちらの [CSS]画像に美しい角丸とボックスシャドウを適用する方法 | コリスです。 […]

top of page

©2014 coliss