• Home
  • Web制作
  • 影付け表現を極める！CSSのfilter: drop-shadowを使いこなすための完全ガイド

影付け表現を極める！CSSのfilter: drop-shadowを使いこなすための完全ガイド

schedule update
Tags: CSS

はじめに：filter: drop-shadowで表現を豊かに

Webサイトのデザインにおいて、要素に影をつけることは、立体感や奥行きを表現するために非常に効果的です。CSSでは、影付けを実現する方法がいくつかありますが、中でも filter: drop-shadow プロパティは、その柔軟性と表現力の高さから、多くの開発者に利用されています。

この記事では、filter: drop-shadow プロパティの基礎から、応用的な使い方、そして注意点まで、具体的なコード例を交えながら詳しく解説していきます。

あわせて読みたい
CSSフィルターで画像編集！表現力を広げるテクニックを紹介

filter: drop-shadow の基本

filter: drop-shadow と box-shadow の違い

要素に影をつける際によく使われるプロパティに、box-shadow があります。filter: drop-shadow と box-shadow はどちらも影の効果を実現しますが、その仕組みや適用範囲が異なります。

特徴filter: drop-shadowbox-shadow
適用範囲要素の内容全体要素の枠の外側
ぼかし効果可能可能
拡散効果不可可能

filter: drop-shadow は、要素の内容全体に対して影を適用するため、画像やテキストなど、複雑な形状の要素にも自然な影をつけることができます。一方、box-shadow は要素の枠の外側に影を適用するため、主に四角形の要素に対して用いられます。

filter: drop-shadow の構文

filter: drop-shadow(水平方向の距離 垂直方向の距離 ぼかしの半径 影の色);

各パラメータの意味は以下の通りです。

  • 水平方向の距離: 影を水平方向にどれだけずらすかを指定します。正の値で右方向、負の値で左方向にずれます。
  • 垂直方向の距離: 影を垂直方向にどれだけずらすかを指定します。正の値で下方向、負の値で上方向にずれます。
  • ぼかしの半径: 影のぼかし具合を指定します。値が大きいほどぼかしが強くなります。
  • 影の色: 影の色を指定します。色の指定には、カラーネーム、RGB値、16進数などを使用できます。

filter: drop-shadow を活用しよう

1. テキストに影をつける

h1 {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

上記のコードは、h1要素に対して、右に2px、下に2pxずれた、ぼかし半径5px、半透明の黒い影を適用します。

2. 画像に影をつける

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

上記のコードは、img要素に対して、下に5pxずれた、ぼかし半径10px、薄いグレーの影を適用します。

3. 複数影をつける

filter: drop-shadow は、カンマ区切りで複数指定することで、複数の影を付けることができます。

.multiple-shadow {
  filter: 
    drop-shadow(5px 5px 10px rgba(255, 0, 0, 0.5)) 
    drop-shadow(-5px -5px 10px rgba(0, 0, 255, 0.5));
}

上記のコードは、.multiple-shadow クラスが適用された要素に、右下方向に赤い影と、左上方向に青い影の2つの影を適用します。

まとめ

filter: drop-shadow は、要素に自然で美しい影をつけることができる強力なプロパティです。この記事で紹介した内容を参考に、ぜひご自身のWebサイトのデザインに取り入れてみてください。

関連記事