CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Animated Card Flip
Author:- Ana Travas
Made with:-HTML CSS JS

Title:- Cool Card Hover Effect
Author:-Sardorbek Usmonov
Made with:-HTML CSS JS

Title:- CSS Profile Card
Author:-Russ Perry
Made with:-HTML CSS JS

Title:- Steam Inspired Game Card Hover Effect
Author:-Andrew Hawkes
Made with:-HTML CSS JS

Title:- Nuemorphism Card Design
Author:-Savio Martin
Made with:-HTML CSS JS

Title:- Responsive Skewed ECommerce CSS Grid
Author:-Andy Barefoot
Made with:-HTML CSS JS

Title:- Sticky Cards
Author:-Chris Coyier
Made with:-HTML CSS JS

Title:- UI – Flip Card (using :focus-within For A11y)
Author:-Abubaker Saeed
Made with:-HTML CSS JS

Title:- CSS Hover Card 🛒
Author:-Sowmya Seshadri
Made with:-HTML CSS JS

Title:- Card
Author:-HJB
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

30+ CSS Circle menu example (updated)
Byfrontend February 18, 2024February 18, 2024

Boost user engagement and conversion with these 30+ eye-catching CSS circle menus! Find the perfect design, learn the code, and enhance your website’s usability. 1. Radial / Circular Menu Concept by Glenn McComb See the Pen Radial / Circular Menu Concept bylenymo(@lenymo) on CodePen. Author: Glenn McComb Links: Source Code / DemoMade with: HTML CSS…

Read More 30+ CSS Circle menu example (updated)
CSS

30+ Ultimate Collection of CSS Border Styles for Web Designers
Byfrontend October 18, 2023October 18, 2023

Even the most experienced programmers may find debugging CSS to be a difficult task. This article will provide you with time-saving and workflow-enhancing advice on how to debug CSS borders like an expert. Title:- over.cssAuthor:- Ian LunnMade With:- HTML CSS JAVASCRIPT See the Pen CSS Border transitions by Giana (@giana) on CodePen. Title:- CSS Border…

Read More 30+ Ultimate Collection of CSS Border Styles for Web Designers
CSS

New CSS Page Transition Effects: 30+ Cool Ideas and Code Examples
Byfrontend October 18, 2023October 18, 2023

some inspiration for your next CSS page transition? Check out this collection of 30+ cool and creative CSS page transition effects, complete with code examples. See the Pen Responsive Bodymovin Modal / Page Transition by sandstedt (@sandstedt) on CodePen. Title:- Responsive Bodymovin Modal / Page Transition Author:-Jonas Sandstedt Made with:-HTML CSS JS See the Pen…

Read More New CSS Page Transition Effects: 30+ Cool Ideas and Code Examples
CSS

CSS Ripple Effect: 20 Best Practices for Creating Effective and Engaging Buttons
Byfrontend October 18, 2023October 18, 2023

Learn the 20 best practices for creating effective and engaging buttons with the CSS ripple effect. This guide will help you create buttons that are both visually appealing and easy to use. See the Pen Jquery Water Ripple Effect by divinector (@divinector) on CodePen. Title:- Jquery Water Ripple Effect Author:-Divinector Made with:-HTML CSS JS See…

Read More CSS Ripple Effect: 20 Best Practices for Creating Effective and Engaging Buttons
CSS

HOW TO: CSS Blur Background with 40+ Examples
Byfrontend October 18, 2023October 20, 2023

See the Pen CSS blur background by XiChen (@xichen) on CodePen. Title :- CSS blur backgroundAuthor :- XiChenMade with:- CSS HTML See the Pen Newsletter Box Using Only HTML & CSS blur background by DEV Code (@DEVCodes) on CodePen. Title :- Newsletter Box Using Only HTML & CSS blur backgroundAuthor :- DEV CodeMade with:- CSS…

Read More HOW TO: CSS Blur Background with 40+ Examples
CSS

40+ CSS Book Effects to Practice Your CSS3 Skills
Byfrontend October 18, 2023October 20, 2023

If you’re looking for a fun and challenging way to practice your CSS3 skills, these 40+ CSS book effects are perfect for you. With code examples, you’ll be able to create these stunning effects yourself. See the Pen Pure CSS Magazine Style Layout with Transitions by jcoulterdesign (@jcoulterdesign) on CodePen. Title:- Pure CSS Magazine Style…

Read More 40+ CSS Book Effects to Practice Your CSS3 Skills