[CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル

CSS2の疑似要素を使用することで、HTMLを汚さずに、さまざまなデザインのドロップシャドウを簡単に適用することができます。 その美しいドロップシャドウのスタイルを適用するチュートリアルを紹介します。 画像の使用は一切ありません。 CSS drop-shadows without images デモページ [ad#ad-2] デモの対応ブラウザは:before, :after, box-shadowなどを使用しているため、Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+ です。 下記に、デモにある5つのドロップシャドウを紹介します。 HTML HTMLはdiv要素にスタイルシートを適用します。 5つのドロップシャドウはclass名を変更するだけです。 <div class="drop-shadow round"> <h1>CSS drop-sh

[chimantare]

cssだけでドロップシャドウ。※IEだめです。

[aeka]

おーこんなことが・・・

[diveintounlimit]

:beforeと:after、:outsideはなんでもありなんだぜ！でもCSS3は::before、::after、::outside、なんだぜ！

[o_hiroyuki]

ドロップシャドウ

[gidooom]

ドロップシャドウ、綺麗。何かの機会に使わせてもらおう。

[ichi2410]

]

[shiopu]

こんなこともできるのねー

[kyotaweb]

紙が折れてる感じも出せるドロップシャドウ。すげー！

[t-horikiri]

ドロップシャドウ

[gonta02]

さまざまなデザインのドロップシャドウを適用するチュートリアル

[me_1230]

みぃ姉 の Google リーダー スター付きアイテム --------------------------- [CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル ----------------------------------- 27 Dec 2010, 11:36 pm CSS2の疑似要素を使用することで、HTMLを汚

[nors]

http://nicolasgallagher.com/css-drop-shadows-without-images/

[kkeisuke]

:before, :after, box-shadow

[Donca]

✔ [CSS]さまざまなデザインのドロップシャドウを適用するチュートリアル