text-shadow

例

基本的な例

text-shadow-sm や shadow-lg のようなユーティリティを使用して、テキスト要素に異なるサイズのテキストシャドウを適用します。

<p class="text-shadow-2xs ...">The quick brown fox...</p>
<p class="text-shadow-xs ...">The quick brown fox...</p>
<p class="text-shadow-sm ...">The quick brown fox...</p>
<p class="text-shadow-md ...">The quick brown fox...</p>
<p class="text-shadow-lg ...">The quick brown fox...</p>

オパシティの変更

オパシティ modifier を使用して、テキストシャドウのオパシティを調整します。

<p class="text-shadow-lg ...">The quick brown fox...</p>
<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
<p class="text-shadow-lg/30 ...">The quick brown fox...</p>

デフォルトのテキストシャドウのオパシティは非常に低く（20％以下）、オパシティを上げると（50％など）、テキストシャドウがより顕著になります。

シャドウカラーの設定

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

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

デフォルトでは、色付きのシャドウのオパシティは100％ですが、オパシティ modifier を使用してこれを調整できます。

テキストシャドウの削除

text-shadow-none ユーティリティを使用して、要素から既存のテキストシャドウを削除します。

<p class="text-shadow-lg dark:text-shadow-none">
  <!-- ... -->
</p>

カスタム値の使用

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

<p class="text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 変数の場合は、以下も使用できます。 text-shadow-(<custom-property>) 構文

<p class="text-shadow-(--my-text-shadow) ...">
  Lorem ipsum dolor sit amet...
</p>

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

レスポンシブデザイン

プレフィックスa text-shadow ユーティリティ md: のようなブレークポイントバリアントを付加して、ユーティリティをmedium 画面サイズ以上でのみ適用します。

<p class="text-shadow-none md:text-shadow-lg ...">
  Lorem ipsum dolor sit amet...
</p>

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

テーマのカスタマイズ

テキストシャドウのカスタマイズ

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

@theme {
  --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); 
}

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

<p class="text-shadow-xl">
  Lorem ipsum dolor sit amet...
</p>

テーマに関するドキュメントで、テーマのカスタマイズの詳細をご覧ください。 テーマに関するドキュメント.

シャドウカラーのカスタマイズ

--color-* テーマ変数を使用して、color プロジェクト内のユーティリティをカスタマイズします。

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

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

<p class="text-shadow-regal-blue">
  Lorem ipsum dolor sit amet...
</p>

テーマに関するドキュメントで、テーマのカスタマイズの詳細をご覧ください。 テーマに関するドキュメント.