drop-shadow() メソッド
drop-shadow() メソッドは、影を作成するための値を返す CSS メソッドです。この値から filter プロパティによってエレメントや内容に影を加えることができます。
影は、向きとぼかし具合、色が引数で指定できます。
filter: drop-shadow( 10px 10px 6px gray );
詳しくは Example を参照してください
drop-shadow() メソッドは、filter プロパティといった <filter-value-list> を使用するプロパティで利用します。
backdrop-filter では効果はないです。
エレメントの枠に影を付けたいだけならば box-shadow プロパティを使用する方法もあります。
ページ内 Index
構文(Syntax)
drop-shadow() メソッドの構文です。filter プロパティで使用します。
CSS
drop-shadow( offsetX offsetY blur color );
引数
引数は、CSS の長さです。
Example
drop-shadow() メソッドの例です。
drop-shadow() メソッドは、影を作成するための値を返します。この値を filter プロパティで受け取ることでエレメントや内容に影を加えることができます。
影は、向きとぼかし具合、色が引数で指定できます。
以下の例では、drop-shadow() メソッドでは内容とみなされるものには全て影が付きます。
backdrop-filter プロパティとの組み合わせでは効果はないようです。
関連するプロパティとメソッド
drop-shadow()メソッドに関するプロパティとメソッドには以下のものがあります。
| 名称 | 概要 |
|---|---|
| プロパティ | |
| filter | エレメントに対して視覚効果（ぼかし、彩度、影付きなど）を指定するプロパティ |
| backdrop-filter | エレメントの後ろの表示に「ぼかしや色相、コントラス卜」などの効果がある |
| メソッド | |
| blur(px) | ぼかし半径。値が大きいほどにぼやかしが大きくなる |
| brightness(%) | 明るさ調整。100%がdefault。 |
| contrast(%) | コントラスト調整。100%がdefault。 |
| drop-shadow(h-shadow v-shadow blur spread color) | エレメントに影を加えることができる。box-shadowプロパティと同じ値設定。 |
| grayscale(%) | グレイスケールに加工。0%がdefault。100%で完全な白黒表現。 |
| hue-rotate(deg) | 色相を調整（反対色）。0degでdeafult。360degで反対色。 |
| invert(%) | ネガポジ反転。0%がdefault。100%で完全な反転色。 |
| opacity(%) | 透過度を調整。100%がdefault。0%で見えなくなる。opacityプロパティと同じ値設定。 |
| saturate(%) | 色の濃さをあらわす彩度。100%がdefault。0%で見えなくなる。 |
| sepia(%) | セピア加工。0%がdefault。100%で完全なセピア色。 |
| url(URL) | SVGフィルターが設定されたXMLファイルを取得。 |