Home / UI Demos

UI Demos

Cross-Browser Flip Card

A GSAP powered cross-browser 3D flip card sample. Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE. Tutorial/codes – Demo Author: Rodrigo Hernando Created: MARCH 10, 2017 Made with: HTML, CSS and …

Read More »

Flipping Cards

Horizontal flipping cards on CSS Tutorial/codes – Demo Author: Nicola Markelov Created: OCTOBER 13, 2015 Made with: HTML, CSS Find the Demo See the Pen Flipping Cards by Nicola Markelov (@nicolamarkelov) on CodePen.

Read More »

Pure CSS Flip Card

Pure CSS Flip Card Tutorial/codes – Demo Author: Aron Created: MARCH 12, 2018 Made with: HTML, CSS Find the Demo See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.

Read More »

3D Profile Flip Card

These are 3D Profile Flip Cards. Click the i to flip the card. The concept started out as a hover event, but that proved challenging on a mobile device, so I opted to use a bit of js to change out classes on click/touch. There are a variety of flip …

Read More »

3D Flip Card Effect

3D flip cards implemented with CSS3 Tutorial/codes – Demo Author: Samet Erpik Created: AUGUST 23, 2014 Made with: HTML, CSS and JavaScript Find the Demo See the Pen 3D Flip Card Effect by Samet Erpik (@samerpik) on CodePen.

Read More »

Multi Flip Cards

My goal was to create re-useable card-like elements that flip on hover (or tap!). I’ve built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and …

Read More »

Star Wars Toggle Icon Animation

StarWars.com’s Toggle Icon Animation, it was really great, so I decided to add it to CodePen. It is designed and developed by StarWars.com Tutorial/codes – Demo Author: Rıza Selçuk Saydam Created: JULY 03, 2014 Made with: HTML, CSS and JavaScript Find the Demo See the Pen Star Wars Toggle Icon …

Read More »

Menu Toggle button with flat menu

Menu toggle button with flat menu. Uses CSS transitions and Vanilla JS. Tutorial/codes – Demo Author: Geoffrey Crofte Created: JUNE 13, 2013 Made with: HTML, CSS and JavaScript Find the Demo See the Pen Menu Toggle button with flat menu by Geoffrey Crofte (@CreativeJuiz) on CodePen.

Read More »

Pure CSS Slide Down and slide up

Pure CSS3 Slide Down and slide up Demo Tutorial/codes – Demo Author: Surjith Created: DECEMBER 12, 2013 Made with: HTML, CSS Find the Demo See the Pen Pure CSS Slide Down & slide up by Surjith (@surjithctly) on CodePen.

Read More »

Toggle transition face

Toggle transition face with pure CSS! Tutorial/codes – Demo Author: Katherine Kato Created: MARCH 09, 2018 Made with: HTML, CSS Find the Demo See the Pen Toggle transition face by Katherine Kato (@kathykato) on CodePen.

Read More »