影の効果は Web デザインでよく使用され、要素を非常にうまく強調することができます.CSS3 が登場する前は、画像を使用してテキストや要素に影の効果を追加する必要があり、非常に不便でした. CSS3 の登場後、text-shadow と box-shadow の 2 つのプロパティを使用して、画像を使用せずにテキストまたは要素に影の効果を追加できます。

 

1. text-shadow (テキストシャドウ)

CSS の text-shadow プロパティを使用して、テキストの影の効果を設定できます. プロパティの構文は次のとおりです:

text-shadow: offset-x offset-y blur color;

構文は次のように説明されています。

  • offset-x: 必須パラメーター。影の水平オフセットを設定します。負の値を指定できます。
  • offset-y: 必須パラメーター。影の垂直方向のオフセットを設定します。負の値を指定できます。
  • blur: オプションのパラメータ。ぼかしの半径を設定します。値が大きいほど、ぼかしが大きくなり、影のエッジがぼやけます。負の値は使用できません。
  • color: オプションのパラメーター。影の色を設定します。省略または指定しない場合、color 属性の値が使用されます。

ヒント: 複数の影効果セットを同時に設定するには、text-shadow 属性を使用します。各セットはコンマで区切られます。定義された複数の影効果セットは、最初の影が一番上にある定義順にリストされます。 、 等々。さらに、テキストの影効果をキャンセルしたい場合は、text-shadow 属性の値を none に設定できます。

[例] text-shadow 属性を使用して、テキストに影効果を追加します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.ichi {
            text-shadow: 3px 5px 5px #FF0000;
        }
        p.ni {
            color: white;
            text-shadow: 1px 1px 2px black,
                         0 0 25px blue,
                         0 0 5px darkblue;
        }
    </style>
</head>
<body>
    <p class="ichi">文本影響の効果</p>
    <p class="ni">文本影響の効果</p>
</body>
</html> 

実行中の効果を次の図に示します。

図: Text-shadow プロパティのデモ
図: Text-shadow プロパティのデモ

2.box-shadow(ボックスシャドウ)

CSS の box-shadow プロパティを使用して、HTML 要素の影の効果を設定できます. プロパティの構文は次のとおりです:

box-shadow: h-shadow v-shadow blur spread color inset;

構文は次のように説明されています。

  • h-shadow: 必須パラメーター。影の水平方向のオフセットを設定します。負の値を指定できます。
  • v-shadow: 必須パラメーター。影の垂直方向のオフセットを設定します。負の値を指定できます。
  • blur: オプションのパラメータ。ぼかしの半径を設定します。値が大きいほど、ぼかしが大きくなり、影のエッジがぼやけます。負の値は使用できません。
  • spread: オプションのパラメーター、影のサイズを設定します。
  • color: オプションのパラメーター。影の色を設定します。
  • inset: オプションのパラメーター。デフォルトの外側の影 (アウトセット) を内側の影に変更します。

ヒント: text-shadow 属性と同様に、box-shadow 属性でも複数のグループの影効果を同時に設定できます.各グループはコンマで区切られます.定義された複数の影効果グループが定義順にリストされます. . 最初の影は末尾にあり、上にあり、以下同様です。

[例] box-shadow プロパティを使用して、テキストに影効果を追加します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            background-color: #CCC;
            float: left;
            margin: 5px;
        }
        div.ichigo {
            box-shadow: 2px 2px 5px #000;
        }
        div.ni {
            box-shadow: 2px 2px 5px #000 inset;
        }
        div.san {
            margin-left: 10px;
            box-shadow: 0px 0px 0px 3px #bb0a0a,
                        0px 0px 0px 6px #2e56bf,
                        0px 0px 0px 9px #ea982e;
        }
    </style>
</head>
<body>
    <div class="ichigo"></div>
    <div class="ni"></div>
    <div class="san"></div>
</body>
</html> 

実行中の効果を次の図に示します。

図: Box-shadow プロパティのデモ
図: Box-shadow プロパティのデモ
 

「CSS シャドウ効果 (2 つの方法)」についてわかりやすく解説!絶対に観るべきベスト2動画

HTML&CSS補足編 #6 box-shadowで要素に影をつけてみよう!
text-shadowとbox-shadow解説!文字や要素自身に色々な影をつけるには?

Share via
Copy link