テキスト（文字）に影をつける
テキスト（文字）に影（ドロップシャドウ）をつけるにはtext-shadowプロパティを使用します。
[書式] text-shadow: 横方向のずれ 縦方向のずれ ぼかし量 色;
横方向のずれはプラス値が右へ、マイナス値が左へずれます。
縦方向のずれはプラス値が下へ、マイナス値が上へずれます。
縦横のずれの大きさを変更した例
まずは、ぼかし量0の状態で縦横のずれの大きさを1px～5pxまで変更した例です。
[HTML]
|
1 2 3 4 5 6 7 8 |
サンプル1サンプル2サンプル3サンプル4サンプル5 |
[CSS]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h1 { font-size: 50px; font-weight: bold; color: #0ff; margin: 0; padding: 0; line-height: 1.2em; } .logo-sh1 { text-shadow: 1px 1px 0px #000; } .logo-sh2 { text-shadow: 2px 2px 0px #000; } .logo-sh3 { text-shadow: 3px 3px 0px #000; } .logo-sh4 { text-shadow: 4px 4px 0px #000; } .logo-sh5 { text-shadow: 5px 5px 0px #000; } |
[ブラウザ表示]
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
好み次第ですが、この文字の大きさではサンプル3あたりまでのずれにしたほうが良いでしょうね。サンプル4以上ですと「プ」のずれが少し大きく目立ってるかなと思います。
ぼかし量を変更した例
縦横のずれはサンプル3をベースとして今度はぼかし量を1px～5pxまで変えてみた例です。
[HTML]
|
1 2 3 4 5 6 7 8 |
サンプル3 ぼかし1サンプル3 ぼかし2サンプル3 ぼかし3サンプル3 ぼかし4サンプル3 ぼかし5 |
[CSS]
|
1 2 3 4 5 6 |
.logo-sh3b1 { text-shadow: 3px 3px 1px #000; } .logo-sh3b2 { text-shadow: 3px 3px 2px #000; } .logo-sh3b3 { text-shadow: 3px 3px 3px #000; } .logo-sh3b4 { text-shadow: 3px 3px 4px #000; } .logo-sh3b5 { text-shadow: 3px 3px 5px #000; } |
[ブラウザ表示]
サンプル3 ぼかし1
サンプル3 ぼかし2
サンプル3 ぼかし3
サンプル3 ぼかし4
サンプル3 ぼかし5
ぼかし量も好みによりますね。個人的に影っぽくみえるのはぼかし3以上かなぁ。
応用例
text-shadowの値は「,」で区切ることで複数定義できます。重ねるイメージですね。
下記、例ではtext-shadowを上下左右に3pxずらしてぼかしを6px、色に透明度を入れて薄く文字全体を囲むようにしてみました。4枚重ねているイメージになります。
[HTML]
|
1 2 3 4 |
サンプル3 ぼかし5 |
[CSS]
|
1 2 3 4 5 6 |
.logo-sh3b5-all { text-shadow: -3px 0px 6px rgba(0,0,0,0.5), /* 左 */ 3px 0px 6px rgba(0,0,0,0.5), /* 右 */ 0px -3px 6px rgba(0,0,0,0.5), /* 上 */ 0px 3px 6px rgba(0,0,0,0.5); /* 下 */ } |
[ブラウザ表示]
サンプル3 ぼかし5
斜め方向も試してみましたが、ぼかしを入れないと周囲の影が角ばった感じになり美しくないです。斜め方向を追加してもキレイに囲めませんでしたので上下左右のみとしました。文字にハッキリしたフチをつけたい場合はやはり画像を使用ってことになりますね。