Catégories
Astuces et Design

10+ exemples d'extraits de code de neumorphisme

Le neumorphisme est une tendance récente qui est un descendant du skeuomorphisme et est utilisé dans la conception UX et UI sur les sites Web du monde entier. Pour jeter un coup d'œil à cette nouvelle tendance, nous avons rassemblé une collection d'exemples intéressants que vous pourrez parcourir et éventuellement utiliser dans vos projets à venir. Plongeons-nous!

Des animations de clic subtiles mettent en valeur cette petite collection de boutons.

Voir les boutons Pen Neumorphic de Sikriti Dakua (@dev_loop) sur CodePen.dark

Une animation sympa d'une empreinte digitale en survol rend celle-ci intéressante.

Voir le scan d'empreintes digitales du stylo – neumorphisme de Cassie Evans (@ cassie-codes) sur CodePen.dark

Voici un formulaire de connexion joliment conçu.

Voir le formulaire de connexion Pen Neumorphic par Ricardo Oliva Alonso (@ricardoolivaalonso) sur CodePen.dark

Une animation de chargement de page en dégradé inhabituelle.

Voir le Pen Neumorphic Gradient Loader de Samuel Garcia (@ sam_garcia2) sur CodePen.dark

Six dominos blancs magnifiquement conçus.

Voir les dominos Pen Neumorphic de P (@ petegarvin1) sur CodePen.dark

Survolez chacun des 16 boutons de cette collection pour voir une animation différente pour chacun.

Voir le Pen Satisfying Button (Neumorphic) par Yuhomyan (@yuhomyan) sur CodePen.dark

Une belle animation CSS pure au clic.

Voir les vagues de neumorphisme de Pen par Kilian So (@kilianso) sur CodePen.dark

Un autre exemple de bouton réalisé avec du CSS pur.

Voir les Pen Neumorphism Buttons de zeynep (@zeynepozdem) sur CodePen.dark

Voici un joli design qui a été codé en CSS pur.

Voir l'application météo Pen Neumorphism par Travis Williamson (@travisw) sur CodePen.dark

Une version neumorphique de l'icône du menu hamburger.

Voir le Pen Neuburger de Jacob (@HuntingHawk) sur CodePen.dark

Une horloge analogique joliment stylée.

Voir l'horloge Javascript Pen | Conception d'interface utilisateur d'horloge analogique de travail de neumorphisme CSS par samuel garcia (@ sam_garcia2) sur CodePen.dark

À première vue, cette barre de recherche est relativement simple, mais tapez un mot et appuyez sur «Entrée» pour voir une animation lisse.

Voir la barre de recherche Pen Neumorphism par Tran Dinh Trung (@ tdtrung17693) sur CodePen.dark

Comment utiliserez-vous le neumorphisme dans vos projets?

Que ce soit pour une application mobile ou un site Web, cette tendance pourrait être quelque chose que vous pourriez utiliser dans vos projets à venir – ou pas. Nous espérons que notre petite collection vous a fourni une certaine inspiration et perspicacité pendant que vous prenez cette décision. N'oubliez pas de consulter nos autres collections pendant que vous y êtes!

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

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