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

100+ CSS Toggle Switches (Updated)
Byfrontend February 13, 2021December 30, 2024

From simple on/off toggles to sleek animated designs, discover 100+ CSS toggle switches to elevate your projects. 1. 3D Toggle by Ana Tudor See the Pen 3D Toggle bythebabydino(@thebabydino) on CodePen. Author: Ana Tudor Links: Source Code / DemoMade with: HTML CSS 2. CSS Toggle Switch by Jeroen van der Tuin See the Pen CSS…

Read More 100+ CSS Toggle Switches (Updated)
CSS

Level Up Your Web Designs with 80+ CSS Arrows
Byfrontend October 18, 2023October 18, 2023

Give your web designs a boost of personality and style with these beautiful and free CSS arrows. With over 80 different styles to choose from, you’re sure to find the perfect arrow to match your project’s aesthetic. See the Pen Arrow animation by aaroniker (@aaroniker) on CodePen. Title:- Arrow animation Author:- Aaron Iker Made with:-HTML…

Read More Level Up Your Web Designs with 80+ CSS Arrows
CSS | Javascript

40+ Stunning CSS Hover Effects Example
Byfrontend September 12, 2020October 17, 2023

See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen. Title:- 10 stylish hover effects with lessAuthor:- Renan C. AraujoMade With:- HTML CSS See the Pen 10 stunning hover effects with sass by Renan C. Araujo (@caraujo) on CodePen. Title:- 10 stunning hover effects with sassAuthor:- Renan C. AraujoMade…

Read More 40+ Stunning CSS Hover Effects Example
CSS

15+ Examples of Animating CSS Grid Layout
Byfrontend October 18, 2023October 18, 2023

In this post, we will showcase 15+ examples of how to create animating CSS Grid layouts. Title:- CSS Grid Layout: Animation Author:- Manuel Matuzovic Made with:- HTML CSS JS Title:- CSS Grid Layout with grid-template-columns: repeat(); Author:- Stacy Made with:- HTML CSS JS Title:- Animate CSS Grid Author:- Alex Made with:- HTML CSS JS Title:-…

Read More 15+ Examples of Animating CSS Grid Layout
CSS

35+ New CSS Mobile Navigation Menu Example
Byfrontend February 15, 2024February 15, 2024

your mobile audience with exceptional UX! Explore 40+ inspiring CSS mobile navigation menu designs built with pure CSS, offering smooth interaction, clear hierarchy, and unique styles. 1. Hamburger by Mikael Ainalem See the Pen Hamburger byainalem(@ainalem) on CodePen. Author: Mikael Ainalem Links: Source Code / DemoMade with: HTML CSS js 2. Tilt to Make Room…

Read More 35+ New CSS Mobile Navigation Menu Example
CSS

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

HOVER ME

Read More 10+ jQuery parallax codepen example