CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Profile Card
Author:-znapci
Made with:-HTML CSS JS

Title:- CSS Glassmorphism Card Hover Effects
Author:-Luisoms
Made with:-HTML CSS JS

Title:- Polaroid Memories – CSS Only
Author:-Nico
Made with:-HTML CSS JS

Title:- Swipeable Cards nightly
Author:- Ionic
Made with:-HTML CSS JS

Title:- CSS-Only Gooey Content Toggle
Author:-@keyframers
Made with:-HTML CSS JS

Title:- Business Card
Author:-Rick
Made with:-HTML CSS JS

Title:- Isometric Card Grid
Author:- Jon Kantner
Made with:-HTML CSS JS

Title:- 3D Fold out reveal
Author:- Andrew Canham
Made with:-HTML CSS JS

Title:- Blog Card Grid
Author:-Hannah
Made with:-HTML CSS JS

Title:- Flipping Card Effect
Author:-Kniw Studio
Made with:-HTML CSS JS

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

CSS

10+ Mind-Blowing Ken Burns Effects in CSS & JS (CodePen)
Byfrontend May 16, 2021January 30, 2024

Level up your web design check out the best collection of 10+ Ken Burns effects from CodePen! No Javascript required – explore pure CSS solutions for developers who value code. Find inspiration for beautiful animations, unique slideshows, and hidden gems that’ll add a touch of magic to your web projects. 1. Ken Burns effect CSS…

Read More 10+ Mind-Blowing Ken Burns Effects in CSS & JS (CodePen)
CSS

CSS Text Animations with 90+ Example
Byfrontend August 4, 2024August 4, 2024

Discover over 90+ CSS text animations that will inspire and elevate your web development projects. Perfect for developers of all levels. 1. Liquid Drop Using Gooey Effect by Tushar Choudhari See the Pen Liquid Drop Using Gooey Effect bytush23ar(@tush23ar) on CodePen. Author: Tushar Choudhari Links: Source Code / DemoMade with: HTML CSS 2. Text Split…

Read More CSS Text Animations with 90+ Example
CSS

CSS Animated Sliders Examples: 30 Awesome CSS Animated Slider With Sources
Byfrontend October 18, 2023October 18, 2023

CSS Animation Examples CSS can be used for building some pretty amazing things. A good example of this is the CSS animated sliders. CSS animations are a great way to add interactivity and excitement to your website, without having to resort to Flash or other tools. Here are some examples: See the Pen Greensock animated…

Read More CSS Animated Sliders Examples: 30 Awesome CSS Animated Slider With Sources
CSS

50+ CSS Reveal Animations That Are Super-Useful for Your Next Project
Byfrontend October 18, 2023October 18, 2023

50+ Cool CSS Reveal Animations Demos You Can Use A blog around 20 cool CSS animations that can be used on your website. See the Pen Fading text with CSS blend modes by giana (@giana) on CodePen. Title:- Fading text with CSS blend modes Author:-Giana Made with:-HTML CSS See the Pen CSS Reveal Slider by…

Read More 50+ CSS Reveal Animations That Are Super-Useful for Your Next Project
CSS

How to Create a React Calculators (with 15+ Great Examples)
Byfrontend October 18, 2023October 18, 2023

The React calculator is a simple, easy-to-use calculator that supports all of the common mathematical functions. It’s also highly customization and can be used as a component in your React apps. See the Pen React Calculator by Michael Jackson (@mjijackson) on CodePen. Title:- React CalculatorAuthor:- Michael JacksonMade With:- REACT See the Pen React Calculator by…

Read More How to Create a React Calculators (with 15+ Great Examples)
CSS

35+ JavaScript Notification Examples from Popular Developers in CodePen
Byfrontend October 18, 2023January 13, 2024

Learn how to use JavaScript notifications to improve user experience with these 35+ examples from popular developers in CodePen. 1. Pretty Notification Badges for menu by Ying Zhang See the Pen Pretty Notification Badges for menu bydodozhang21(@dodozhang21) on CodePen. Author: Ying Zhang Links: Source Code / DemoMade with: HTML CSS js 2. Radial Nav Menu…

Read More 35+ JavaScript Notification Examples from Popular Developers in CodePen