CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- InfoCard CSS Only V1
Author:-Emil Alicic
Made with:-HTML CSS JS

Title:- CSS Grid: Card Variations
Author:-Olivia Ng
Made with:-HTML CSS JS

Title:- Hover Expand Icon Into a Button
Author:-wojtek
Made with:-HTML CSS JS

Title:- Data Card. Hover Transitions
Author:-Andy Fought
Made with:-HTML CSS JS

Title:- McDonalds Card – TailwindCSS
Author:-Aashir Aamir Khan
Made with:-HTML CSS JS

Title:- Pokemon Card Holo Effect
Author:- Simon Goellner
Made with:-HTML CSS JS

Title:- Article Card
Author:-Josh Werner
Made with:-HTML CSS JS

Title:- Cards Hover Effect
Author:-Sebi
Made with:-HTML CSS JS

Title:- Info Cards Concept
Author:-Yancy Min
Made with:-HTML CSS JS

Title:- Flipping Cards
Author:-Shahid Shaikh
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

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

100+ Creative And Cool CSS Text Effects To Make Your Website Inspiring
Byfrontend October 18, 2023October 22, 2023

In this article, we will show you how to create an awesome text effect using CSS. We will also discuss how you can achieve the same effect in your web design. 1. CSS Perspective Text Hover by James Bosworth See the Pen CSS Perspective Text Hover bybosworthco(@bosworthco) on CodePen. Author: James Bosworth Links: Source Code…

Read More 100+ Creative And Cool CSS Text Effects To Make Your Website Inspiring
CSS

Free & Easy: 60+ CSS Accordion Demos You Can Use Today
Byfrontend February 23, 2024February 23, 2024

60+ amazing CSS accordion designs, complete with downloadable code snippets. Get ideas for your next project and impress your users. 1. Swanky Little Accordian List by Jamie Coulter See the Pen Swanky Little Accordian List byjcoulterdesign(@jcoulterdesign) on CodePen. Author: Jamie Coulter Links: Source Code / DemoMade with: HTML CSS 2. Building A Beautiful Accordion Using…

Read More Free & Easy: 60+ CSS Accordion Demos You Can Use Today
CSS

20+ Amazing CSS Picture Frames You Could Use Right Now
Byfrontend October 18, 2023October 18, 2023

This is a cool example of how CSS picture frames can be used in your design. The code is easy to understand and follow, so you can learn from it. I might change the colors but that’s it. See the Pen css frames by Kkin (@wwyfmrqj-the-looper) on CodePen. Title:- css framesAuthor:- KkinMade with CSS HTML…

Read More 20+ Amazing CSS Picture Frames You Could Use Right Now
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

100+ CSS Navigation Bar Example with HTML Code With CSS
Byfrontend October 18, 2023February 14, 2024

Looking for inspiration for your next CSS navigation bar design? Check out these 100+ amazing CSS Navigation Bar Example, all of which are free and open source. From simple and elegant to complex and interactive, there’s a CSS navigation bar design for everyone on this list. RELATED ARTICLES 1. Navbar UI Interaction by Muhammed Erdem…

Read More 100+ CSS Navigation Bar Example with HTML Code With CSS