Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 box-shadow ボックス要素に影をつける

今回は、CSS3の「box-shadow」について書きます。


box-shadowを使うと、ボックス要素に影をつける事ができます。
f:id:gupuru:20140310225644p:plain



基本的な使い方は、こんな感じです。

box-shadow: 20px 30px;
/*box-shadow: 水平方向の長さ 垂直方向の長さ;*/

1番目の「20px」は、水平方向の長さで、2番目の「30px」は垂直方向の長さです。
f:id:gupuru:20140310224913p:plain

実際のプログラムで使うと、こうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 200px;
	 	height: 200px;
	 	background-color: red;
	 	border: 5px solid orange;
	 	box-shadow: 5px 10px;
	 }

	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>

実行結果
f:id:gupuru:20140310225002p:plain



さらに、影に「ぼかし」をつけることもできます。
「ぼかし」をつけるには3番目に数値を指定します。

	box-shadow: 20px 30px 10px;

f:id:gupuru:20140310225317p:plain



影の色も指定することができます。
このように指定します。

box-shadow: 20px 30px 10px rgba(51,51,51,0.6);

f:id:gupuru:20140310225644p:plain

こういう書き方も大丈夫です。

box-shadow: 20px 30px rgba(51,51,51,0.6);

3番目の「ぼかし」を削除しています。



影全体の幅も調節できます。

box-shadow: 20px 30px 10px 25px rgba(51,51,51,0.6);

f:id:gupuru:20140310225945p:plain
4番目に指定すると、影全体の幅を調節できます。


最後に・・・
影は複数つけることができます。

	box-shadow: 20px 30px 10px rgba(51,51,51,0.6),
	 				5px 5px 5px blue,
	 				10px 10px 5px red;

f:id:gupuru:20140310230333p:plain
「,」で区切ると、複数つけることができます。


参考サイト
box-shadow-CSS3リファレンス