テキストに影を付ける方法についてまとめていきたいと思います。2015年5月25日現在記事
こんな感じ
目次
テキストに影を付ける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 で調べてみると
のようになっており、近年はすべて対応しているようです。