50+ Pure HTML and CSS Effects & Cards Designs

Tontuf Co.

 Hello, welcome to this post. In this post, we will show you, collection of 50+ HTML CSS and JS Cards Designs with source code. These all cards are made on Codepen.io.


50+ Pure HTML and CSS Effects & Cards Designs
SS



  • Contact Me Animation

See the Pen Contact Me Animation by Aaron Taylor (@tt0113243) on CodePen.


  • Sliding Cards with Matrix Rain

See the Pen Sliding Cards with Matrix Rain ! by mike (@skazx) on CodePen.


  • Newtons's CSS Cradle

See the Pen Newton's CSS cradle by Amit Sheen (@amit_sheen) on CodePen.


  • Tourist Howering Cards

See the Pen hovering cards by karim jawhar (@kjawhar15) on CodePen.


  • Cards Stack/fan

See the Pen Cards stack/fan in CSS3 with some jQuery by Jermaine (@dviate) on CodePen.


  • 3D CSS Typography 

See the Pen 3D CSS Typography by Noah Blon (@noahblon) on CodePen.


  • Expand/Collaps Cards

See the Pen Expand/collapse cards with figure cut text by Mikael Ainalem (@ainalem) on CodePen.


  • Info CSS Cards Concept

See the Pen Info Cards Concept by Yancy Min (@yancy) on CodePen.


  • Mona Lisa using Pure CSS

See the Pen Mona Lisa with pure CSS by Jay Salvat (@jaysalvat) on CodePen.


  • CSS Tricks Card Carousel

See the Pen CSS-Tricks Card Carousel by William Goldsworthy (@william-goldsworthy) on CodePen.


  • Tariff Cards

See the Pen Tariff Cards by Andreas Storm (@avstorm) on CodePen.


  • Water and Lemon - Pure CSS Still Life 

See the Pen Pure CSS Still Life - Water and Lemons by Ben Evans (@ivorjetski) on CodePen.


  • Hover Card Effect 

See the Pen #hover Card Effect by Manoj Silag (@manojsilag) on CodePen.


  • Pokemon Card Holo Effect 

See the Pen Pokemon Card Holo Effect by Simon Goellner (@simeydotme) on CodePen.


  • 3D Step Counter Card

See the Pen 3D step counter card 🚶 by Steve Gardner (@ste-vg) on CodePen.


  • Profile Card

See the Pen Profile Card by Muhammed Erdem (@JavaScriptJunkie) on CodePen.


  • Player/User Cards

See the Pen Player/User Cards by Alvaro Montoro (@alvaromontoro) on CodePen.



  • Pure CSS Playing Card - King of Hearts

See the Pen Pure CSS Playing Card No.1 - King of Hearts by Ben Evans (@ivorjetski) on CodePen.


  • Cv Card Profile

See the Pen CvCardProfile by remat (@tamer_aka_remat) on CodePen.


  • 3D Product Cards

See the Pen 3D Product Cards by Zac (@zremboldt) on CodePen.


  • Animated Cube Slider

See the Pen Animated cube slider by Alberto Hrtzt (@hrtzt) on CodePen.


  • Clash of Clans CSS Cards

See the Pen Clash of Clans Cards by Andre Madarang (@drehimself) on CodePen.


  • 3D CSS Parallax Design

See the Pen 3D CSS Parallax Depth Effect by Adrian Payne (@dazulu) on CodePen.


  • 3D Effect on Hover 

See the Pen 3D effect on hover - CSS only by Vincent Durand (@onediv) on CodePen.


  • CSS Free Radicals 
 

See the Pen Free Radicals by Noah Blon (@noahblon) on CodePen.


  • Parallax Depth Cards

See the Pen Parallax Depth Cards by Andy Merskin (@andymerskin) on CodePen.


  • Animated Video Grid

See the Pen Animated Video Grid by Dan (@dtab428) on CodePen.


  • React - Flip Profile Cards Designs

See the Pen React - Flip Cards Design by Adam (@AdamTheWizard) on CodePen.


  • Expanding Flex Cards

See the Pen Expanding flex cards by Zed Dash (@z-) on CodePen.


  • CSS-ONLY SLIDE-UP CAPTION HOVER EFFECT

See the Pen CSS-only Slide-up Caption Hover Effect by Mojtaba Seyedi (@seyedi) on CodePen.


  • Card Hover FX

See the Pen Card hover FX by Reiha Hosseini (@mrReiha) on CodePen.


  • CSS Ant Card

See the Pen Card Challenge by Carlita Centeno (@carlita712) on CodePen.

Tags


Our website uses cookies to enhance your experience. Learn More
Accept !