Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

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.

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

Flip through a stack of comment cards

A very minimal responsive blog card design.

Mobile expanding cards with sports info.

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

Article News Card

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

Parallaxed backgrounds and layers in cards.

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

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

Pure CSS clickable flip cards using only css

Flipping card UI