on:2012年2月28日sponsorsCSS3のbox-shadowを使ってdiv要素に影をつけ、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートを紹介します。Effects[ad#ad-2]デモ実装デモデモはbox-shadowに対応した下記のブラウザでご覧ください。基本となるHTML8つの各デモのHTMLの基本は同じで、class名が異なるだけです。<h3>Effect</h3></div>基本となるCSSdiv要素とh3要素の基本となるスタイルです。auto;}以下、各デモの影となるスタイルは異なるので、キャプチャとともに紹介します。シャドウを均等につけ、ボックス全体が浮かんだようなエフェクトです。#777;}左下と右下にシャドウをつけたエフェクトです。auto;}左下のみシャドウをつけたエフェクトです。rotate(-3deg);}右下のみシャドウをつけたエフェクトです。rotate(3deg);}Effect2よりシャドウの量を増やしたエフェクトです。auto;}ボックスの下にカーブがかかったシャドウのエフェクトです。rotate(3deg);}Effect6のエフェクトをボックスの上部にも適用したエフェクトです。rotate(3deg);}最後のデモは、ボックスの両サイドにシャドウを加えたエフェクトです。