HTML & CSS EnhancementsLesson 32Free preview

Effects & Filters

This lesson is part of Intro to HTML & CSS · All levels

Summary

This topic discusses additional visual effects: filters on the elements, backdrop-filters for opaque glass effects, opacity for transparency, as well as box-shadow for shadows. Interesting as it is, this effect needs to be used properly because it can be rendering power-consuming. Proper effects enhance visual hierarchy without compromising performance.

Key points

The filter changes the appearance of the elements: grayscale, blur, brightness, contrast
Backdrop-filters affect the area behind the elements, e.g. the glass effect
Opacity and box-shadow enrich visual hierarchy at a low cost

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.