HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用51. 要素やテキストに影(光彩)をつけるプロパティ(text-shadow, box-shadow)

      2018/10/04   hatano

text-shadowプロパティ(テキスト シャドウ)

テキストに対して、影(光彩)の効果をつけるプロパティです。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer10以上から対応

text-shadowプロパティの各ブラウザの対応状況
Can I use -text-shadow-

box-shadowプロパティ(ボックス シャドウ)

要素に対して、影(光彩)の効果をつけるプロパティです。
CSS3で追加されたプロパティです。
ベンダープレフィックスは不要
※Internet Explorer9以上から対応

box-shadowプロパティの各ブラウザの対応状況
Can I use -box-shadow-

text-shadowとbox-shadowの指定方法(外側)

外側に影(光彩)の効果を指定する場合は、4つの値を下記の順に指定します。
各値は、半角スペースで区切ります。順番は変更できません。

text-shadow: x軸の移動 y軸の移動値 ぼかしのサイズ 色;
box-shadow: x軸の移動 y軸の移動値 ぼかしのサイズ 色;

x軸の移動値、y軸の移動値、ぼかしのサイズの単位は、主にpxで指定します。(値が0の場合は、単位は省略できます)
色は、カラーコードやCSS3で追加されたrgba()rgb()などが使用できます。

text-shadow

box-shadow

box-shadowの指定方法(内側)

box-shadowは要素の内側にも使用できます。
内側に影(光彩)の効果を指定する場合は、insetを追加した 5つの値を下記の順に指定します。

box-shadow: inset x軸の移動値 y軸の移動値 ぼかしのサイズ 色;

box-shadowの内側指定

x軸とy軸の移動値について

x軸、y軸の値にマイナス指定をするとx軸は左方向に、y軸は上方向に移動します。

box-shadowの方向を左上に指定

text-shadowとbox-shadowの値の複数指定

値のセットをカンマで区切ると複数指定が可能です。
指定数に制限は特にありません。
重なり順は、左のセットが一番上に重なり、次のセットが下に重なります。
下記のコードは、ブルー(#00f)の下に、グリーン(#0f0)が重なるようにしています。ぼかしは、なしです。

box-shadowの値の複数指定

box-shadowでは、内側、外側も同時に指定できます。

box-shadowの方向を変えて複数指定

text-shadowを使ったフチ文字の作成

テキストには、borderを指定することができません。text-shadowを重ねがけすることで、擬似的にフチ文字を再現できます。
ポイントは、x軸とy軸の移動値は0にし、ぼかしのサイズと色のみ指定します。
セットをいくつ指定すれば、フチ文字のように見えるかは、テキストのサイズや色により変わります。
下記は、各値のセットを改行して、分かりやすくしています。

texr-shadowを使ったフチ文字

text-shadowとbox-shadowの注意点

text-shadowとbox-shadowで作った影の部分は、実体がありません。適度な余白を設定しないと前後の要素と重なってしまいます。
余白の設定は、margin, padding。テキストは、line-heightが使えます。

text-shadow、box-shadowが重なる場合

親要素に overflow: hidden; を指定すると、はみ出した影が表示されなくなります。
下記のコードは、親要素と子要素の幅と高さが同じなので、影が表示されません。
この場合は、親要素の幅、高さを広げるか、paddingで調整する必要があります。
影がついているかは、overflowを解除するとわかります。

overflowで影が見えなくなる場合

まとめ

  • text-shadowプロパティは、テキストに影(光彩)の効果をつけることができる
  • box-shadowプロパティは、要素に影(光彩)の効果をつけることができる
  • 外側の指定は、x軸の移動値、y軸の移動値、ぼかしのサイズ、色
  • box-shadowは内側の指定が可能
  • 内側の指定は、inset、x軸の移動値、y軸の移動値、ぼかしのサイズ、色
  • 値のセットは、カンマで区切ると複数指定ができる
  • text-shadow、box-shadowを設定したテキストや要素は、重ならない用に余白を設定する

広告

 - HTML・CSS