filter: drop-shadow()

例

基本的な例

drop-shadow-sm や drop-shadow-xl のようなユーティリティを使用して、要素にドロップシャドウを追加します。

<svg class="drop-shadow-md ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-lg ...">
  <!-- ... -->
</svg>
<svg class="drop-shadow-xl ...">
  <!-- ... -->
</svg>

これは、テキストやSVG要素のような不規則な形状に影を適用するのに便利です。通常の要素に影を適用するには、代わりにbox shadowを使用することをお勧めします。

不透明度を変更する

ドロップシャドウの不透明度を調整するには、opacity modifier（不透明度修飾子）を使用します。

<svg class="fill-white drop-shadow-xl ...">...</svg>
<svg class="fill-white drop-shadow-xl/25 ...">...</svg>
<svg class="fill-white drop-shadow-xl/50 ...">...</svg>

デフォルトのドロップシャドウの不透明度は非常に低く（15％以下）、不透明度を上げると（例えば50％に）、ドロップシャドウがより顕著になります。

影の色を設定する

drop-shadow-indigo-500 や drop-shadow-cyan-500/50 のようなユーティリティを使用して、ドロップシャドウの色を変更します。

<svg class="fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...">...</svg>
<svg class="fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...">...</svg>

デフォルトでは、色付きの影の不透明度は100％ですが、opacity modifier（不透明度修飾子）を使用して調整できます。

ドロップシャドウを削除する

要素から既存のドロップシャドウを削除するには、drop-shadow-none ユーティリティを使用します。

<svg class="drop-shadow-lg dark:drop-shadow-none">
  <!-- ... -->
</svg>

カスタム値の使用

以下を使用してください drop-shadow-[<value>] 構文 を設定するにはドロップシャドウ完全にカスタムの値に基づいて

<svg class="drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...">
  <!-- ... -->
</svg>

CSS変数については、以下も使用できます。 drop-shadow-(<custom-property>) 構文

<svg class="drop-shadow-(--my-drop-shadow) ...">
  <!-- ... -->
</svg>

これは単なる省略形です drop-shadow-[var(<custom-property>)] var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックスを filter: drop-shadow() ユーティリティ md: のようなブレークポイントバリアントでプレフィックスすると、ユーティリティをmedium (ミディアム) スクリーンサイズ以上でのみ適用します。

<svg class="drop-shadow-md md:drop-shadow-xl ...">
  <!-- ... -->
</svg>

バリアントの使用に関する詳細は、バリアントのドキュメントをご覧ください。

テーマのカスタマイズ

ドロップシャドウのカスタマイズ

プロジェクトで--drop-shadow-*テーマ変数を使用して、ドロップシャドウ ユーティリティをカスタマイズします。

@theme {
  --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); 
}

これで drop-shadow-3xl ユーティリティをマークアップで使用できます。

<svg class="drop-shadow-3xl">
  <!-- ... -->
</svg>

テーマのカスタマイズに関する詳細は、 テーマのドキュメント.

影の色のカスタマイズ

--color-*テーマ変数を使用して、color ユーティリティをカスタマイズします。

@theme {
  --color-regal-blue: #243c5a; 
}

これで drop-shadow-リーガルブルー ユーティリティをマークアップで使用できます。

<svg class="drop-shadow-regal-blue">
  <!-- ... -->
</svg>

テーマのカスタマイズに関する詳細は、 テーマのドキュメント.