Neumorphism (またはソフト UI) は、Web デザインにおける大きなトレンドです。非常にプレミアムでモダンな印象を与える、美しい押し出しプラスチックの外観を作り出します。
ただし、Neumorphic ボタンを最初からコーディングするのは非常に面倒な作業です。
影の背後にある数学
完璧なニューモーフィック ボタンには、完全にバランスの取れた 2 つのボックス シャドウが必要です。 1. 光源をシミュレートするための左上の明るい影。 2. 奥行きをシミュレートするための右下の暗い影。
コントラストが高すぎると粗く見えます。低すぎると、ボタンが背景に隠れてしまいます。
```css / 古典的なニューモーフィズムの公式 / 背景: #e0e5ec; ボックスシャドウ: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5); 「」
より早い方法
DevTools で CSS 値を何時間も調整する代わりに、[CSS ボタン ジェネレーター](/en/css-button-generator) を使用できます。
私たちのツールを使用すると、希望する正確な境界線の半径、色、影の強度を視覚的に調整できます。画面上で完璧に表示されたら、「CSS をコピー」をクリックして React コンポーネントまたはスタイルシートにドロップするだけです。
生の CSS シャドウを書くのをやめて、視覚的にシャドウを生成してみましょう。