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

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

デモのキャプチャ

CSS3 Image Styles

[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

top of page

©2018 coliss