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

Get Inspired with 30+ CSS Motion Path Examples
Byfrontend October 18, 2023October 18, 2023

Here is a list of 30+ CSS motion path examples that demonstrate how to use the CSS motion-path property to animate an element along a custom path: See the Pen Stay cool w/ responsive motion-path 😎 by Jhey (@jh3y) on CodePen. Title:- Stay cool w/ responsive motion-path ??Author:- JheyMade with:- CSS HTML JS See the…

Read More Get Inspired with 30+ CSS Motion Path Examples
CSS

30+ Free HTML CSS Music Players Fee Code (Updated)
Byfrontend October 18, 2023February 25, 2024

the power of open-source! Explore free HTML & CSS music players, offering flexibility and customization options, perfect for learning and adapting to your web design needs. 1. Audio Player HTML5 by Rofida Abd Elrahman See the Pen Audio Player HTML5 byRoro-decode(@Roro-decode) on CodePen. Author: Rofida Abd Elrahman Links: Source Code / DemoMade with: HTML CSS…

Read More 30+ Free HTML CSS Music Players Fee Code (Updated)
CSS

30+ Stunning CSS Tabs Examples (Code Included)
Byfrontend January 5, 2021December 30, 2024

30+ creative CSS tabs designs. Discover unique styles, animation effects, and code snippets to inspire your next website project. 1. Pure CSS HTML Tabs by Wallace Erick See the Pen Pure CSS HTML Tabs bywallaceerick(@wallaceerick) on CodePen. Author: Wallace Erick Links: Source Code / DemoMade with: HTML CSS 2. Material Design CSS Only Tabs by…

Read More 30+ Stunning CSS Tabs Examples (Code Included)
CSS

20+ Examples Of Great Tab Bar Menu Animations (For Your Inspiration)
Byfrontend October 18, 2023October 18, 2023

See the Pen mobile navigation concept by Tobias Glaus (@tobiasglaus) on CodePen. Title:- mobile navigation conceptAuthor:- Tobias GlausMade With:- HTML CSS JAVASCRIPT See the Pen Fancy tab bar active animation by Aaron Iker (@aaroniker) on CodePen. Title:- Fancy tab bar active animationAuthor:- Aaron IkerMade With:- HTML CSS JAVASCRIPT See the Pen Tab bar active animation…

Read More 20+ Examples Of Great Tab Bar Menu Animations (For Your Inspiration)
CSS

10+ Responsive CSS Testimonial Designs with CSS & HTML (Free Code)
Byfrontend February 25, 2024December 30, 2024

Take your testimonials to the next level! Find 10+ inspiring responsive CSS Testimonial Example, free code examples, and design strategies to attract and convert visitors. 1. #1390 – Testimonial Card by LittleSnippets.net See the Pen #1390 – Testimonial Card bylittlesnippets(@littlesnippets) on CodePen. Author: LittleSnippets.net Links: Source Code / DemoMade with: HTML CSS 2. Testimonials Grid…

Read More 10+ Responsive CSS Testimonial Designs with CSS & HTML (Free Code)
CSS

Learn CSS Animation with 100+ CodePen Examples
Bygscode September 13, 2023October 20, 2023

Want to take your CSS skills to the next level? Browse through 100+ awesome animation examples from CodePen creators and learn how to add engaging motion to your web projects. See the Pen 2020 SVG Animation by keyframers (@keyframers) on CodePen. Title:- 2020 SVG Animation Author:-@keyframers Made with:-HTML / CSS (SCSS) See the Pen Animated…

Read More Learn CSS Animation with 100+ CodePen Examples