clip-path shapes, masks and clicks
The clipped-away corner is not part of the element any more for clicks: elementFromPoint (what a click there would hit) finds the .row behind it. The layout box is unchanged. circle(40%) keeps its default centre (at 50% 50%), so the computed value leaves it out.
filter applies photo effects such as blur, grayscale and drop shadows to an element, backdrop-filter applies them to what's behind it, mix-blend-mode mixes its colours with the content underneath, and clip-path and mask hide parts of it with a shape or an image.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make every image inside .gallery grey and slightly dark, and show its real colours when hovered, with a 0.3s transition.
Make a .badge cut into a triangle pointing right, using clip-path.
Fade out the right-hand edge of a horizontally scrolling .chips row with a mask, so it hints there is more to scroll.
Explain it without notes
What does filter do, and why does the order of filter functions matter?
When would you use drop-shadow() instead of box-shadow?
How does backdrop-filter differ from filter, and what does it need to be visible?
What is mix-blend-mode, and what problem does isolation: isolate solve?
Compare clip-path and mask-image.
Preview
Console
Nothing logged yet.Expected console output
clip-path: circle(40%)
click at the centre hits: shape circle
click at the corner hits: row
layout width is still 80