CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Fairly Colourful Profile Card
Author:-Takane Ichinose
Made with:-HTML CSS JS

Title:- Geometric Business Card With CSS Grid
Author:-Liz Wendling
Made with:-HTML CSS JS

Title:- Card Animation
Author:-Makaveli
Made with:-HTML CSS JS

Title:- Tile Hover Multi-Button
Author:-Zed Dash
Made with:-HTML CSS JS

Title:- CSS Creative Card Hover Effects
Author:-mrnobody
Made with:-HTML CSS JS

Title:- Movie Card Concept
Author:-Josh
Made with:-HTML CSS JS

Title:- Circle Animated Cards
Author:-konradstepien
Made with:-HTML CSS JS

Title:- Expand/collapse Cards With Figure Cut Text
Author:-Mikael Ainalem
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 | 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

150+ Inspiring Examples of CSS Background Patterns
Byfrontend October 18, 2023January 28, 2024

Level up your web design skills and learn to create stunning CSS background patterns from scratch. Explore 150+ examples, tutorials, and resources to guide your creative journey. RELATED ARTICLES 1. 3D Honeycomb Tessellated Pattern. No Div. Pure CSS by Josetxu See the Pen 3D Honeycomb Tessellated Pattern. No Div. Pure CSS byjosetxu(@josetxu) on CodePen. Author:…

Read More 150+ Inspiring Examples of CSS Background Patterns
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

50+ CSS Chatbot template using HTML & CSS
Byfrontend October 18, 2023July 9, 2024

Craft a user-friendly chatbot experience for your website or app. Download this free HTML & CSS template, customize it to your needs, and leverage CSS for stylish design. No JavaScript required! 1. #codevember 04/2016 – Chat box by André F. Martins See the Pen #codevember 04/2016 – Chat box bymartinsadw(@martinsadw) on CodePen. Author: André F….

Read More 50+ CSS Chatbot template using HTML & CSS
CSS

15+ CSS Triangle Backgrounds from CodePen
Byfrontend October 18, 2023October 20, 2023

Learn how to create your own CSS triangle backgrounds with these easy-to-follow examples. RELATED ARTICLES See the Pen Infinite SVG Triangle Fusion by robdimarzo (@robdimarzo) on CodePen. Title:- Infinite SVG Triangle Fusion Author:-Rob DiMarzo Made with:-HTML CSS JS See the Pen Animated Triangles by flugg (@flugg) on CodePen. Title:- Animated Triangles Author:-Flugg Made with:-HTML CSS…

Read More 15+ CSS Triangle Backgrounds from CodePen
CSS

80+ CSS Arrow Designs for Developers to Use in 2024
Byfrontend August 16, 2021February 4, 2024

creative and beautiful CSS arrow designs for your next web project? Check out this list of 80+ awesome CSS arrow designs, perfect for developers of all skill levels. See the Pen Pure CSS Arrows by saeedalipoor (@saeedalipoor) on CodePen. Title:- Pure CSS Arrows Author:-Saeed Alipoor Made with:-HTML CSS See the Pen Single SASS @mixin for…

Read More 80+ CSS Arrow Designs for Developers to Use in 2024