Summary - Image effects
Build an image effects gallery with filters and blend modes.
Two tools, one visual language
In this group you met two distinct tools. filter lets you apply visual effects — blur, brightness, grayscale, hue shift, shadow — to a single element.
mix-blend-mode tells an element how to blend with the layer beneath; multiply darkens, screen lightens. Now you will combine these effects into an image gallery.
Exercise A nostalgia filter for the gallery images
Write a filter declaration for the .gallery img selector. It should hold grayscale(0.5) and contrast(1.2) side by side, separated by a space.
Show example solution
/* gallery image filter */
.gallery img {
filter: grayscale(0.5) contrast(1.2);
}Exercise Lighten the badge with screen
Write a mix-blend-mode: screen declaration for the .badge selector. The badge should blend by lightening with the layer below.
Show example solution
/* badge blend */
.badge {
mix-blend-mode: screen;
}Test yourself
-
Match each effect to its job
- blur()
- Softens the edges
- grayscale()
- Desaturates
- drop-shadow()
- Traces the shape with shadow
- multiply
- Blends darker
- screen
- Blends brighter
-
Which gives a shape-following shadow to a transparent icon?
.icon { /* which? */ }- filter: blur(2px)
- filter: brightness(1.5)
- filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4))
- mix-blend-mode: multiply
Show answer
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) — Correct. drop-shadow() skips the transparent areas and traces the real outline of the icon.