on:2011年9月30日sponsorsCSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。Firefoxなど、最近のブラウザでも生じます。Safariでは下記のように表示されます。Safariではキャプチャのように欠けて表示されてしまいます。Firefoxでは「border-radius」は期待通りですが、「box-shadow」が適用されません。回避策:その1これを回避するには画像を内包する要素(例:span)を配置し、その背景画像として表示します。150px;"></span>回避策:その2上記の方法は画像ごとにスタイルシートを設定しなくてはいけないため、面倒です。これを自動的に適用させるために、jQueryを使用します。});});</script>スクリプトが実行されると、img要素全てに自動的に適用されます。※適用するimg要素を限定する際は、jQueryのセレクタを適宜変更します。0;"></span>[ad#ad-2]デモ画像をデコレートしたさまざまなデモです。※上記の問題点は回避したものです。Image画像を円状にスタイル。Image画像をカード状にスタイル。Styleカードのスタイルにエンボスを追加。Styleエンボスのスタイルに1pxのブラーを追加。Style切り抜いたようなスタイル。Glowingマウスオーバーで角丸から円状にモーフィング。Overlayグラデーションをオーバーレイ。デモページ:Reflectionグラデーションのオーバーレイを使った鏡面反射のようなスタイル。Reflectionグロッシーと鏡面反射のミックス。Style上部にテープを適用。Tinting角丸から円状にモーフィングし、放射状のグラデーションを適用。Circle放射状のグラデーションでマスク。Posts関連記事が見つかりませんでした。