【CSS Modules】drop-shadow()関数の使い方
drop-shadow()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
drop-shadow()関数は、画像やHTML要素に影を適用するフィルタ操作を実行する関数です。この関数は、主にCSSのfilterプロパティの値として使用され、指定された要素の視覚的な奥行きや立体感を表現するために利用されます。
drop-shadow()関数が特に優れている点は、対象となる要素の形状、特にアルファチャネル（透明度）を持つ部分に基づいて影を生成する能力です。例えば、透過PNG画像や透明な背景を持つアイコンなど、コンテンツ自体の不規則な形状に沿った影を作り出すことができます。これは、要素の矩形ボックス全体に影を適用するbox-shadowプロパティとは異なる重要な特徴です。
この関数には、通常、影の水平方向のオフセット（offset-x）、垂直方向のオフセット（offset-y）、ぼかしの半径（blur-radius）、そして影の色（color）の4つの引数を指定します。offset-xとoffset-yは必須の引数で、影が元の要素からどれだけ離れて表示されるかをピクセルやemなどの単位で指定します。blur-radiusは任意で、影の輪郭をどれだけぼかすかを定義し、値を大きくするほど影は柔らかく広がります。colorも任意で、影の色を指定します。デフォルトでは、現在のテキストの色が使用されることが多いですが、明示的に指定することで、よりデザインに合わせた影を表現できます。
drop-shadow()関数を使用することで、ウェブページ上の画像やアイコン、あるいはテキストにさえも、よりリアルで洗練された視覚効果を加えることが可能になります。特に、複雑な形状の要素に対して自然な影を付けたい場合に非常に有効なツールです。
構文(syntax)
1filter: drop-shadow(offset-x offset-y blur-radius color);
引数(parameters)
<length> <length> <length>? <color>?
- <length> $offset-x: 影の水平方向のオフセットを指定します。
- <length> $offset-y: 影の垂直方向のオフセットを指定します。
- <length>? $blur-radius: 影のぼかし半径を指定します。省略可能です。
- <color>? $color: 影の色を指定します。省略可能です。
戻り値(return)
drop-shadow() 関数は、要素の影を生成し、その影を <filter-function> 型の値として返します。