CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- OL Circle Cards
Author:-Mark Boots
Made with:-HTML CSS JS

Title:- Profile Cards – CSS Grid
Author:-Alina N.
Made with:-HTML CSS JS

Title:- Shiny Debit Card
Author:-Jon Kantner
Made with:-HTML CSS JS

Title:- CSS leaning card effect
Author:- Lynn Fisher
Made with:-HTML CSS JS

Title:- Figure + Figcaption
Author:-Jøshüå Wård
Made with:-HTML CSS JS

Title:- Player/User Cards
Author:-Alvaro Montoro
Made with:-HTML CSS JS

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

Title:- Pure CSS Responsive Animated Info Card
Author:-Chris Smith
Made with:-HTML CSS JS

Title:- Glassmorphism UI Card
Author:-Coding Artist
Made with:-HTML CSS JS

Title:- CSS Card Hover Effects
Author:-Jhonier Riascos Zapata
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 | Javascript

50+ Best 404 Page Templates on CodePen 2024
Byfrontend March 28, 2021February 22, 2024

Are you looking for some creative and unique 404 page templates for your website? If so, you have come to the right place. In this article, we have compiled a list of 50+ best 404 page templates on CodePen that you can use for free or get inspired by. A 404 page is a web…

Read More 50+ Best 404 Page Templates on CodePen 2024
CSS

30+ Best CSS Text Stroke Effects For Your Inspiration
Byfrontend October 18, 2023October 18, 2023

In this article, we will explore 30 of the best CSS text stroke examples to help you figure out what a CSS text stroke might look like for your projects Title:- Striking Splits ?? | Full Screen Menu Animation Tutorial @keyframers 2.16.0 Author:- @keyframers Made with:- HTML CSS JS Title:- Text stroke animation Author:- Cyd…

Read More 30+ Best CSS Text Stroke Effects For Your Inspiration
CSS

10+ jQuery parallax codepen example
Byfrontend October 18, 2023October 18, 2023

HOVER ME

Read More 10+ jQuery parallax codepen 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
CSS

React Calendar Examples: 10+ Fun & Free Code Snippets
Byfrontend October 18, 2023October 18, 2023

React Calendar Examples In this post, we are going to discuss 10 of the most popular examples of React Calendar. These examples will help you understand how to use react-calendar in your own projects. See the Pen react-calendar-timeline demo by Marius Andra (@mariusandra) on CodePen. Title:- react-calendar-timeline demoAuthor:- Marius AndraMade With:- REACT See the Pen…

Read More React Calendar Examples: 10+ Fun & Free Code Snippets