文字に影を設定する。

2015年6月26日

前回の記事で紹介したbox-shadowプロパティと
同じように文字にも影を付けることができます。

text-shadowプロパティを使います。
box-shadowプロパティと同様に、
影の距離、ぼかし、色を設定できます。

ぼかしの距離と影の色は省略することができます。

値	内容
水平方向の距離(px) 垂直方向の距離(px) ぼかしの距離(px) 影の広がり(px) 影の色(カラーコード) inset(影を内側に付ける)	ボックスに影を付ける。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        margin:24px;
        width:180px;
        height:120px;
        border:1px solid #000000;
    }
    .textShadowRed{
        /* 左の数値から
         水平距離　垂直距離　色 を表す*/
        text-shadow:2px 2px #ee6677;
    }
    .textShadowBlue{
        /* 左の数値から
         水平距離　垂直距離　色 を表す*/
        text-shadow:-8px -8px #5566ee;
    }
    .textShadowGreen{
        /* 左の数値から
         水平距離　垂直距離　色 を表す*/
        text-shadow:8px 8px #45f067;
    }

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

margin:24px;

width:180px;

height:120px;

border:1px solid #000000;

}

.textShadowRed{

/* 左の数値から

水平距離　垂直距離　色を表す*/

text-shadow:2px 2px #ee6677;

}

.textShadowBlue{

/* 左の数値から

水平距離　垂直距離　色を表す*/

text-shadow:-8px -8px #5566ee;

}

.textShadowGreen{

/* 左の数値から

水平距離　垂直距離　色を表す*/

text-shadow:8px 8px #45f067;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box">
        <p class="textShadowRed">
            text-shadowプロパティのテスト
        </p>
    </div>
    <div class="box">
        <p class="textShadowBlue">
            CSSで設定することで
        </p>
    </div>
    <div class="box">
        <p class="textShadowGreen">
            影をつけることができます。
        </p>
    </div>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

text-shadowプロパティのテスト

</p>

</div>

CSSで設定することで

</p>

</div>

影をつけることができます。

</p>

</div>

</body>

</html>

IEでのtext-shadowプロパティについて

text-shadowはｈ、IE9以前のバージョンでは動作しないので、
コーディングの際は気をつけてください。