« テーブルの数値をグラフ化してくれるjQueryプラグイン | トップページ | ツールチップをリンクの要素にマウスオーバーさせるjQueryのプラグイン »

2010年12月27日 (月)

画像を使用しないで、ボックスの影をcssで表現する方法

Tommy03
こういった影のついたボックスを、画像を使わずに表現する方法のご紹介です。

デモページ

ソースファイルについては、デモページに記載されている通りです。
要素について、ポイントになる部分を解説したいと思います。

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
この記述で箱の外側に小さなグラデーションと、箱の内側に大き目のグラデーションをかすかにかけています。
rgbaの記述だと旧ブラウザに対応をしていないので、旧ブラウザ用に

background: #ffffff;
この記述も欠かせません

ul.box li:after { z-index: -1; transform: skew(15deg) rotate(6deg); }
ul.box li:before { z-index: -2; transform: skew(-15deg) rotate(-6deg); }
この記述を利用することで、1つの要素(li)に2つの擬似的なクラスを設定できます。
それぞれに角度を変えて記述することで左右の下の部分に影をつけることができます。

他の要素も含めて、色々なことを試すことができますので、是非試してみてください。

来週はお正月をはさむので、1月10日の更新になります。
それでは、良いお年を

|

« テーブルの数値をグラフ化してくれるjQueryプラグイン | トップページ | ツールチップをリンクの要素にマウスオーバーさせるjQueryのプラグイン »

css」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38223862

この記事へのトラックバック一覧です: 画像を使用しないで、ボックスの影をcssで表現する方法:

« テーブルの数値をグラフ化してくれるjQueryプラグイン | トップページ | ツールチップをリンクの要素にマウスオーバーさせるjQueryのプラグイン »