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

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

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

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

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.

Voir aussi :  Comment compresser et décompresser des fichiers en Golang

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.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *