CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Material Design Card Animation
Author:-Trevor L.J.M. McIntire
Made with:-HTML CSS JS

Title:- Tailwind CSS Blog Card Block – 10th
Author:-Componentity
Made with:-HTML CSS JS

Title:- Stacked Rainbow Cards
Author:-Sarah Fossheim
Made with:-HTML CSS JS

Title:- HTML / CSS (SCSS)
Author:-Håvard Brynjulfsen
Made with:-HTML CSS JS

Title:- Holiday Feature Folding Cards
Author:-Madalena
Made with:-HTML CSS JS

Title:- CSS Introduction Into Animating Transition – Cards Perspective
Author:-dyarfi
Made with:-HTML CSS JS

Title:- Material Design – Card Effect
Author:-Hugo Giraudel
Made with:-HTML CSS JS

Title:- Hover Effect
Author:-Johana Morales
Made with:-HTML CSS JS

Title:- Hovers and Focus Using the has() Relational Pseudo-Class
Author:-utilitybend
Made with:-HTML CSS JS

Title:- Social Card + 3D Hover Effect
Author:-Bobby Korec
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

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

50+ Best CSS Timeline Examples (Creation, Design & Inspiration)
Byfrontend October 18, 2023October 18, 2023

This is a collection of 50+ CSS Timeline Examples that are suitable for your web projects In this article, you’ll find 50+ best CSS Timeline Examples. See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen. Title:- CSS TimelineAuthor:- Nils WittlerMade With:- HTML CSS See the Pen CSS Timeline by Darcy Voutt (@darcyvoutt) on…

Read More 50+ Best CSS Timeline Examples (Creation, Design & Inspiration)
CSS | Tailwind Cards

10+ Tailwind Cards
Byfrontend October 18, 2023October 18, 2023

See the Pen Tailwind – Cards by Andi Grether (@handplant) on CodePen. Title :- Tailwind – CardsAuthor:- Andi GretherMade With :- HTML CSS JS See the Pen Calcite Tailwind Cards by Erich Rainville (@TheBlueDog) on CodePen. Title :- Calcite Tailwind CardsAuthor:- Erich RainvilleMade With :- HTML CSS JS See the Pen Tailwind – Cards by…

Read More 10+ Tailwind Cards
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
CSS

Explore 50+ Interactive CSS Carousel CodePen Demos
Byfrontend March 5, 2024December 30, 2024

Build beautiful and responsive carousels for free! Explore 50+ ready-to-use CSS carousel templates and customize them to match your brand and project requirements. 1. Expand Image by Kristen See the Pen Expand Image bykristen17(@kristen17) on CodePen. Author: Kristen Links: Source Code / DemoMade with: HTML CSS 2. CSS Carousel by Will See the Pen CSS…

Read More Explore 50+ Interactive CSS Carousel CodePen Demos
CSS

45+ CSS Input Text Example
Byfrontend April 28, 2024April 28, 2024

Discover 45+ creative CSS examples to style your input fields and make your forms pop. 1. Fancy Text Inputs by Alex Bergin See the Pen Fancy Text Inputs byabergin(@abergin) on CodePen. Author: Alex Bergin Links: Source Code / DemoMade with: HTML CSS 2. Google Material Design Input Boxes by Chris on Code See the Pen…

Read More 45+ CSS Input Text Example