5 composants de conception neumorphiques en HTML, CSS et JavaScript
Le neumorphisme est une nouvelle tendance design qui associe flat design et skeuomorphisme. C’est une façon minimale de concevoir avec un plastique souple et extrudé, presque en 3D. Actuellement, cette conception est à la mode sur Internet et est largement utilisée par les concepteurs et les développeurs.
Si vous voulez essayer le neumorphisme pour votre prochain projet, voici quelques extraits de code pour vous aider à démarrer.
1. Cartes neumorphiques
Utilisez les extraits de code HTML et CSS suivants pour créer les cartes neumorphiques ci-dessus.
Code HTML
Code CSS
2. Forme neumorphique
Utilisez les extraits de code HTML et CSS suivants pour créer la forme neumorphique ci-dessus.
Code HTML
Code CSS
3. Barre de navigation neumorphique
Utilisez les extraits de code HTML, CSS et JavaScript suivants pour créer la barre de navigation neumorphique ci-dessus.
Code HTML
Code CSS
Code Javascript
4. Texte et formes neumorphiques
Utilisez les extraits de code HTML et CSS suivants pour créer le texte et les formes neumorphiques ci-dessus.
Code HTML
Code CSS
5. Boutons neumorphiques
Utilisez les extraits de code HTML, CSS et JavaScript suivants pour créer les boutons neumorphiques ci-dessus.
Code HTML
Code CSS
Code Javascript
Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le Référentiel GitHub.
Noter : Le code utilisé dans cet article est Licence MIT.
Donnez du style à votre site Web avec le neumorphisme
Vous pouvez utiliser le concept de design minimaliste du neumorphisme pour styliser votre site Web. Il offre un rendu esthétiquement agréable. Mais encore, le neumorphisme a des limites d’accessibilité.
Il existe différentes façons de donner à un site Web un aspect élégant. Si vous souhaitez styliser des boîtes fades sur votre site Web, essayez la propriété CSS box-shadow.