CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Glass Card
Author:-Marcello Lopes
Made with:-HTML CSS JS

Title:- Payment Card Swipage
Author:- Jamie Coulter
Made with:-HTML CSS JS

Title:- La Saveur: French Menu Cards
Author:-Aryan Tayal
Made with:-HTML CSS JS

Title:- Marvel Corner Box Art
Author:-Aryan Tayal
Made with:-HTML CSS JS

Title:- Daily UI #006 User Profile
Author:- Tobias
Made with:-HTML CSS JS

Title:- 3D Perspective Cards with Depth
Author:-Fernando Cohen
Made with:-HTML CSS JS

Title:- Cards – Codepen Assets
Author:-Sowmya Seshadri
Made with:-HTML CSS JS

Title:- 2021 Card
Author:-Pieter Biesemans
Made with:-HTML CSS JS

Title:- Flexy Product Cards
Author:- Jack Thomson
Made with:-HTML CSS JS

Title:- #030 – Profile Card Design
Author:-Florin Pop
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 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
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

CSS Popup/Modal Design: 35+ Examples for Inspiration
Byfrontend October 18, 2023October 18, 2023

Every site developer should have access to CSS Popup/Modal design. You may create amazing and captivating user experiences for your website by using the 35+ examples CSS Popup/Modal provided here, which demonstrate the power of CSS. Title:-Password Modal with Finite State Machine Author:-David Khourshid Made with:- HTML CSS JS Title:-Nifty Modal Window or Slider Effects…

Read More CSS Popup/Modal Design: 35+ Examples for Inspiration
CSS

20+ Examples of How to Create a Stunning 3D Slider Effect
Byfrontend October 18, 2023October 18, 2023

Are you looking for a way to add a 3D slider animation to your website? Well, here is a list of 20+ examples of how to create a stunning 3D slider Effect. Title:- 3D Cube slider. Pure CSS. Author:- Ilya K. Made with:- HTML CSS JS Title:- Simple 3D Slider(jQuery) Author:- GlitchWorker Made with:- HTML…

Read More 20+ Examples of How to Create a Stunning 3D Slider Effect
CSS

50+ HTML & CSS Dropdown Menu Animations for Every Skill Level
Byfrontend October 18, 2023February 19, 2024

From beginner to pro, we’ve got you covered! Explore 50+ HTML & CSS dropdown menu animations for every skill level. Find simple designs 1. Gooey Dropdown Menu by Mark Eriksson See the Pen Gooey Dropdown Menu byMarkshall(@Markshall) on CodePen. Author: Mark Eriksson Links: Source Code / DemoMade with: HTML CSS js 2. Dropdown Menus by…

Read More 50+ HTML & CSS Dropdown Menu Animations for Every Skill Level
CSS

50+ Must-See CSS Charts & Graphs on CodePen
Byfrontend March 8, 2024December 30, 2024

Build interactive CSS charts & graphs from scratch using 50+ CSS code snippets. Gain valuable coding experience and explore various design possibilities. 1. Bar Graph by Champlow See the Pen Bar Graph byChaaampy(@Chaaampy) on CodePen. Author: Champlow Links: Source Code / DemoMade with: HTML CSS 2. This Pen is 19% HTML & 81% CSS by…

Read More 50+ Must-See CSS Charts & Graphs on CodePen