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

こんな感じ

目次


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;
}

表示テスト

IE(11.0)、GoogleChrome(43.0)、Firefox(38.0) 、Opera(29.0) すべてで同じようになりました。



ブラウザ対応状況

http://caniuse.com/#search=text-shadow で調べてみると

のようになっており、近年はすべて対応しているようです。