[18-2] CSS3で、ボックス要素にシャドウをつけよう(box-shadow)

この記事にはベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、 box-shadowプロパティにはもう不要ですので記事からすべて削除しました。(2015年2月追記)

今回は、ボックス要素にシャドウをつけてみましょう。

CSSプロパティ box-shadow

本日のサンプルは [ 18-1 ] と同じです

★サンプルは [ 18-1 ] と同じです。
★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample18set.zip (4k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

ボックスにシャドウの指定をしよう

サンプルではこのように、
<header><nav><article><aside><footer>にシャドウの指定をしています。

ボックスにシャドウをつけるCSSの指定はこのようになります。
ここでは、右へ0px、下へ0pxの位置に10pxの幅でぼかし、色は濃いグレー(#333)と指定しています。

header, article, aside, nav, footer, header h2, article h1, aside h1{
	box-shadow: 0px 0px 10px #333;
}

ボックスシャドウの指定のルール [ 1 ] 必要最低限の値

●必要最低限の指定
「(1) 右への水平方向」「(2) 下への垂直方向」「(3) ぼかす幅」 「(4) 色」 の4つが最低必要な数値。
(1)と(2)はマイナスの値もOK。 (1)(2)(3) は絶対この順に書きます。(4) は(1)(2)(3) の前でも後でもOK。

#samp1

上のサンプルのCSSの指定は下記のように、色の指定を最後にしています。

#samp1 {
	box-shadow: 5px 5px 10px #333;
}

これが、下記のように色指定が最初に来てもOKってことですね。

#samp1 {
	box-shadow: #333 5px 5px 10px;
}

他の数値もいちおう説明しとくと、右へ5ピクセル、下へ5ピクセル、ぼかしの幅は10ピクセルで指定してます。 右や下の数値をマイナスにすれば、左側や上へシャドウをつけることができます。

「(4) 色」指定は、省略も可能という資料もありましたが、省略すると webkit系の最新バージョン(2011年7月現在)で、ボックスシャドウそのものが表示されなくなってしまいまいした。なので色も必要条件として参加させました。

ボックスシャドウの指定のルール [ 2 ] 拡張させる幅

●拡張させる幅の指定もできます
「拡張(縮小)させる幅」を加えることが出来ます。マイナスの値もOK。(マイナスだと縮小させる幅ってことになります。)
書く場所は、さきほどの(1)(2)(3)(「(1) 右への水平方向」「(2) 下への垂直方向」「(3) ぼかす幅」)のです。
「拡張させる幅」を指定する場合は必ず4番目に書く。 この4つの並び方は絶対不動。
色指定はその前か後に書きます。

#samp2


上のサンプルのCSSの指定は下記。シャドウを10px拡張させてみました。

#samp2 {
	box-shadow: 5px 5px 10px 10px #333;
}


●「拡張させる幅」ってなによ?
「拡張させる幅」とは「ぼかしを開始する位置」です。
無指定ならボックスサイズと同じになりますが、それより広げたい(縮めたい)場合に使います。
例えば、下記のように「ぼかす幅を0px」「拡張する幅を10px」にするとこうなります。

#samp3
拡張幅10px以外を0にしたらこうなる。
ボーダーですな。


で、上記をぼかし幅5pxにしたらこうなりました。

#samp4
ぼかし幅5pxにしたらこうなる。


じゃあ、上記の拡張する幅をマイナスにして縮小してみます。マイナス2pxにしたらこうなります。
(ぼかし幅が5pxなので、ぼけ足が3pxだけ外にでることになります。)

#samp5
拡張する幅をマイナス2pxにしたらこうなる。


上の3つのサンプルのCSSの指定は下記。

#samp3 {
	box-shadow: 0px 0px 0px 10p #333;
}
#samp4 {
	box-shadow: 0px 0px 5px 10px #333;
}
#samp5{
	box-shadow: 0px 0px 5px -2px #333;
}

ボックスシャドウの指定のルール [ 3 ] 内側シャドウはこれら↑の前か後

●シャドウは内側にも指定できます!
上記の「 (1)〜(3)+拡張する幅+色の指定」の、前か後に inset を指定することで、シャドウを内側に表示する事ができます。

#samp6

このCSSの指定はこのようになります。

#samp6 {
	box-shadow: 0px 0px 20px 10px #690 inset;
}

このように「inset」が最初に来ても同じです。

#samp6 {
	box-shadow: inset 0px 0px 20px 10px #690;
}


で、前回やった角丸と、内側シャドウの指定を同時にしたら、こんなかんじになります。
円形グラデーションのCSSを使わなくても内側のシャドウでこの程度はできるということで、
これは使えそうです。

#samp7

上のサンプルのCSSの指定はこれ。(ボックスのサイズは120px ×120pxです。)

#samp7 {
	border-radius: 50%;
	box-shadow: 0px 0px 50px #690 inset;
}

noneで影なしに戻せます

box-shadowは「none」を指定してあげれば、影なしに戻ります。
ある部分のみ、ボックスにシャドウをつけたくない場合はこの指定をします。

	box-shadow: none;

次回予告

いかがでしたか? CSSで勝手に影をつけてくれるなんて、便利だなあ。

次回はCSS3で、テキストにもャドウをつけてみましょう!

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.