CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- DRY Switch Hover Card
Author:-Jhey
Made with:-HTML CSS JS

Title:- Earth News
Author:-Zoë Bijl
Made with:-HTML CSS JS

Title:- Expanding Card Grid With Flexbox
Author:- Naila Ahmad
Made with:-HTML CSS JS

Title:- Responsive Image Effects with CSS Gradients and Aspect-Ratio
Author:-Smashing Magazine
Made with:-HTML CSS JS

Title:- 3D CSS Card
Author:-Amit Sheen
Made with:-HTML CSS JS

Title:- Blog Cards
Author:- Chyno Deluxe
Made with:-HTML CSS JS

Title:- FE-Mentor NFT Preview Card
Author:-Lorentz
Made with:-HTML CSS JS

Title:- Card Image
Author:-Luan Manara
Made with:-HTML CSS JS

Title:- Camila’s Card
Author:-Camila Waz
Made with:-HTML CSS JS

Title:- Card Hover Effect
Author:-Temani Afif
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

20+ Bootstrap Responsive Cards Codepen Collection
Byfrontend October 18, 2023October 19, 2023

20+ Bootstrap Responsive Cards with preview and example code. The cards are responsive and can be used for many different purposes. See the Pen Bootstrap Card – expandable information by Alexander (@ae-designer) on CodePen. Bootstrap Card – expandable information Author Alexander Made With BOOTSTRAP Demo Check Out Demo Links Download See the Pen Animated Bootstrap…

Read More 20+ Bootstrap Responsive Cards Codepen Collection
CSS

100+ CSS Navigation Bar Example with HTML Code With CSS
Byfrontend October 18, 2023February 14, 2024

Looking for inspiration for your next CSS navigation bar design? Check out these 100+ amazing CSS Navigation Bar Example, all of which are free and open source. From simple and elegant to complex and interactive, there’s a CSS navigation bar design for everyone on this list. RELATED ARTICLES 1. Navbar UI Interaction by Muhammed Erdem…

Read More 100+ CSS Navigation Bar Example with HTML Code With CSS
CSS

CSS Skills: 25 New Css Cloud Animation CodePen Examples to Practice and Learn From
Byfrontend February 2, 2024February 2, 2024

Ready to challenge yourself and expand your CSS expertise? Explore these interactive css cloud animation examples on CodePen and enhance your web development toolkit. 1. Cloudy Animated Background by andreas jv See the Pen Cloudy Animated Background byajv(@ajv) on CodePen. Author: andreas jv Links: Source Code / DemoMade with: HTML CSS 2. Clouds CSS3 Transition…

Read More CSS Skills: 25 New Css Cloud Animation CodePen Examples to Practice and Learn From
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+ New CSS Calendar Code Examples
Byfrontend March 23, 2024December 30, 2024

Take your web development skills to the next level by creating interactive and user-friendly CSS calendars. 1. Calendar Days DaysCSS by Ron Pelt See the Pen Calendar Days DaysCSS byPeltos(@Peltos) on CodePen. Author: Ron Pelt Links: Source Code / DemoMade with: HTML CSS 2. Calendar by B8bop See the Pen Calendar byB8bop(@B8bop) on CodePen. Author:…

Read More 50+ New CSS Calendar Code Examples
CSS

25+ Full-Screen Menu Ideas Made Easy with CSS
Byfrontend February 18, 2024February 19, 2024

Simplify your design journey with 20+ easy-to-use, ready-to-apply full-screen menu solutions using CSS. Achieve stunning visuals and impactful navigations. 1. CSS Navigation by Ryan Mulligan See the Pen CSS Navigation byhexagoncircle(@hexagoncircle) on CodePen. Author: Ryan Mulligan Links: Source Code / DemoMade with: HTML CSS js 2. Simple Full Screen Menu by kiran raj r See…

Read More 25+ Full-Screen Menu Ideas Made Easy with CSS