w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
No Result
View All Result

99 Hand-picked CSS Card Collections

by CV
September 25, 2019
in Essentials

In this article, we listed the hand-picked awesome css card collections and developed using css, html, jQuery, Ionic, ReactJs, VueJs and etc. Listed tutorials well played with colors, gradients or shapes. some of the cards are have beautiful animation effects using transitions. Demo and download available on each tutorial. Cards can be used directly without any changes and could be small changes based on your needs.

RelatedPosts

Custom radio button using CSS only

T-shirt cannon playful animated button concept

Chat bubble smoothly morphs into a “close” X

Clipped Overlapping Grid Items

Exciting Multi-line Highlights

Stacked Rainbow Cards

Article will be helpful for designers and non-coders.

Comment your favorite Cards or comment the cards which you admired from external resource.

1) Ionic Swoosh Cards

Ionic Swoosh Cards
Demo Image: Ionic Swoosh Cards

Ionic Swoosh Cards

Tutorial/codes – Demo

Author:
Loring Dodge
Created:
JUNE 29, 2015
Made with:
HTML, CSS and JavaScript

2) Interactive profile card

Interactive profile card
Demo Image: Interactive profile card

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.

Tutorial/codes – Demo

Author:
Iva Dopuđ
Created:
SEPTEMBER 13, 2015
Made with:
HTML, CSS and JavaScript

3) 3D hover plane effect

3D hover plane effect
Demo Image: 3D hover plane effect

Simple 3D plane hover effect using CSS3 transform

Tutorial/codes – Demo

Author:
Rian Ariona
Created:
FEBRUARY 14, 2015
Made with:
HTML, CSS and JavaScript

4) 3D Fold out reveal

3D Fold out reveal
Demo Image: 3D Fold out reveal

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

Tutorial/codes – Demo

Author:
Andrew Canham
Created:
NOVEMBER 04, 2015
Made with:
HTML, CSS and JavaScript

5) Animated Card Stacks

Animated Card Stacks
Demo Image: Animated Card Stacks

Testing some simple animations to separate stacks of cards

Tutorial/codes – Demo

Author:
Chris Hutchinson
Created:
MAY 24, 2014
Made with:
HTML, CSS and JavaScript

6) Hearthstone Card CSS 3D Click/Drag

Hearthstone Card CSS 3D Click/Drag
Demo Image: Hearthstone Card CSS 3D Click/Drag

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.

Tutorial/codes – Demo

Author:
Jack Rugile
Created:
APRIL 26, 2016
Made with:
HTML, CSS and JavaScript

7) Flying cards tabs

Flying cards tabs
Demo Image: Flying cards tabs

Cards flying away randomly

Tutorial/codes – Demo

Author:
Biliana
Created:
FEBRUARY 05, 2017
Made with:
HTML, CSS and JavaScript

8) Calendar card with 3d effects

Calendar card with 3d effects
Demo Image: Calendar card with 3d effects

Calendar card and added a 3d effect

Tutorial/codes – Demo

Author:
Phil
Created:
JANUARY 21, 2017
Made with:
HTML, CSS and JavaScript

9) Flexbox Cards with Animation

Flexbox Cards with Animation
Demo Image: Flexbox Cards with Animation

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

Tutorial/codes – Demo

Author:
AJ Mody
Created:
MAY 09, 2016
Made with:
HTML, CSS and JavaScript

10) Animated Christmas Card

Animated Christmas Card
Demo Image: Animated Christmas Card

Animated Christmas card

Tutorial/codes – Demo

Author:
Łukasz Niedźwiecki
Created:
DECEMBER 25, 2016
Made with:
HTML, CSS and JavaScript

11) Tinder swipe cards

Tinder swipe cards
Demo Image: Tinder swipe cards

Tinder swipe cards made with hammer.js

Tutorial/codes – Demo

Author:
Rob Vermeer
Created:
NOVEMBER 26, 2017
Made with:
HTML, CSS and JavaScript

12) Web Material Card Concept

Web Material Card Concept
Demo Image: Web Material Card Concept

material design card ui

Tutorial/codes – Demo

Author:
Mason Fox
Created:
OCTOBER 22, 2015
Made with:
HTML, CSS and JavaScript

13) Material VCard

Material VCard
Demo Image: Material VCard

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

Tutorial/codes – Demo

Author:
Rian Ariona
Created:
SEPTEMBER 16, 2015
Made with:
HTML, CSS and JavaScript

14) Spread cards

Spread cards
Demo Image: Spread cards

Animated Spread cards

Tutorial/codes – Demo

Author:
Andrew Canham
Created:
SEPTEMBER 04, 2017
Made with:
HTML, CSS and JavaScript

15) Environment Impact Cards (GSAP)

Environment Impact Cards (GSAP)
Demo Image: Environment Impact Cards (GSAP)

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

Tutorial/codes – Demo

Author:
Anton Mudrenok
Created:
DECEMBER 22, 2016
Made with:
HTML, CSS and JavaScript

16) Card UI Skeleton Screen

Card UI Skeleton Screen
Demo Image: Card UI Skeleton Screen

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.

Tutorial/codes – Demo

Author:
Max Böck
Created:
AUGUST 09, 2017
Made with:
HTML, CSS

17) 3d flexbox flippable card with shiny

3d flexbox flippable card with shiny
Demo Image: 3d flexbox flippable card with shiny

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

Tutorial/codes – Demo

Author:
Adam Crockett
Created:
AUGUST 03, 2016
Made with:
HTML, CSS and JavaScript

18) Plain Blog Card fun

99 Hand-picked CSS Card Collections 1
Demo Image:

That just some fun in material design

Tutorial/codes – Demo

Author:
IMarty
Created:
JANUARY 12, 2016
Made with:
HTML, CSS

19) Drag and drop cards

Drag and drop cards
Demo Image: Drag and drop cards

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

Tutorial/codes – Demo

Author:
Graham Marlow
Created:
FEBRUARY 05, 2016
Made with:
HTML, CSS and JavaScript

20) Bootstrap cards tutorial

Bootstrap cards tutorial
Demo Image: Bootstrap cards tutorial

Bootstrap cards tutorial for article on blog

Tutorial/codes – Demo

Author:
Alex Devero
Created:
OCTOBER 23, 2015
Made with:
HTML, CSS

21) Journalist Flip Card

Journalist Flip Card
Demo Image: Journalist Flip Card

Animated Press Card

Tutorial/codes – Demo

Author:
Anders Schmidt Hansen
Created:
AUGUST 14, 2013
Made with:
HTML, CSS and JavaScript

22) Gift Card UI

Gift Card UI
Demo Image: Gift Card UI

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

Tutorial/codes – Demo

Author:
David Khourshid
Created:
MAY 27, 2015
Made with:
HTML, CSS

23) Flip – card memory game

Flip - card memory game.
Demo Image: Flip – card memory game.

The game will save your stats locally, via localStorage.

Tutorial/codes – Demo

Author:
Codrin Pavel
Created:
JANUARY 17, 2015
Made with:
HTML, CSS and JavaScript

24) Cards – BTS on Soompi

Cards - BTS on Soompi
Demo Image: Cards – BTS on Soompi

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

Tutorial/codes – Demo

Author:
Halida Astatin
Created:
JUNE 04, 2018
Made with:
HTML, CSS and JavaScript

25) Simple card flip effect using Anime.js

Simple card flip effect using Anime.js
Demo Image: Simple card flip effect using Anime.js

A Simple card flip effect using Anime.js

Tutorial/codes – Demo

Author:
Marcos Paulo
Created:
JANUARY 09, 2018
Made with:
HTML, CSS and JavaScript

26) Fancy quote and card animation

Fancy quote and card animation
Demo Image: Fancy quote and card animation

Fancy quote and card animation

Tutorial/codes – Demo

Author:
Andreas Neeven
Created:
OCTOBER 09, 2015
Made with:
HTML, CSS and JavaScript

27) Card Article UI

Card Article UI
Demo Image: Card Article UI

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

Tutorial/codes – Demo

Author:
Mithicher
Created:
OCTOBER 27, 2015
Made with:
HTML, CSS

28) Material card opening effect

Material card opening effect
Demo Image: Material card opening effect

Material design interface animations

Tutorial/codes – Demo

Author:
Luiz Otávio Carvalho
Created:
MARCH 15, 2015
Made with:
HTML, CSS and JavaScript

29) Simple Contact Card

Simple Contact Card
Demo Image: Simple Contact Card

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

Tutorial/codes – Demo

Author:
Max Kurapov
Created:
JANUARY 24, 2016
Made with:
HTML, CSS and JavaScript

30) Business Card and flip effects

Business Card and flip effects
Demo Image: Business Card and flip effects

Business Card

Tutorial/codes – Demo

Author:
Nicholas Dobie
Created:
JULY 21, 2014
Made with:
HTML, CSS

31) Animated Chart Cards

Animated Chart Cards
Demo Image: Animated Chart Cards

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

Tutorial/codes – Demo

Author:
Izzy Skye
Created:
JULY 23, 2015
Made with:
HTML, CSS and JavaScript

32) Beautiful Movie Card with animation

Beautiful Movie Card with animation
Demo Image: Beautiful Movie Card with animation

A movie card with animation and open with youtube video.

Tutorial/codes – Demo

Author:
Alex Fernandez
Created:
OCTOBER 16, 2015
Made with:
HTML, CSS and JavaScript

33) 3d effect Business Card

3d effect Business Card
Demo Image: 3d effect Business Card

This is an online version of the business card.

Tutorial/codes – Demo

Author:
Lubos
Created:
AUGUST 16, 2016
Made with:
HTML, CSS and JavaScript

34) Responsive and colorful Profile Card

Responsive and colorful Profile Card
Demo Image: Responsive and colorful Profile Card

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

Tutorial/codes – Demo

Author:
Muhammed Erdem
Created:
SEPTEMBER 23, 2018
Made with:
HTML, CSS and JavaScript

35) Responsive Company Cards

Responsive Company Cards
Demo Image: Responsive Company Cards

Card design + switch view

Tutorial/codes – Demo

Author:
Pham Mikun
Created:
JUNE 10, 2015
Made with:
HTML, CSS and JavaScript

36) Navigation Info Cards

Navigation Info Cards
Demo Image: Navigation Info Cards

Responsive Navigation Info Cards

Tutorial/codes – Demo

Author:
Nathan Taylor
Created:
JULY 08, 2017
Made with:
HTML, CSS and JavaScript

37) Material Playing Cards

Material Playing Cards
Demo Image: Material Playing Cards

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

Tutorial/codes – Demo

Author:
Andy Tran
Created:
JULY 25, 2015
Made with:
HTML, CSS

38) Material Design Card – For Blog Post Article

Material Design Card - For Blog Post Article
Demo Image: Material Design Card – For Blog Post Article

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

Tutorial/codes – Demo

Author:
Mithicher
Created:
MARCH 17, 2015
Made with:
HTML, CSS and JavaScript

39) Stacked Cards with sliding effects

Stacked Cards with sliding effects
Demo Image: Stacked Cards with sliding effects

Stacked card with navigation!

Tutorial/codes – Demo

Author:
Prasanna Pegu
Created:
JUNE 16, 2015
Made with:
HTML, CSS and JavaScript

40) Geometric business card with CSS Grid

Geometric business card with CSS Grid
Demo Image: Geometric business card with CSS Grid

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

Tutorial/codes – Demo

Author:
Liz Wendling
Created:
MARCH 25, 2018
Made with:
HTML, CSS and JavaScript

41) Animated Weather Cards

Animated Weather Cards
Demo Image: Animated Weather Cards

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

Tutorial/codes – Demo

Author:
Steve Gardner
Created:
AUGUST 22, 2016
Made with:
HTML, CSS and JavaScript

42) CSS3 Card Deck Drop Down

CSS3 Card Deck Drop Down
Demo Image: CSS3 Card Deck Drop Down

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.

Tutorial/codes – Demo

Author:
Brady Sammons
Created:
JULY 22, 2013
Made with:
HTML, CSS and JavaScript

43) Simple Blog Card

Simple Blog Card
Demo Image: Simple Blog Card

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

Tutorial/codes – Demo

Author:
Katherine Kato
Created:
JUNE 08, 2018
Made with:
HTML, CSS and JavaScript

44) Digital Business Card

Digital Business Card
Demo Image: Digital Business Card

Save some trees! Make a digital business card!

Tutorial/codes – Demo

Author:
Will Johnson
Created:
OCTOBER 09, 2015
Made with:
HTML, CSS and JavaScript

45) MDL horizontal card

MDL horizontal card
Demo Image: MDL horizontal card

Material design MDL cards. Extended horizontal cards.

Tutorial/codes – Demo

Author:
Ruslan
Created:
JULY 12, 2015
Made with:
HTML, CSS

46) Card Stack with beautiful animation

Card Stack with beautiful animation
Demo Image: Card Stack with beautiful animation

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.

Tutorial/codes – Demo

Author:
Lane Olson
Created:
MAY 30, 2013
Made with:
HTML, CSS and JavaScript

47) Expanding card page transition effect

Expanding card page transition effect
Demo Image: Expanding card page transition effect

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

Tutorial/codes – Demo

Author:
Rachel Smith
Created:
FEBRUARY 10, 2017
Made with:
HTML, CSS and JavaScript

48) Material Design: Profile Card

Material Design: Profile Card
Demo Image: Material Design: Profile Card

Material Design: Profile Card

Tutorial/codes – Demo

Author:
Emil Devantie Brockdorff
Created:
JANUARY 15, 2016
Made with:
HTML, CSS

49) 3D perspective card XY

3D perspective card XY
Demo Image: 3D perspective card XY

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

Tutorial/codes – Demo

Author:
Carlos Sánchez Riballo
Created:
OCTOBER 16, 2015
Made with:
HTML, CSS and JavaScript

50) News Cards – CSS only

News Cards - CSS only
Demo Image: News Cards – CSS only

Pure CSS news cards with revealing content on hover.

Tutorial/codes – Demo

Author:
Aleksandar Čugurović
Created:
AUGUST 14, 2016
Made with:
HTML, CSS

51) Product Card with slider animation

Product Card with slider animation
Demo Image: Product Card with slider animation

Product card with nice sliding effects

Tutorial/codes – Demo

Author:
Virgil Pana
Created:
MARCH 08, 2015
Made with:
HTML, CSS and JavaScript

52) Delivery Card Animation

Delivery Card Animation
Demo Image: Delivery Card Animation

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.

Tutorial/codes – Demo

Author:
Nikolay Talanov
Created:
AUGUST 22, 2015
Made with:
HTML, CSS and JavaScript

53) Clash of Clans Cards

Clash of Clans Cards
Demo Image: Clash of Clans Cards

Cards with slide effects.

Tutorial/codes – Demo

Author:
Andre Madarang
Created:
MAY 19, 2016
Made with:
HTML, CSS and JavaScript

54) The Image with a and .date that all:hovers

The Image with a  and .date that all:hovers
Demo Image: The Image with a and .date that all:hovers

Card with image hover effect

Tutorial/codes – Demo

Author:
Joshua Ward
Created:
JANUARY 17, 2019
Made with:
HTML, CSS

55) Hearthstone Style Card Hover

Hearthstone Style Card Hover
Demo Image: Hearthstone Style Card Hover

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

Tutorial/codes – Demo

Author:
Jack Rugile
Created:
SEPTEMBER 21, 2017
Made with:
HTML, CSS

56) Parallax Depth Cards

Parallax Depth Cards
Demo Image: Parallax Depth Cards

Parallaxed backgrounds and layers in cards.

Tutorial/codes – Demo

Author:
Andy Merskin
Created:
NOVEMBER 21, 2016
Made with:
HTML, CSS and JavaScript

57) Article News Card

Article News Card
Demo Image: Article News Card

Article News Card

Tutorial/codes – Demo

Author:
Andy Tran
Created:
MAY 08, 2015
Made with:
HTML, CSS and JavaScript

58) Expanding Card Grid With Flexbox

Expanding Card Grid With Flexbox
Demo Image: Expanding Card Grid With Flexbox

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

Tutorial/codes – Demo

Author:
Naila Ahmad
Created:
DECEMBER 24, 2015
Made with:
HTML, CSS and JavaScript

59) Mobile Cards Design

Mobile Cards Design
Demo Image: Mobile Cards Design

Mobile expanding cards with sports info.

Tutorial/codes – Demo

Author:
Ettrics
Created:
MAY 08, 2015
Made with:
HTML, CSS and JavaScript

60) CSS Blog Cards

CSS Blog Cards
Demo Image: CSS Blog Cards

A very minimal responsive blog card design.

Tutorial/codes – Demo

Author:
Chyno Deluxe
Created:
AUGUST 24, 2015
Made with:
HTML, CSS

61) Comment Card Animation

Comment Card Animation
Demo Image: Comment Card Animation

Flip through a stack of comment cards

Tutorial/codes – Demo

Author:
Shaw
Created:
MAY 13, 2016
Made with:
HTML, CSS and JavaScript

62) Simple Flexbox Cards

Simple Flexbox Cards
Demo Image: Simple Flexbox Cards

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

Tutorial/codes – Demo

Author:
Lindsey
Created:
AUGUST 27, 2015
Made with:
HTML, CSS

63) Isometric Card Grid

Isometric Card Grid
Demo Image: Isometric Card Grid

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.

[ads1]

Tutorial/codes – Demo

Author:
Jon Kantner
Created:
JANUARY 27, 2018
Made with:
HTML, CSS and JavaScript

64) Material Design Cards

Material Design Cards
Demo Image: Material Design Cards

Material design cards test and study.

Tutorial/codes – Demo

Author:
Mattia Astorino
Created:
JANUARY 25, 2015
Made with:
HTML, CSS and JavaScript

65) Swipeable Cards nightly

Swipeable Cards nightly
Demo Image: Swipeable Cards nightly

A card stack UI with swipeable cards.

Tutorial/codes – Demo

Author:
Ionic
Created:
JANUARY 27, 2014
Made with:
HTML, CSS and JavaScript

66) Material Design – Responsive card

Material Design - Responsive card
Demo Image: Material Design – Responsive card

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

Tutorial/codes – Demo

Author:
David Foliti
Created:
JULY 27, 2015
Made with:
HTML, CSS and JavaScript

67) News card with fade in icon on hover

News card with fade in icon on hover
Demo Image: News card with fade in icon on hover

News card with fade in icon on hove

Tutorial/codes – Demo

Author:
LittleSnippets.net
Created:
JULY 16, 2016
Made with:
HTML, CSS and JavaScript

68) Animated color cards

Animated color cards
Demo Image: Animated color cards

Fun card animation with vanilla js

Tutorial/codes – Demo

Author:
Alex Zaworski
Created:
JANUARY 15, 2019
Made with:
HTML, CSS and JavaScript

69) Sliding Notifications card

Sliding Notifications card
Demo Image: Sliding Notifications card

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

Tutorial/codes – Demo

Author:
Sabine Robart
Created:
JANUARY 12, 2019
Made with:
HTML, CSS and JavaScript

70) Cards with vertical carrousel concept

Cards with Vertical carrousel concept
Demo Image: Cards with Vertical carrousel concept

Cards with Vertical carrousel concept

Tutorial/codes – Demo

Author:
Recreatorus
Created:
NOVEMBER 17, 201
Made with:
HTML, CSS and JavaScript

71) Player/User Cards with more info on hover

Player/User Cards
Demo Image: Player/User Cards

Mouse over the card for more info

Tutorial/codes – Demo

Author:
Alvaro Montoro
Created:
JANUARY 11, 2019
Made with:
HTML, CSS

72) Parallax on card

Parallax on card
Demo Image: Parallax on card

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

Tutorial/codes – Demo

Author:
Maikel
Created:
JANUARY 11, 2019
Made with:
HTML, CSS and JavaScript

73) Profile card design with sequenced animation

Profile card design with sequenced animation
Demo Image: Profile card design with sequenced animation

Profile card, Profile design, sequenced animation

Tutorial/codes – Demo

Author:
Sabine Robart
Created:
JANUARY 11, 2019
Made with:
HTML, CSS and JavaScript

74) Makeup Palettes with flip effects

CSS Grid: Makeup Palettes with flip effects
Demo Image: CSS Grid: Makeup Palettes with flip effects

Using grid inside flex, instead of the other way around

Tutorial/codes – Demo

Author:
Olivia
Created:
DECEMBER 23, 2018
Made with:
HTML, CSS

75) CSS Grid: Recipe Layout

CSS Grid: Recipe Layout
Demo Image: CSS Grid: Recipe Layout

Grid Recipe Layout developed using only CSS

Tutorial/codes – Demo

Author:
Olivia
Created:
JANUARY 09, 2019
Made with:
HTML, CSS

76) Pure CSS clickable flip cards

Pure CSS clickable flip cards
Demo Image: Pure CSS clickable flip cards

Pure CSS clickable flip cards using only css

Tutorial/codes – Demo

Author:
Kacper Parzęcki
Created:
SEPTEMBER 25, 2018
Made with:
HTML, CSS

77) CSS Flip Card (content with JS)

CSS Flip Card (content with JS)
Demo Image: CSS Flip Card (content with JS)

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

Tutorial/codes – Demo

Author:
Diego Bruno Rodrigues
Created:
OCTOBER 26, 2016
Made with:
HTML, CSS and JavaScript

78) Card Flip Jquery

Card Flip Jquery
Demo Image: Card Flip Jquery

Flip Cards using Jquery

Tutorial/codes – Demo

Author:
bycreator
Created:
FEBRUARY 16, 2015
Made with:
HTML, CSS and JavaScript

79) CSS Business Card

CSS Business Card
Demo Image: CSS Business Card

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

Tutorial/codes – Demo

Author:
Keith Pickering
Created:
FEBRUARY 01, 2015
Made with:
HTML, CSS and JavaScript

80) Simple flip card CSS

Simple flip card CSS
Demo Image: Simple flip card CSS

Simple profile flip card using CSS

Tutorial/codes – Demo

Author:
Thomas Podgrodzki
Created:
OCTOBER 12, 2015
Made with:
HTML, CSS

81) Bootstrap 4 – Flip cards

Bootstrap 4 - Flip cards
Demo Image: Bootstrap 4 – Flip cards

Flip cards using Bootstrap 4

Tutorial/codes – Demo

Author:
Chrisbo246
Created:
FEBRUARY 09, 2017
Made with:
HTML, CSS and JavaScript

82) Card Flipping AngularJS

Flipping Card (AngularJS)
Demo Image: Flipping Card (AngularJS)

Card Flipping AngularJS

Tutorial/codes – Demo

Author:
Zachary Beyer
Created:
JULY 30, 2015
Made with:
HTML, CSS and JavaScript

83) React – Flip Cards Design

React - Flip Cards Design
Demo Image: React – Flip Cards Design

React – Flip Cards Design for actors

Tutorial/codes – Demo

Author:
Adam
Created:
MAY 11, 2018
Made with:
HTML, CSS and JavaScript

84) 3D Flipping Cards

3D Flipping Cards
Demo Image: 3D Flipping Cards

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!

Tutorial/codes – Demo

Author:
Rita Bradley
Created:
MAY 04, 2017
Made with:
HTML, CSS

85) Player Flip Cards

Player Flip Cards
Demo Image: Player Flip Cards

A simple css only flip cards.

Tutorial/codes – Demo

Author:
Nick Nikolov
Created:
MARCH 06, 2015
Made with:
HTML, CSS and JavaScript

86) Google Now Inspired Flip Cards

Google Now Inspired Flip Cards
Demo Image: Google Now Inspired Flip Cards

Google Now style info cards with CSS card flip animation.

Tutorial/codes – Demo

Author:
Ettrics
Created:
MARCH 17, 2015
Made with:
HTML, CSS and JavaScript

87) Social Flip Cards

Social Flip Cards
Demo Image: Social Flip Cards

Messing around with 3d transforms and delayed transitions.

Tutorial/codes – Demo

Author:
Charlotte Dann
Created:
AUGUST 05, 2012
Made with:
HTML, CSS

88) Style Flip-card Menu

Style Flip-card Menu
Demo Image: Style Flip-card Menu

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

Tutorial/codes – Demo

Author:
Aaron Snowberger
Created:
SEPTEMBER 18, 2015
Made with:
HTML, CSS

89) Realistic 3D Image Flip Box, Flip Card, 3d Image hover

Realistic 3D Image Flip Box, Flip Card, 3d Image hover
Demo Image: Realistic 3D Image Flip Box, Flip Card, 3d Image hover

Realistic 3D Image Flip Box Flip Card Kallyas

Tutorial/codes – Demo

Author:
Nicola Mihaita
Created:
OCTOBER 26, 2016
Made with:
HTML, CSS and JavaScript

90) Half flip cards 3d

Half flip cards 3d
Demo Image: Half flip cards 3d

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

Tutorial/codes – Demo

Author:
David Foliti
Created:
SEPTEMBER 27, 2016
Made with:
HTML, CSS and JavaScript

91) React – Flip Cards

React - Flip Cards
Demo Image: React – Flip Cards

Responsive Flip Card display

Tutorial/codes – Demo

Author:
Thomas Herman
Created:
SEPTEMBER 27, 2016
Made with:
HTML, CSS and JavaScript

92) Bulma + Vuejs Flip Card

Bulma + Vuejs Flip Card
Demo Image: Bulma + Vuejs Flip Card

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

Tutorial/codes – Demo

Author:
Dzulfikar Adi Putra
Created:
OCTOBER 18, 2016
Made with:
HTML, CSS and JavaScript

93) Flipping card UI

Flipping card UI
Demo Image: Flipping card UI

Flipping card UI

Tutorial/codes – Demo

Author:
mario s maselli
Created:
JULY 03, 2015
Made with:
HTML, CSS and JavaScript

94) React Flipping Card with Tutorial

React Flipping Card with Tutorial
Demo Image: React Flipping Card with Tutorial

Learn How to Create Quick and Simple React Flipping Card tutorial

Tutorial/codes – Demo

Author:
Alex Devero
Created:
JANUARY 09, 2017
Made with:
HTML, CSS and JavaScript

95) Cross-Browser Flip Card

Cross-Browser Flip Card
Demo Image: 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 JavaScript

96) Pure CSS Flip Card

Pure CSS Flip Card
Demo Image: Pure CSS Flip Card

Pure CSS Flip Card

Tutorial/codes – Demo

Author:
Aron
Created:
MARCH 12, 2018
Made with:
HTML, CSS

97) 3D Profile Flip Card

3D Profile Flip Card
Demo Image: 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 options, Y, X and Diagonal

Tutorial/codes – Demo

Author:
Nick Hempsey
Created:
NOVEMBER 02, 2012
Made with:
HTML, CSS and JavaScript

98) 3D Flip Card Effect

3D Flip Card Effect
Demo Image: 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

99) Multi Flip Cards

Multi Flip Cards
Demo Image: 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 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

Tutorial/codes – Demo

Author:
Andy McFee
Created:
DECEMBER 11, 2012
Made with:
HTML, CSS
Tags: cardcardsCSScss cardscss3flipHandpicked
Previous Post

72 Best CSS Toggle Switches

Next Post

14 CSS Divider Collections

Related Posts

Pill Styled Radio ButtonsPill Styled Radio Buttons
Essentials

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept
Essentials

T-shirt cannon playful animated button concept

October 13, 2020
chat bubble smoothly morphs into a "close" X
Essentials

Chat bubble smoothly morphs into a “close” X

October 13, 2020
Clipped Overlapping Grid Items
Essentials

Clipped Overlapping Grid Items

September 30, 2020
Exciting Multi-line Highlights
Essentials

Exciting Multi-line Highlights

September 21, 2020
Stacked rainbow cards
Essentials

Stacked Rainbow Cards

July 9, 2020
Next Post
14 CSS Divider Collections 2

14 CSS Divider Collections

Leave Comment

Popular Posts

41 Multi step HTML forms

92 CSS Text styling and Effects

99 Hand-picked CSS Card Collections

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

38 CSS Calendars

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (129) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) Toggle Switches (13) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2021 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist