CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Tariff Cards
Author:-Andreas Storm
Made with:-HTML CSS JS

Title:- Keyboard Accessible Animated Card
Author:-Cristian Diaz
Made with:-HTML CSS JS

Title:- Info Cards
Author:- Nathan Taylor
Made with:-HTML CSS JS

Title:- Price Cards Animation
Author:-Ana Tudor
Made with:-HTML CSS JS

Title:- CSS Clip-path Card Hover Effects
Author:-Ahmad Emran
Made with:-HTML CSS JS

Title:- CSS-Tricks Card Carousel
Author:-William Goldsworthy
Made with:-HTML CSS JS

Title:- Day and Night: CSS Transitions and Animations Explained
Author:-Stéphanie Walter
Made with:-HTML CSS JS

Title:- Business Card Style Landing Page
Author:-Lucas “Zei” G.
Made with:-HTML CSS JS

Title:- F1 Player Hexagon Card Responsive
Author:-Shireen Taj
Made with:-HTML CSS JS

Title:- Profile Card Hover Effect
Author:-P
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

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

80+ CSS Arrow Designs for Developers to Use in 2024
Byfrontend August 16, 2021February 4, 2024

creative and beautiful CSS arrow designs for your next web project? Check out this list of 80+ awesome CSS arrow designs, perfect for developers of all skill levels. See the Pen Pure CSS Arrows by saeedalipoor (@saeedalipoor) on CodePen. Title:- Pure CSS Arrows Author:-Saeed Alipoor Made with:-HTML CSS See the Pen Single SASS @mixin for…

Read More 80+ CSS Arrow Designs for Developers to Use in 2024
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
CSS

35+ Responsive CSS Flowcharts Example
Byfrontend March 3, 2024March 3, 2024

Explore a collection of 25+ eye-catching Responsive CSS flowcharts with free code and live demos. Easily visualize processes and enhance your website’s user experience with these customizable flowcharts. 1. CSS Grid Responsive Flowchart by Chris Droom See the Pen CSS Grid Responsive Flowchart bydroom(@droom) on CodePen. Author: Chris Droom Links: Source Code / DemoMade with:…

Read More 35+ Responsive CSS Flowcharts Example
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

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