CSSで影を付けるbox-shadowの使い方

Shadow Fencing By: Keoni Cabral

box-shadow は、CSS3のプロパティでボックス要素に影を付けることができます。

まずは、box-shadowの基本的な仕様を理解しましょう。

box-shadowの指定方法

box-shadow:横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き);

横方向と縦方向は必須で定義が必要です。その他の括弧が付いているものは、任意での指定になります。

横方向と縦方向
CSS
.SampleBox1{
     box-shadow:5px 5px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

このCSSをDivタグに適応するとこのように右方向と下方向に影が付きます。

影の基本の向きは右方向と下方向になります。そのため左方向と上方向に影を付けたいときは-(マイナス)指定をする必要があります。

ぼかし
CSS
.SampleBox2{
     box-shadow:0px 0px 10px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

影を指定せずにぼかしのみを指定すると全方位に広がります。

CSS
.SampleBox3{
     box-shadow:5px 5px 10px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

ただし、影を指定すると、指定した方向に対してぼかしがかかります。

広がり

広がりもぼかし同様の動きをします。

CSS
.SampleBox4{
     box-shadow:0px 0px 0px 5px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

影を指定せずに影の広がりのみを指定すると全方位に広がります。

CSS
.SampleBox5{
     box-shadow:5px 5px 0px 5px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

影の向きを指定すると、指定した向きに影が広がります

右方向と下方向に5px + 広がり5pxで10pxの影ができます。

CSS
.SampleBox6{
     box-shadow:5px 5px 0px -2px;
     border:1px solid #000;
     width:100px;
     height:50px;
}

また、ぼかしと違い広がりは、マイナスの値を指定することもできます。マイナスの値を指定した場合は、影が収縮します

右方向と下方向に5px + 広がり-2pxで3pxの影ができます。

影の色

影の色を指定しない場合は、デフォルトで黒(#fff)が設定されます。

CSS
.SampleBox7{
     box-shadow:5px 5px 5px 5px #f00;
     border:1px solid #000;
     width:100px;
     height:50px;
}

色をしてした場合は、このように指定した色になります。

ぼかしと広がりも影と同じ色になります。

CSS
.SampleBox8{
     box-shadow:5px 5px 5px 5px rgba(0, 0, 0, 0.2);
     border:1px solid #000;
     width:100px;
     height:50px;
}

色の指定は「rgba」を使用して透明度の指定もできます。

内向き/外向きの影

影はデフォルトで外向きに付きます。

CSS
.SampleBox9{
     box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
     border:1px solid #000;
     width:100px;
     height:50px;
}

影を内向きに付けるときは「inset」と指定します。

CSS
.SampleBox10{
     box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2)
                ,0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
     border:1px solid #000;
     width:100px;
     height:50px;
}

内向きと外向きの両方に影を付けるときはカンマで区切り、内向きと外向きの定義を指定します。

box-shadowの指定方法はこれで以上です。

box-shadowと他のプロパティを使いこなせば、このサイトのような立体的な影も付けられるようにもなりますので、是非この機会に覚えてみてください。

divider

Trackback URL

http://webnonotes.com/css/box-shadow/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>