« table要素の行をソートさせるjQueryプラグイン「table sorter」 | トップページ | カラムの高さを調節するjQueryのプラグイン »

2011年1月31日 (月)

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

前々回の「画像を使用しないで、ボックスの影を表現する方法 その2」でご紹介しました「CSS drop-shadows without images」設定方法の解説となります。

デモページ

デモページCSSの記述を解説します。
ページのソースはデモページをご参照ください。
デモページにある上から1番目と2番目の影の付け方を解説していきます。

影の記述基本設定
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;

-webkit-box-shadowを例にとって各値の解説します。
-webkit-box-shadow:水平方向の影の距離 垂直方向への影の距離 ぼかし距離
またカンマで区切る事で複数指定しています。
-moz-box-shadow,box-shadowも同様に設定します。

rgba RGBAカラーモデルとなります。RBGAはRGBにアルファ(透明度)を加えたカラーも出るです。
カッコの中の値はそれぞれ(r,g,b,アルファ)となります

inset ボーダーを立体的に表示させる

rgbaに対応していないブラウザ向けの記述
background:#fff;

.drop-shadow:before,
.drop-shadow:after
上記の記述にて擬似的なクラスを用いて影を設定しています。

影丸
Css_shadow_000

角丸の設定
-moz-border-radiusおよびborder-radiusにて角丸を設定しています。

丸い影の表現設定
-webkit-transform:rotate:rotate(5deg);
影をrotateで回転させています。
それぞれ負の値で設定する方が左側。正の値で設定する方が右側となります。
degはcss3で定義される角度の単位となります
-moz-transform,-o-transform:rotate,transform:rotateの値も同様に設定します。

カール
Css_shadow_002

カールの表現設定
-moz-border-radius:0 0 100px 100px / 0 0 5px 5px;
角丸設定のスラッシュ以降の部分にてカールの表現をさせています。
border-radiusの値も同様に設定します。

影の表現設定
-webkit-transform:rotate:skew(6deg) rotate(3deg);
ページ(画像の白い部分)に回転をシアーをかけてカールの影を設定しています。
それぞれ負の値で設定する方が左側。正の値で設定する方が右側となります。
-moz-transform:rotate,-o-transform:rotate,transform:rotateも同様に設定します。
skew css3で定義されるシアーの単位

3~5番目の設定方法は1番目と2番目の内容と重複するため省略させていただきます。

参考記事
画像を使用しないで、ボックスの影を表現する方法 その2
画像を使用しないで、ボックスの影を表現する方法

|

« table要素の行をソートさせるjQueryプラグイン「table sorter」 | トップページ | カラムの高さを調節するjQueryのプラグイン »

css」カテゴリの記事

コメント

コメントを書く



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


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



トラックバック

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

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

« table要素の行をソートさせるjQueryプラグイン「table sorter」 | トップページ | カラムの高さを調節するjQueryのプラグイン »