テキストに影を付けるtext-shadow - nicepaper @ ウィキ

テキストに影を付ける方法についてまとめていきたいと思います。2015年5月25日現在記事

こんな感じ

目次

text-shadowプロパティとは
基本構文
覚え方
コードを書いてみる。
表示テスト
ブラウザ対応状況

text-shadowプロパティとは

テキストに影を付けるCSSプロパティです。border-radiusと同様に最近標準化されてきたプロパティです。

基本構文

クラスまたはIDセレクター名{
       text-shadow: 横方向のずれ　下方向のずれ　ぼかし具合　影の色;
}

覚え方

横下広影（よこしたひろえい）さんと覚えておきましょう。

コードを書いてみる。

HTML部

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<link rel="stylesheet" type="text/css" href="text-shadow.css">
</head>

<body>
<div class="box"><p class="textshadow1">text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow2">-o-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow3">-ms-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow4">-moz-text-shadow: 1px 2px 3px #000;</p>
</div>
<div class="box"><p class="textshadow5">-webkit-text-shadow: 1px 2px 3px #000;</p>
</div>


</body>
</html>

CSS部

p{
	font-size: 18px;
}
.box{
	margin: 20px auto;
	padding: 10px;
	width: 400px;
	height: 100px;
	border: 1px solid #000000;
}
.textshadow1{
	text-shadow: 1px 2px 3px #000;
}
.textshadow2{
	-o-text-shadow: 1px 2px 3px #000;
}
.textshadow3{
	-ms-text-shadow: 1px 2px 3px #000;
}
.textshadow4{
	-moz-text-shadow: 1px 2px 3px #000;
}
.textshadow5{
	-webkit-text-shadow: 1px 2px 3px #000;
}