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

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]



Vous Allez Aimer Ces Articles

17.3kFans
5.1kFollowers
390Followers
246Followers
La newsletter Olybop.fr

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.