テキストシャドウ
CSS3では画像を使わずに簡単なコードでテキストにドロップシャドウをかけることが可能です。
「text-shadow」を使う
以下のようにtext-shadowを指定することでテキストにドロップシャドウをかけることが可能です。
index.html
<p class="shadow">これはシャドウ付きの文字です</p>
style.css
.shadow{
text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
| text-shadow:○px △px □px rgb( ); | テキストにドロップシャドウをかけます。 ○px分テキストからの横の距離をずらします。 △pxは縦です。 □px分シャドウのぼかしの強さです。 最後にシャドウの色を決めます。 |
|---|
デザイン的な話になりますが、綺麗なドロップシャドウをかけるポイントは、距離もぼかしも色の濃さも強くしすぎないことです。シャドウがついているかどうか一見分からないくらいが丁度いいです。
見本はシャドウの色をRGBaを使って薄くしています。