[CSS]画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する方法と注意点
Post on:2011年9月30日
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。
また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。

[ad#ad-2]
最近のブラウザで生じる問題点
画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これは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]
デモ
画像をデコレートしたさまざまなデモです。
※上記の問題点は回避したものです。

デモページ:Circle Image
画像を円状にスタイル。

デモページ:Card Image
画像をカード状にスタイル。

デモページ:Embossed Style
カードのスタイルにエンボスを追加。

デモページ:Soft Embossed Style
エンボスのスタイルに1pxのブラーを追加。

デモページ:Cutout Style
切り抜いたようなスタイル。

デモページ:Morphing & Glowing
マウスオーバーで角丸から円状にモーフィング。

デモページ:Glossy Overlay
グラデーションをオーバーレイ。

デモページ:Reflection
グラデーションのオーバーレイを使った鏡面反射のようなスタイル。

デモページ:Glossy & Reflection
グロッシーと鏡面反射のミックス。

デモページ:Tape Style
上部にテープを適用。

デモページ:Morphing & Tinting
角丸から円状にモーフィングし、放射状のグラデーションを適用。

デモページ:Feather Edge Circle
放射状のグラデーションでマスク。
sponsors