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

50+ CSS Checkout Forms to Inspire You (2024 Update)
Byfrontend May 5, 2024December 30, 2024

Explore 50+ creative & functional CSS checkout forms to inspire your next design. Get coding now! 1. Checkout CSS Form/Page by Theresa See the Pen Checkout CSS Form/Page bytheresa-e(@theresa-e) on CodePen. Author: Theresa Links: Source Code / DemoMade with: HTML CSS 2. UI Credit Card Checkout by Daniela Andersson Waara See the Pen UI Credit…

Read More 50+ CSS Checkout Forms to Inspire You (2024 Update)
CSS

40+ CSS Triangles
Byfrontend August 4, 2024April 20, 2025

Boost your design skills with over 40 CSS triangles. Learn how to create and use these shapes to enhance your web projects. 1. Landscape in a Triangle by Paulina Hetman See the Pen Landscape in a Triangle bypehaa(@pehaa) on CodePen. Author: Paulina Hetman Links: Source Code / DemoMade with: HTML CSS 2. CSS Triangles by…

Read More 40+ CSS Triangles
CSS

20+ Bootstrap Responsive Cards Codepen Collection
Byfrontend October 18, 2023October 19, 2023

20+ Bootstrap Responsive Cards with preview and example code. The cards are responsive and can be used for many different purposes. See the Pen Bootstrap Card – expandable information by Alexander (@ae-designer) on CodePen. Bootstrap Card – expandable information Author Alexander Made With BOOTSTRAP Demo Check Out Demo Links Download See the Pen Animated Bootstrap…

Read More 20+ Bootstrap Responsive Cards Codepen Collection
CSS

50+ CSS Reveal Animations That Are Super-Useful for Your Next Project
Byfrontend October 18, 2023October 18, 2023

50+ Cool CSS Reveal Animations Demos You Can Use A blog around 20 cool CSS animations that can be used on your website. See the Pen Fading text with CSS blend modes by giana (@giana) on CodePen. Title:- Fading text with CSS blend modes Author:-Giana Made with:-HTML CSS See the Pen CSS Reveal Slider by…

Read More 50+ CSS Reveal Animations That Are Super-Useful for Your Next Project
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

50+ CSS Horizontal Navigation Bar Examples
Byfrontend February 14, 2024February 14, 2024

Get inspired by 50+ Best CSS horizontal navigation bar examples. From sleek minimalism to dynamic animations, find the style that matches your website’s personality. RELATED ARTICLES 1. Animated Underline Hover by Justin See the Pen Animated Underline Hover byjstn(@jstn) on CodePen. Author: Justin Links: Source Code / DemoMade with: HTML CSS js 2. #1217 –…

Read More 50+ CSS Horizontal Navigation Bar Examples