[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点

サイト構築 -CSS

Post on:2011年9月30日

最近のブラウザで生じる問題点

画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。

デモページ：Normal Image
Firefoxでの表示

Chrome, Safariでは下記のように表示されます。

Chromeでの表示

デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。
また、Firefoxでは「border-radius」は期待通りですが、「box-shadow」が適用されません。

回避策：その1

これを回避するには画像を内包する要素(例:span)を配置し、その背景画像として表示します。

<span style="background: url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
</span>

回避策：その2

上記の方法は画像ごとにスタイルシートを設定しなくてはいけないため、面倒です。
これを自動的に適用させるために、jQueryを使用します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

スクリプトが実行されると、img要素全てに自動的に適用されます。
※適用するimg要素を限定する際は、jQueryのセレクタを適宜変更します。

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

[ad#ad-2]