CSS3で要素に複数の影を付ける方法：詳細解説とサンプルコード

2024-06-03

CSS3 で要素に複数のボックスシャドウを設定する方法

一つの要素に複数のボックスシャドウを設定することは可能です。方法は以下の通りです。

複数の box-shadow プロパティをカンマ区切りで記述する

element {
  box-shadow: shadow1, shadow2;
}

この例では、shadow1 と shadow2 という2つの影が要素に設定されます。

それぞれの影の詳細を個別に記述する

element {
  box-shadow: offset-x offset-y blur-radius spread-radius color,
              offset-x offset-y blur-radius spread-radius color;
}

この例では、2つの影それぞれについて、オフセット、ぼかし、拡散、色を個別に設定しています。

影の定義

offset-x と offset-y：影の水平方向と垂直方向のオフセットをピクセル単位で指定します。正の値は要素の右下方向、負の値は左上方向に影をずらします。
blur-radius：影のぼかし具合をピクセル単位で指定します。値が大きいほど、影はぼやけます。
color：影の色を指定します。

例

以下のコードは、要素に黒い影と赤い影を設定します。

element {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5),
              -5px -5px 10px 5px rgba(255, 0, 0, 0.5);
}

注意点

複数の影を定義する場合は、カンマ区切りで記述する必要があります。
影の定義順序は、描画順序に影響します。最初に定義された影が最前面に描画されます。
ぼかしや拡散を強く設定すると、パフォーマンスが低下する可能性があります。

CSS3 で要素に複数のボックスシャドウを設定するサンプルコード

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 ボックスシャドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">要素に複数のボックスシャドウを設定</div>
</body>
</html>

CSS

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3),
              -5px -10px 15px rgba(255, 0, 0, 0.3);
}

このコードを実行すると、以下のような黒い影と赤い影が付いたボックスが表示されます。

[画像 of 複数のボックスシャドウを持つボックス]

説明

HTML コードでは、div 要素に box というクラスを割り当てています。
CSS コードでは、.box クラスセレクタを使用して、ボックスのスタイルを定義しています。
box-shadow プロパティを使用して、2つの影を定義しています。
- 最初の影は、5ピクセル右下、10ピクセル下、15ピクセルぼやけた、半透明度30%の黒い影です。

バリエーション

このコードを参考に、さまざまな影を組み合わせて、要素に奥行きや立体感を出すことができます。

影の色を変える
影のオフセットを変える
影のぼかし具合を変える

注意事項

複数の影を定義する場合は、パフォーマンスが低下する可能性があることに注意してください。
影を多用しすぎると、デザインがごちゃごちゃしてしまう可能性があるので、注意が必要です。

CSS3 で要素に複数のボックスシャドウを設定するその他の方法

inset プロパティを使用すると、影を要素の内側に設定することができます。これにより、要素が浮き上がっているように見える効果を作成できます。

element {
  box-shadow: inset 5px 5px 10px 5px rgba(0, 0, 0, 0.5),
              inset -5px -5px 10px 5px rgba(255, 0, 0, 0.5);
}

box-shadow プロパティを疑似要素に適用することで、要素の特定の部分にのみ影を設定することができます。

element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3);
}

element::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: -5px -10px 15px rgba(255, 0, 0, 0.3);
}

グラデーションを使用して、影に滑らかな色合いを持たせることができます。

element {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) inset,
              0px -10px 20px rgba(255, 255, 255, 0.2) inset;
}

SVG フィルターを使用して、より複雑な影を作成することができます。

<svg width="200" height="100">
  <filter id="shadow">
    <feGaussianBlur stdDeviation="5" />
    <feColorMatrix type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1" />
  </filter>
  <rect x="0" y="0" width="200" height="100" fill="#ccc" filter="url(#shadow)" />
</svg>

これらの方法は、それぞれ異なる効果を生み出すため、目的やデザインに合わせて最適な方法を選択してください。

css