CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- Expanding card page transition effect
Author:- Rachel Smith
Made with:-HTML CSS JS

Title:- Card Hover Interaction
Author:-Kalyan Lahkar
Made with:-HTML CSS JS

Title:- Aspect Ratio CTA
Author:-Michelle Barker
Made with:-HTML CSS JS

Title:- UI: Gradient Banner Cards
Author:-Eric Mahoney
Made with:-HTML CSS JS

Title:- UI Cards
Author:-Curtis Lee
Made with:-HTML CSS JS

Title:- Cards
Author:-Håvard Brynjulfsen
Made with:-HTML CSS JS

Title:- Hover Cards POC v2
Author:-Jhey
Made with:-HTML CSS JS

Title:- Card with Gradient Border and Background
Author:-Aditya Tiwari
Made with:-HTML CSS JS

Title:- Testimonials Sample 1
Author:-Meghan Marth
Made with:-HTML CSS JS

Title:- Fancy 3D Flip Card
Author:-Travis Williamson
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

Typewriter effect

CSS

30+ CSS Typewriter effect | CSS Typing Animation

Byfrontend August 22, 2020December 30, 2024

Typing Effect Author LeFourbeFromage Made With html css(scss) js(babel) Demo Check out Demo LINKS Download Stripe Typing Animation Author Ben Howdle Made With HTNL CSS JS Demo Check out Demo LINKS Download Typing Text with Javascript Author Max Made With HTML(HAML) CSS(SCSS) JS(COFEESCRIPT) Demo Check out Demo LINKS Download Typing Effect Author Van Huynh Made…

Full-Screen Menu

CSS

25+ Full-Screen Menu Ideas Made Easy with CSS

Byfrontend February 18, 2024February 19, 2024

Simplify your design journey with 20+ easy-to-use, ready-to-apply full-screen menu solutions using CSS. Achieve stunning visuals and impactful navigations. 1. CSS Navigation by Ryan Mulligan See the Pen CSS Navigation byhexagoncircle(@hexagoncircle) on CodePen. Author: Ryan Mulligan Links: Source Code / DemoMade with: HTML CSS js 2. Simple Full Screen Menu by kiran raj r See…

CSS

45 CSS Text Glitch Effects from CodePen: Learn How to Create Your Own Glitch Effects

Byfrontend October 18, 2023October 18, 2023

Want to learn how to create your own CSS text glitch effects? Check out these 45 CSS text glitch effects from CodePen! These effects are easy to follow and can help you learn the basics of CSS animation and clip-path properties. See the Pen Glitch Hover Effect CSS by kkhenriquez (@kkhenriquez) on CodePen. Title:- Glitch…

CSS

Get Inspired: 30 CSS Text Shadow Ideas for Eye-Catching Typography

Byfrontend October 18, 2023October 18, 2023

See the Pen Flickering Neon Sign Effect using CSS Text & Box Shadow by George W. Park (@GeorgePark) on CodePen. Title:- Flickering Neon Sign Effect using CSS Text & Box ShadowAuthor:- George W. ParkMade With:- HTML CSS See the Pen 3D CSS/JS dynamic shadow by Marc López (@Loopez10) on CodePen. Title:- 3D CSS/JS dynamic shadowAuthor:-…

CSS sidebar navigation menu

CSS

50+ Responsive CSS sidebar navigation menu example

Byfrontend February 16, 2024February 16, 2024

Css Cloud Animation CodePen Examples

CSS

CSS Skills: 25 New Css Cloud Animation CodePen Examples to Practice and Learn From

Byfrontend February 2, 2024February 2, 2024

Ready to challenge yourself and expand your CSS expertise? Explore these interactive css cloud animation examples on CodePen and enhance your web development toolkit. 1. Cloudy Animated Background by andreas jv See the Pen Cloudy Animated Background byajv(@ajv) on CodePen. Author: andreas jv Links: Source Code / DemoMade with: HTML CSS 2. Clouds CSS3 Transition…