[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」
スポンサード
ぼかしの距離は
※分かりやすいように、ボックスの背景とテキストの色をグレーにします。
ぼかしの距離は
IE下位バージョンへの対応については、IE-CSS3.htc ファイルを使うと実現できることはできますが、影の調整などがかなり難しいです。
(わたしは断念したのでIEでは text-shadow は使わないです。)
スポンサード
テキストに影を落とすCSS3 のプロパティ text-shadow
についてまとめました。
前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
目次
text-shadow の記述方法
以下、text-shadow
の基本的な使い方です。p { -moz-text-shadow:5px 5px 5px #ccc; -webkit-box-shadow:5px 5px 5px #ccc; box-shadow:5px 5px 5px #ccc; }※Firefox向け、Safari や Chrome向けのベンダープレフィックスも付けておきます。
text-shadow の値
text-shadow の値は以下のようになります。1番目 | 水平方向に指定。1pxで右方向に影、-1px で左方向に影です。 |
---|---|
2番目 | 垂直方向に指定。1pxで下方向に影、-1px で上方向に影です。 |
3番目 | ぼかしの半径を指定。 |
4番目 | 色を指定。 |
text-shadow のサンプル
以下、text-shadow
を使った簡単なサンプルです。text-shadow のサンプル1
.box { /*ボックスのデザイン*/ padding:15px; border:1px solid #ccc; text-align:center; font-size:22pt; font-weight:bold; } .box p { /*text-shadow*/ -moz-text-shadow:5px 5px 5px #ccc; -webkit-text-shadow:5px 5px 5px #ccc; text-shadow:5px 5px 5px #ccc; }水平方向、垂直方向ともに
5px
と「正」の値なので、影の方向は 右下になります。ぼかしの距離は
5px
にして色は #ccc
でグレーの影を落としている、という感じです。text-shadow のサンプル1
text-shadow のサンプル2
今度は影の方向を内側(垂直,水平方向を負の値)にして、テキストの内側に影を落とします。※分かりやすいように、ボックスの背景とテキストの色をグレーにします。
.box { /*ボックスのデザイン*/ padding:15px; text-align:center; font-size:22pt; font-weight:bold; color:#777; background:#313131; } .box p { /*text-shadow*/ -moz-text-shadow:-1px -1px 1px #000; -webkit-text-shadow:-1px -1px 1px #000; text-shadow:-1px -1px 1px #000; }水平方向、垂直方向ともに
-1px
と「負」の値なので、影の方向は 左上になります。ぼかしの距離は
1px
にして色は #000
で、微妙に黒の影を落としています。text-shadow のサンプル2
text-shadow のサンプル3 – カンマ区切りで複数指定
box-shadow
同様に値をカンマ区切りで複数指定することができます。.box { /*ボックスのデザイン*/ padding:15px; text-align:center; font-size:22pt; font-weight:bold; color:#777; background:#313131; } .box p { /*text-shadow*/ -moz-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000; -webkit-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000; text-shadow:-1px -1px 1px #111, 1px 1px 1px #000; }以下のサンプルのように、テキストの左上と右下に黒色の影を落とすことができます。
text-shadow のサンプル3
IE8 以下への対応について
text-shadow
はCSS3 のプロパティなので、IE6、IE7、IE8 の下位バージョンのIE では動きません。IE下位バージョンへの対応については、IE-CSS3.htc ファイルを使うと実現できることはできますが、影の調整などがかなり難しいです。
(わたしは断念したのでIEでは text-shadow は使わないです。)
スポンサード
コメント