Le neumorphisme (ou soft UI) est une tendance massive dans la conception de sites Web. Il crée un bel aspect en plastique extrudé qui semble très haut de gamme et moderne.
Cependant, coder des boutons neumorphiques à partir de zéro est un énorme casse-tête.
Les mathématiques derrière les ombres
Un bouton Neumorphique parfait nécessite deux ombres de boîte parfaitement équilibrées : 1. Une ombre lumineuse en haut à gauche pour simuler une source de lumière. 2. Une ombre sombre en bas à droite pour simuler la profondeur.
Si le contraste est trop élevé, cela semble dur. S'il est trop bas, le bouton disparaît en arrière-plan.
```css / La formule classique du Neumorphisme / arrière-plan : #e0e5ec ; ombre de la boîte : 9px 9px 16px RVB (163 177 198,0,6), -9px -9px 16px rgba(255 255 255, 0,5); ```
Le moyen le plus rapide
Au lieu de modifier les valeurs CSS pendant des heures dans DevTools, vous pouvez utiliser notre [CSS Button Generator](/en/css-button-generator).
Notre outil vous permet de définir visuellement le rayon de bordure, la couleur et l'intensité des ombres exacts que vous souhaitez. Une fois qu'il semble parfait à l'écran, il vous suffit de cliquer sur "Copier CSS" et de le déposer dans votre composant ou feuille de style React.
Arrêtez d'écrire des ombres CSS brutes et commencez à les générer visuellement !