CSSで影を付ける3つの方法：drop-shadow()関数、box-shadowプロパティ、SVGフィルター

drop-shadow()関数は、**CSSの「Filter Effects」**を使用して、要素に影を落とすためのものです。影は、要素の形状に沿ってぼかされたアルファマスクとして描画されます。これは、box-shadowプロパティとは異なり、要素の境界ではなく、コンテンツ自体に影を落とすことができる点が特徴です。

構文

filter: drop-shadow(x-offset, y-offset, blur-radius, color);

color: 影の色
blur-radius: 影のぼかし半径（値が大きいほどぼやける）
y-offset: 影の垂直方向オフセット（正の値で下へ、負の値で上へ）
x-offset: 影の水平方向オフセット（正の値で右へ、負の値で左へ）

例

filter: drop-shadow(5px 10px 5px rgba(0, 0, 0, 0.5));

この例では、要素の右下5px、下に10px離れた位置に、半径5px、50%透明度の黒い影が落とされます。

応用例

ボタンにクリック感を出す
テキストに立体感を出す
画像に奥行きを与える

「drop-shadow()」と「box-shadow」の違い

box-shadow: 要素の境界から影を落とす
drop-shadow(): 要素の形状に沿って影を落とす

ブラウザによっては、drop-shadow()のサポート状況が異なる場合があります。
drop-shadow()は、SVGやPNG画像などの透過画像でのみ有効です。

影付きテキスト

p {
  font-size: 20px;
  color: #333;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
}

このコードは、段落要素 (<p>) 内のテキストに、右下2px、下に2px離れた位置に、半径5px、30%透明度の黒い影を落とします。

影付きボタン

button {
  background-color: #4CAF50; /* 緑色 */
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.2));
}

このコードは、ボタン要素 (<button>) に、右下3px、下に3px離れた位置に、半径5px、20%透明度の黒い影を落とします。

影付き画像

img {
  filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.7));
}

このコードは、画像要素 (<img>) に、右下5px、下に10px離れた位置に、半径10px、70%透明度の黒い影を落とします。

.element {
  position: relative; /* 影を要素内に含めるために必要 */
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1))
         drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}

このコードは、.element クラスを持つ要素に、2種類の影を落とします。1つ目は、2px離れた位置に半径2px、10%透明度の黒い影です。2つ目は、5px離れた位置に半径5px、30%透明度の黒い影です。

drop-shadow() 関数は、CSSアニメーションと組み合わせることで、動的な影表現を作成することもできます。
drop-shadow() 関数は、複数の影を定義することができます。カンマ区切りで複数個の drop-shadow() 宣言を記述することで、複数の影を重ねることができます。
上記のコードはあくまで基本的な例です。影の色、オフセット、ぼかし半径などを調整することで、様々な効果を実現できます。

box-shadow プロパティ

最も一般的な代替方法は、box-shadow プロパティを使用する方法です。box-shadow は、要素の境界に影を付けることができます。drop-shadow() 関数と比べて、以下の利点があります。

多くのブラウザで広くサポートされている
複数種類の影を簡単に定義できる
疑似要素やテキストにも影を付けられる

一方、以下の欠点もあります。

drop-shadow() 関数ほどぼかし効果が滑らかではない
要素の形状に沿った影を付けられない

box-shadow プロパティの例：

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

このコードは、.element クラスを持つ要素に、右下5px、下に10px離れた位置に、半径15px、50%透明度の黒い影を落とします。

SVGフィルター

SVGフィルターを使用して、より複雑な影を表現することもできます。SVGフィルターは、ベクター画像に対して様々な効果を適用することができます。drop-shadow() 関数と比べて、以下の利点があります。

ぼかし以外にも様々な効果を適用できる
非常に詳細な影を定義できる

レンダリングパフォーマンスが低下する可能性がある
記述が複雑になる

SVGフィルターの例：

<svg width="100" height="100">
  <rect width="50" height="50" fill="#ccc" />
  <filter id="shadow">
    <feGaussianBlur stdDeviation="5" />
    <feOffset dx="5" dy="10" />
    <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 0"/>
  </filter>
  <use xlink:href="#rect" filter="url(#shadow)" />
</svg>

このSVGコードは、長方形にぼやけた黒い影を落とします。

画像

影を表現する画像を用意して、それを背景画像として使用するのも一つの方法です。この方法の利点は、以下の通りです。

コードがシンプルになる
複雑な影を簡単に表現できる

レスポンシブデザインに不向き
画像ファイルが大きくなる

画像を使用した例：

.element {
  background-image: url('shadow.png');
  background-position: bottom right;
}

このコードは、.element クラスを持つ要素の右下に、shadow.png 画像の影を配置します。

上記以外にも、CSSグラデーションや text-shadow プロパティを使用して影を表現する方法があります。これらの方法は、より特殊な効果が必要な場合に役立ちます。