[CSS]テキストに影を落とすCSS3プロパティtext-shadow

CSSプロパティ

2013.02.042024.08.27

テキストに影を落とすCSS3のプロパティtext-shadowについてまとめました。

前回紹介させていただいたボックスに影を付けるbox-shadowプロパティと使い方は似ています。

text-shadow の記述方法
1. text-shadow の値
text-shadow のサンプル
IE8以下への対応について

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

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

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

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

.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 は使わないです。）