Contoured Shadows

Now that we've gone over the fundamentals of layout, it's time to look at how to spruce up our interfaces! We'll cover cosmetic properties like shadows and gradients, and learn how to add small but powerful touches that help us create polished next-level user interfaces.

Introduction

CSS Filters

Color Manipulation

Blur Filter

Backdrop Filters

Border Radius

Nested Radiuses

Circular Radius

Shadows

Single-Sided Shadows

Inset Shadows

Exercises

Designing Shadows

Colors

Accessibility

Selection Colors

Accent Colors

Gradients

Linear Gradients

Radial Gradients

Conic Gradients

Easing Gradients

Gradient Dead Zones

Mobile UX Improvements

Pointer Events

Clipping With clip-path

Animations

Rounded Shapes

With Shadows

Optical Alignment

Scrolling

Smooth Scrolling

Scroll Snapping

Scrollbar Colors

Scroll Optimization

Focus Improvements

Focus Visible

Focus Within

Focus Outlines

Floats

In Conclusion

Little Big Details

Additional goodies that don't have a proper home in the curriculum!

Intro to Figma

Intro to React

Bonus Content

Contoured Shadows

Unlock this content