text-shadowプロパティに指定できる値
text-shadowプロパティにはテキストの影について以下の4つの値を指定することができます。
| 値 | 内容 |
|---|---|
| X軸の位置（offset-x） | 影のX軸（横方向）の位置を指定。 |
| Y軸の位置（offset-y） | 影のY軸（縦方向）の位置を指定。 |
| 影の広さ（blur-radius） | 影の広がり方を指定。 |
| 影の色（color） | 影の色を指定。影の濃さを調整するときはrgba指定にする。 |
以降は
使用例
text-shadowプロパティを使用するコードと、ブラウザでの表示を確認していきましょう。
値の指定では「X軸の位置」「Y軸の位置」「影の広さ」「色」の順に指定します。
CSS コード例
.sample1 p {
margin-bottom: 0;
font-size: 18px;
}
.text1 {
text-shadow: 0px 0px 5px #aaa;
}
.text2 {
text-shadow: #555 0px 5px 3px;
}
.text3 {
text-shadow: 0 5px #5bb4e9;
}
.text4 {
text-shadow: 5px 5px 1px #f0d128, 10px 10px 1px #2484bf, 15px 15px 1px #0a4d76, -10px -10px 1px #f52556;
}
.text5 {
text-shadow: 0 0 5px rgba(212,188,25,0.5);
}HTML コード例
<div class="sample1 first">
<h2>text-shadow: 0px 0px 5px #aaa;</h2>
<p class="text1">このコードはtext-shadowプロパティの使用例です。</p>
</div>
<div class="sample1">
<h2>text-shadow: #555 0px 5px 3px;</h2>
<p class="text2">このコードはtext-shadowプロパティの使用例です。</p>
</div>
<div class="sample1">
<h2>text-shadow: 0 5px #5bb4e9;</h2>
<p class="text3">このコードはtext-shadowプロパティの使用例です。</p>
</div>
<div class="sample1">
<h2>text-shadow: 5px 5px 1px #f0d128, 10px 10px 1px #2484bf, 15px 15px 1px #0a4d76, -10px -10px 1px #f52556;</h2>
<p class="text4">このコードはtext-shadowプロパティの使用例です。</p>
</div>
<div class="sample1">
<h2>text-shadow: 0 0 5px rgba(212,188,25,0.5);</h2>
<p class="text5">このコードはtext-shadowプロパティの使用例です。</p>
</div>ブラウザで表示してみると以下のようになります。
class名「text4」のように影は複数指定することもできます。
「,(コンマ)」で区切ることで、複数の影を指定することが可能です。