画像を使わずにドロップシャドウを付けるCSSテクニックを試してみようかと。
よく、サムネイル画像なんかにドロップシャドウが付いていたりしますが、元の画像に画像加工ソフトでシャドウをつけてからupする方法と、CSSを使って、シャドウになる画像を背景に指定する方法と、今回紹介する方法と3通りある…かと思います。
参考にしたのは有名なサイトだと思いますが。
CSS play >> Demos >> Simple fluid drop shadows
ま、口で説明しても仕方ないので実際に実践。
冬っぽい画像を集めてみました。素材は→morgueFileより
 |
 |
 |
 |
 |
 |
 |
 |
 |
一応今回は元画像のサイズを小さくしてはいるのですが、サムネイルとして更に小さく表示。クリックで元絵（といっても縦横250px）が見れます。
ドロップシャドウ、これならCSSに指定するだけで毎回タグにクラスを指定すればこのようになるので便利です。使える技かも。
詳細ソースなどは載せません（ご要望があれば載せます）ので、HTMLやCSSが分かる方はCSS playをご参照ください。
なるほど！→
: 
18:21
| 
Comment(2)
TrackBack(0)
internet
TrackBack URL
こういう閃きや技術を持っていて、それをすぐに表現できる人には、羨望の眼差しです。
こんにちわ〜。
CSS Playのサイトでは、CSSを使って迷路を作ったりパズルを作ったり、
こうした見せ方を教えてくれたりしています。
零がブログなりサイトなりを作る際に心がけているのは、
W3CのHTMLやXHTMLの規格に準拠したサイトを作ること。
なので、このようなサイトは大変参考になるなぁといつも探しているんです！
思いつく人は本当にスゴいと思います！！！