詳解逆引きHTML+CSS辞典

テキスト - 影をつけたい

登録タグ
Icon comment count 0
Icon stock count 0

影をつけたい

ドロップシャドウをつけたい/テキストを立体的に見せたい/文字をへこませたい/影を消したい

text-shadowプロパティ ドロップシャドウ

テキストに影をつけるには、text-shadowプロパティを使用します(ボックスに影をつける場合はbox-shadowプロパティを使用します。詳細は「要素の領域」の「影をつけたい(p.208)」参照)。

影の値には、「2つまたは3つの数値(単位つき)と色」を半角スペースで区切って指定します。数値は2つまたは3つを続けて指定し、色の値はそれら数値の前または後ろに(つまり値全体の先頭か末尾に)指定します。

1つめの数値には、表示させる影を元のテキストからどれだけ右にずらして表示させるかを単位をつけた実数で指定します(左にずらしたい場合はマイナスの値を指定します)。

2つめの数値には、表示させる影を元のテキストからどれだけ下にずらして表示させるかを単位をつけた実数で指定します(上にずらしたい場合はマイナスの値を指定します)。

3つめの数値は、影をぼかす範囲を単位をつけ

出典情報

Medium

詳解逆引きHTML+CSS辞典

  • 著者: 大藤 幹

コメント

    コメントはありません