100 Creative CSS Cards

Ionic Swoosh Cards

 

Out of glass instead of paper. And it’s draggable, drag it around to check the background blur effect. Then, make sure to click on the info icon to check the card animation.

 

Simple 3D plane hover effect using CSS3 transform

 

Click to reveal more info. Info folds out beneath the card, while the rest of the grid recedes.

 

Testing some simple animations to separate stacks of cards

 

In honor of the release of the Whispers of the Old Gods expansion for Hearthstone, I wanted to share this proof of concept. The card drag feature in the game has always been one of my favorite things to play with. It feels like the card is reacting to air resistance as you drag it around. The audio is a little finicky, just wanted something rough for the effect.

 

Cards flying away randomly

 

Calendar card and added a 3d effect

 

A short proof of concept for making cards with onclick animation events.

 

Animated Christmas card

 

Tinder swipe cards made with hammer.js

 

material design card ui

 

Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven’t tested on another browser.

 

Animated Spread cards

 

SVG animation with GSAP+MorphSVG, responsive. Hover on PC or tap on mobile.

 

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

 

Based on the real sizes of a standard business card, but it flips with shine. Needs more shadow!

 

That just some fun in material design

 

Drag-and-drop cards implemented using React and dragula.

 

Bootstrap cards tutorial for article on blog

 

Animated Press Card

 

Works best in Chrome (and browsers that support clip-path).

 

The game will save your stats locally, via localStorage.

 

Fetch the latest BTS articles from Soompi RSS feed and display them in a card stack. (Should be) Accessible with keyboard navigation.

 

A Simple card flip effect using Anime.js

 

Fancy quote and card animation

 

A simple reusable card based article UI with various overlay background.

 

Material design interface animations

 

A simple contact card with a banner, photo, links to social media, and an email form once a button is clicked.

 

Business Card

 

A series of animated chart cards using the least amount of css and information as possible

 

A movie card with animation and open with youtube video.

 

This is an online version of the business card.

 

Responsive and colorful Profile Card concept. I hope you like it.

 

Card design + switch view

 

Responsive Navigation Info Cards

 

Material Playing Cards, this is just the backbone for a full on 30s demo that I’m creating within a few days.

 

A card style blog post build with HTML5 , CSS3 and a little bit of jQuery

 

Stacked card with navigation!

 

Playing around with css grid, flexbox, clip-path, and radial-gradient

 

Seamless animation between states, and some of animations break outside the container. Select the weather icons on the top to see each state.

 

A simple menu made fun! This “card deck dropdown” is a beautiful display of what can be achieved using some CSS3 transitions, a little JS, and some creative thinking!. This is a UI concept i have seen before but i felt there was a few things that could be done different. Ao here is my version of a Card Deck style dropdown, using CSS3 transitions and jQuery.

 

A simple, responsive card UI component made with Vue.js.

 

Save some trees! Make a digital business card!

 

Material design MDL cards. Extended horizontal cards.

 

Displays a stack of cards. When the user hovers (or taps) the cards, they spread out and the user can hover (or tap) each card to see it.

 

The card expands into the background, no libraries, commented. Please note: this code is in no way ready to be used as is in production on your website. It will need to be adapted to be cross browser compliant & accessible. I just wanted to share how one might go about this effect with CSS & JS and no other dependencies

 

Material Design: Profile Card

 

xAxis and yAxis parallax. Used some JS to rotate the card on mouse movement.

 

Pure CSS news cards with revealing content on hover.

 

Product card with nice sliding effects

 

Looks best in Chrome. Some parts are bugged in FF. Not working in IE below edge (if it’s not working in edge, let me know pls). Card dimensions probably broken on mobile, except for iPhone 6 (because I was hardcoding pixels for this model). Don’t forget to click request button inside card.

 

Cards with slide effects.

 

Card with image hover effect

 

HTML/CSS version of card hover effects similar to Hearthstone.

 

Parallaxed backgrounds and layers in cards.

 

Article News Card

 

Inspired by the Google Image Gallery, card grid with expanding sections.

 

Mobile expanding cards with sports info.

 

A very minimal responsive blog card design.

 

Flip through a stack of comment cards

 

Flexbox to design really nice card layouts, and this is an example on how to do it

 

CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript.Due to use of some modern CSS techniques, this demo won’t work properly in IE. Scrolling in Safari is jumpy, don’t know why.

 

Material design cards test and study.

 

A card stack UI with swipeable cards.

 

Responsive material card based on Google Material Color palette in a bootstrap grid.

 

News card with fade in icon on hove

 

Fun card animation with vanilla js

 

Card design, feed animation, hidden navigation, sliding card to show menu. Menu icon micro-interaction + hover effect using amazing hover.css library Just a touch of jquery to fire event on click

 

Cards with Vertical carrousel concept

 

Mouse over the card for more info

 

Parallax on mouse movement and “device orientation”. Be sure to also check it out on mobile.

 

Profile card, Profile design, sequenced animation

 

Using grid inside flex, instead of the other way around

 

Grid Recipe Layout developed using only CSS

 

Pure CSS clickable flip cards using only css

 

Rotation effect with only CSS using transform, and HTML content created with JSON.

 

Flip Cards using Jquery

 

The physical world is so last year. Save the trees with a digital business card.

 

Simple profile flip card using CSS

 

Flip cards using Bootstrap 4

 

Card Flipping AngularJS

 

React – Flip Cards Design for actors

 

Just a cute little card flipping demo. Not a game yet, but still nice to look. Hover over the cards to see what I mean!

 

A simple css only flip cards.

 

Google Now style info cards with CSS card flip animation.

 

Messing around with 3d transforms and delayed transitions.

 

This uses the Foundation framework for much of the style, and has a pure CSS flip-card menu.

 

Realistic 3D Image Flip Box Flip Card Kallyas

 

Responsive half flip card with 3d transform on bootstrap grid.

 

Responsive Flip Card display

 

credit : bulma, vuejs, devices.css, chancejs, css-flip

 

Flipping card UI

 

Learn How to Create Quick and Simple React Flipping Card tutorial

 

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.

 

Pure CSS 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 options, Y, X and Diagonal

 

3D flip cards implemented with CSS3

 

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 put whatever you want into .front and .back and style accordingly. It gracefully degrades too: Webkit: Cards flip with a 3D effect Firefox & IE10: Cards flip but no 3d effect IE9 and down: Back instantly appears on hover