テキストの影をつける text-shadow
CSSプロパティ「text-shadow」は、テキストに影をつけることができます。それぞれの影はテキストを起点に定義し、加えて色とぼかしの半径を任意で定義することもできます。また複数の値をセットすることができ、その場合はカンマを使って定義します。
またブロック要素に影をつける場合は box-shodow プロパティを用います。
<p class="shadow">テキストに、ぼかした影をつけます。</p>
<style>
.shadow {
text-shadow: 5px 5px 3px #000
}
</style>このプロパティを利用することで、以前は装飾のついた文字などは一度画像パーツとして切り出されたものを使用していた所を、CSSのみで対応することができるようになりました。これは容量やリクエストの軽減につながりますし、修正作業なども容易になります。ただし、閲覧するブラウザによって表現が異なる場合もありますので、使いどころは慎重に選びましょう。
text-shadow の取りうる値
/* 水平位置 | 垂直位置 | ぼかす半径 | 色 */
text-shadow: 5px 5px 2px black;
/* 色 | 水平位置 | 垂直位置 | ぼかす半径 */
text-shadow: #CCC 5px 0 10px;
/* 水平位置 | 垂直位置 | 色 */
text-shadow: 5px 5px #558ABB;
/* 水平位置 | 垂直位置
/* この場合はデフォルトで設定されているぼかし半径と色が適用される */
text-shadow: 5px 5px;text-shadow の使用例
<p class="shadow">テキストに、ぼかした影をつけます。</p>
<p class="shadow-red">テキストに、赤色のぼかした影をつけます。</p>
<p class="shadow-no-blur">テキストに、ぼかしをいれない影をつけます。</p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
.shadow {
text-shadow: 5px 5px 2px;
}
.shadow-red {
text-shadow: 5px 5px 2px red;
}
.shadow-no-blur {
text-shadow: 5px 5px;
}
</style>このプロパティは複数の値をセットできることを利用して、縁取り文字を表現してみます。ポイントは影のぼかし半径を０pxにして、四方に影をつけるところです。
<p class="text-shadow">cssのみのテクニックで縁取り文字を作成します。</p>
<style>
p {
background-color: #def;
}
.text-shadow {
color: #fff;
text-shadow:
1px -1px 0px #000, /*右上方向に影をつける*/
1px 1px 0px #000, /*右下方向に影をつける*/
-1px -1px 0px #000, /*左上方向に影をつける*/
-1px 1px 0px #000; /*左下方向に影をつける*/
}
</style>