CSS UI Effects: Shadows, Gradients & Animations

External: Coursera Courses ↗ · Coursera

Open Course on External: Coursera

Free to audit · Opens on External: Coursera

CSS UI Effects: Shadows, Gradients & Animations

Coursera · Intermediate ·🌐 Frontend Engineering ·3mo ago
Skills: HTML & CSS90%

Key Takeaways

Creates CSS UI effects with shadows, gradients, and animations

Original Description

Transform your UI designs and web sites by combining shadows, gradients, and animations in this practical course. You’ll learn to create depth with soft and hard shadows, building layered, engaging visuals that enhance your layout. Discover how to apply subtle and dynamic gradients to backgrounds, buttons, and cards, achieving visually appealing effects that guide users’ attention. Finally, you'll bring your designs to life with UI animations, using transitions and hover effects to create a smooth, interactive experience. Each section of this course is hands-on, with challenges that help you apply your skills to real-world components. By the end, you’ll know how to add polish to any interface, creating designs that are functional, interactive, and visually compelling.
Watch on External: Coursera ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related Reads

📰
Say Goodbye To Electron?
Learn about a new approach to building native applications without Electron, using frontend-style development
Medium · Programming
📰
Why Vanilla JS? In the article below, I am sharing my story of building SaaS product in vanilla js and explaining why I decided to go with this approach. https://guseyn.com/html/posts/why-vanilla-js.html
Learn why choosing Vanilla JS can be a great approach for building SaaS products and how it can simplify development
Dev.to · Guseyn Ismayylov
📰
How to Create a Cursor Tail Using HTML, CSS, and JavaScript
Learn to create a colorful cursor tail using HTML, CSS, and JavaScript for a unique user interface effect
Medium · JavaScript
📰
I built a landing page with Three.js, vanilla JS, and zero frameworks — here's what I learned
Learn how to build a landing page with Three.js and vanilla JS without relying on frameworks, and discover the key takeaways from this project
Dev.to · Ayush Shekhar
Up next
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Adrian Twarog
Watch →