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

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

CSS3 text-shadow テキストに影をつける

CSS3

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


「text-shadow」を使うと、テキストに影をつける事ができます。
f:id:gupuru:20140311222713p:plain


基本的なところは、「box-shadow」と同じです。


「text-shadow」は、このように使います。

text-shadow:10px 10px 3px rgba(51,51,51,0.6);

１番目が、水平方向の長さ（右側の長さ）で、２番目は、垂直方向の長さ（下側の長さ）です。
３番目は、「ぼかし」の強さです。
最後の「rgba(51,51,51,0.6)」は、影の色を指定します。

また、１番目と２番目の数値は「マイナス（−）」の値を取ることもできます。

	text-shadow:-10px -10px 3px rgba(51,51,51,0.6);

f:id:gupuru:20140311223257p:plain
マイナスにすると、影の向きが反対になります。
通常の影の向きは、右下です↓
f:id:gupuru:20140311223349p:plain


ちなみに、影の色の指定ですが、「red」のような形でも指定できます。

	text-shadow:10px 10px 3px red;

f:id:gupuru:20140311223553p:plain



では、実際のプログラムで「text-shadow」を使うと、こうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 h2.kage{
	 	text-shadow:10px 10px 3px rgba(51,51,51,0.6);
	 }
	</style>
</head>
<body>
	<h2 class="kage">テキスト</span>
</body>
</html>

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



最後に・・・
「text-shadow」は、複数の影がつけれます。

「,」で区切ると、複数の影がつけれます。

text-shadow:2px 2px 5px yellow,
	 	     5px 5px 5px blue,
	 	     8px 8px 5px red,
	 	    11px 11px 5px green;

f:id:gupuru:20140311224222p:plain

この機能をうまく使うと、テキストを立体っぽく見せることができます。
f:id:gupuru:20140311224424p:plain
上の写真のコードは、こちらです↓

	text-shadow:1px 1px 0px white,
	 		     2px 2px 0px black;

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