[CSS3] How to Create CSS3 Paper Curls Without Images – CSS3を使って、画像を使わず描画する凝ったドロップシャドウ
CSS3を使って、画像を使わずに凝ったドロップシャドウを描画するTips。動作デモはこちらから見る事ができます。当然レガシーブラウザはサポート外です。ボックス要素の下端に外側ほど面積の広いシャドウを付ける事で、紙の両端が少し浮いているような印象のシャドウ表現。画像ではよく使われる手法ではあるけど、CSS3でもちょっと手間かければ作れるそうです。興味深いのはボックスの置き方で、z-indexで裏側に回したボックスをロテイトさせ、それにシャドウを付けて表現しています。「なるほどね！」って感じで感心しちゃいました。サムネールなど、量産品の枠表現とかにイイですねこれ。