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.
Explores the effective use of shadows in UI design, and learn how to utilize various shadow techniques to enhance depth, hierarchy, and visual appeal.
涵盖的内容
1个作业7个插件
显示有关单元内容的信息
1个作业•总计30分钟
CSS Shadows Assignment•30分钟
7个插件•总计28分钟
Welcome to interactive lessons!•1分钟
Shadows 101•2分钟
Drop Shadow Playground Setup•5分钟
Challenge 1: Hard & Soft Drop Shadows•7分钟
Challenge 2: Using Shadows to Define Containers•5分钟
Challenge 3: Colored Shadows•5分钟
Quick Tip: Multi-Layered Shadows•3分钟
Gradients
第 2 单元•小时 后完成
单元详情
Delve into the creative application of gradients in UI design. Leverage the power of color transitions to add depth, visual interest, and enhance the overall aesthetic of user interfaces.
涵盖的内容
1个作业6个插件
显示有关单元内容的信息
1个作业•总计30分钟
CSS Gradients Quiz•30分钟
6个插件•总计30分钟
Introduction•1分钟
Challenge 1: Basic Gradient•7分钟
Challenge 2: Button Gradient•7分钟
Challenge 3 Setup HTML & CSS•7分钟
Challenge 3: Card Gradients•4分钟
Challenge 4: Card Gradients (Light Variation)•4分钟
UI Animation
第 3 单元•小时 后完成
单元详情
Bring user interfaces to life with engaging and seamless animations that enhance usability, delight users, and elevate the user experience.
Scrimba is an interactive code-learning platform with over a million users from all over the world. They feature highly interactive and engaging courses about programming and web development.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.