Inspiration UI/UX : Des exemples Dribbble transformés en Code - #Olybop

Inspiration UI/UX : Des exemples Dribbble transformés en Code


Du webdesign au Html, css et JS

Il nous arrive souvent de se balader sur Dribbble et de voir des animations gifs comme vous pouvez le voir sur des articles d’inspiration ui ux ou d’expérience utilisateur design. Certains intégrateurs se sont fait plaisir et nous font plaisir de transcrire ces design en code

Exemple de menu mobile

Cliquez sur le menu en haut à droite

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »aNYWKE » default_tab= »result » user= »karlovidek »]See the Pen <a href=’http://codepen.io/karlovidek/pen/aNYWKE/’>Mobile navigation  animation</a> by Karlo Videk (<a href=’http://codepen.io/karlovidek’>@karlovidek</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple de formulaire

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »mPLPwj » default_tab= »result » user= »THEORLAN2″]See the Pen <a href=’http://codepen.io/THEORLAN2/pen/mPLPwj/’>Sign in and Sign up  – Single Form</a> by Dany Santos (<a href=’http://codepen.io/THEORLAN2′>@THEORLAN2</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple de formulaire de contact animé

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »zrYrVb » default_tab= »result » user= »tari »]See the Pen <a href=’http://codepen.io/tari/pen/zrYrVb/’>Modal Contact Form</a> by ari (<a href=’http://codepen.io/tari’>@tari</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple de mac qui s’ouvre en 3D

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »vzeyc » default_tab= »result » user= »zacharyolson »]See the Pen <a href=’http://codepen.io/zacharyolson/pen/vzeyc/’>Css version of macbook dribbble</a> by Zachary Olson (<a href=’http://codepen.io/zacharyolson’>@zacharyolson</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple de chronomètre

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »ONZWoX » default_tab= »result » user= »hilotacker »]See the Pen <a href=’http://codepen.io/hilotacker/pen/ONZWoX/’>Stopwatch</a> by Hilo (<a href=’http://codepen.io/hilotacker’>@hilotacker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple d’accordéon mobile

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »eZVzBL » default_tab= »result » user= »SoufianeAbid »]See the Pen <a href=’http://codepen.io/SoufianeAbid/pen/eZVzBL/’>flat accordion</a> by Soufiane Abid (<a href=’http://codepen.io/SoufianeAbid’>@SoufianeAbid</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Exemple de formulaire de recherche

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »vGjbYJ » default_tab= »result » user= »poporetto »]See the Pen <a href=’http://codepen.io/poporetto/pen/vGjbYJ/’>Search Form</a> by Andrias (<a href=’http://codepen.io/poporetto’>@poporetto</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Un menu mobile en CSS uniquement

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »lKcvs » default_tab= »result » user= »poppe1219″]See the Pen <a href=’http://codepen.io/poppe1219/pen/lKcvs/’>Mobile menu, CSS only</a> by poppe1219 (<a href=’http://codepen.io/poppe1219′>@poppe1219</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Infini animé

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »BjRdRX » default_tab= »result » user= »ciprianionescu »]See the Pen <a href=’http://codepen.io/ciprianionescu/pen/BjRdRX/’>Infinity Loop (2D)</a> by Ciprian Ionescu (<a href=’http://codepen.io/ciprianionescu’>@ciprianionescu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Icon d’upload animée

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »QyeMKP » default_tab= »result » user= »clementGir »]See the Pen <a href=’http://codepen.io/clementGir/pen/QyeMKP/’>Dribble Upload Animation Concept</a> by Clement Girault (<a href=’http://codepen.io/clementGir’>@clementGir</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Liste de réseaux sociaux

[codepen_embed height= »600″ theme_id= »0″ slug_hash= »gzHDs » default_tab= »result » user= »gumetis »]See the Pen <a href=’http://codepen.io/gumetis/pen/gzHDs/’>gzHDs</a> by Erick (<a href=’http://codepen.io/gumetis’>@gumetis</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]



Information : Si vous êtes l’auteur d'illustrations vues sur le site et que vous souhaitez les supprimer, modifier et ou tout autres demandes, merci de prendre contact avec moi pour que je puisse vous citer et modifier l'article selon vos convenances. Si vous n'êtes pas cité, c'est que je n’ai pas trouvé sur la toile à qui appartenait ces créations. Je ne veux aucunement vous porter préjudice. Merci

Les articles que vous allez aussi aimer