beautiful-shadows

Beautiful Shadows

使用する場面

• サーフェスに洗練された多層的な立体感が必要な場合。
• Tailwind のデフォルトのシャドウが一般的すぎたり、強すぎたりする場合。
• 色付きのグローを使わず、ニュートラルで洗練された奥行きが必要な場合。

シャドウユーティリティ

以下の Tailwind クラスをそのまま使用してください。

Beautiful sm

コンパクトなカード、フォームコントロール、ピル、控えめなサーフェスに使用します。

shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)]

Beautiful md

カード、パネル、ポップオーバー、デフォルトの立体的なサーフェススタイルに使用します。

shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]

Beautiful lg

ヒーローメディア、機能の訴求要素、モーダル風のコンテナー、最も強い浮き上がりに使用します。

shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]

使用例

<div class="rounded-xl bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]">
  ...
</div>

使用ルール

• コンパクトなカード、フォームコントロール、ピル、控えめなサーフェスには Beautiful sm を使用します。
• カード、パネル、ポップオーバー、デフォルトの立体的なサーフェススタイルには Beautiful md を使用します。
• ヒーローメディア、機能の訴求要素、モーダル風のコンテナー、最も強い浮き上がりには Beautiful lg を使用します。
• すっきりとした塗りつぶしと、一貫した角丸を組み合わせます。
• インタラクションによって明確に立体感が変わる場合を除き、コンポーネントの状態ごとにシャドウの強さを1つだけ使用します。

避けること

• 同じコンポーネントで、これらと Tailwind のデフォルトのシャドウスケールを混在させること。
• これらのシャドウに強い色を付けること。ニュートラルで洗練された印象を保ちます。
• 密度の高いリストや小さなコントロールに Beautiful lg を適用すること。
• 1つの要素に複数のシャドウユーティリティを重ねて適用すること。
• コントラストが非常に低いレイアウトで、明確なボーダーの代わりにこれらを使用すること。