Chapter 14: Masks, shapes, and clipping

Introduction

The introduction identifies visual effects the chapter will cover, including hiding parts of elements to make shapes and wrapping text around shaped elements.

• Masks and clip paths: Explain that masks and clip paths can selectively hide portions of an element to create a shape.
  Why it matters: This gives you the basic purpose of masks and clip paths before their techniques are introduced.
• Floats and shaped text: Describe the stated roles of floats and the shape-outside property in wrapping and aligning text.
  Why it matters: This distinguishes shaping text around an element from hiding portions of the element itself.

Key terms: masks, clip paths, floats, shape-outside

14.1 Filters

Introduces CSS filters through blur, showing that a filter affects an entire element and that the blur length controls the strength of the effect.

• Whole Element Filter Effect: Explain what the filter property can affect and why blurring a tile with text is less useful than blurring an image.
  Why it matters: Filtering an element can affect more than the part you intended to change.
• Blur Length and Strength: Describe how the length passed to blur() controls the visual effect, including what zero and larger values do.
  Why it matters: Adjusting the blur length lets you choose between a recognizable image and a vague impression of one.

Key terms: filter property, blur, blur(), length, px

14.1.1 Types of filters

This section describes the available CSS filter functions, how to combine them, and how to use subtle filters to shift attention within an image gallery.

• Filter functions and parameters: Describe the kinds of effects filter functions provide and how their parameters tune those effects.
  Why it matters: It helps you choose and tune a filter for the visual effect you want.
• Combined filter order: Explain how to apply multiple filter functions and in what order their effects occur.
  Why it matters: The order matters when you combine effects in a single filter declaration.
• Subtle gallery focus effects: Explain how the gallery example uses filters to direct attention and why it uses a transition.
  Why it matters: Filters work best here when they support attention rather than becoming a distraction.

Key terms: filter functions, percentage parameters, filter property, filter, grayscale filter, transition, :hover

14.1.2 Backdrop filter

Explains how backdrop-filter affects content behind an element, with a blur example and a Safari compatibility note.

• Backdrop filtering and legibility: Explain how backdrop-filter differs from filter and how a blurred backdrop with a semitransparent background can keep text legible over an image.
  Why it matters: It lets you soften a busy background while keeping foreground text sharp.
• Safari backdrop filter prefix: Explain why the example declares both -webkit-backdrop-filter and backdrop-filter.
  Why it matters: The extra declaration makes the effect work in Safari without relying on a prefix everywhere.

Key terms: backdrop-filter, filter, blur(), semitransparent, -webkit vendor prefix

14.2 Masks

Introduces image masks as a way to change an element’s visible shape and explains the basic properties and loading conditions needed to use one.

• Image mask visibility: Explain how a mask image controls which parts of an element are visible, using the star-shaped example.
  Why it matters: This explains how an image can give a rectangular element a different visible outline.
• Mask image styling properties: Describe the roles of mask-image and mask-size and why the section recommends prefixed fallback declarations.
  Why it matters: These properties let you apply and size a mask while retaining compatibility with browsers that need prefixed declarations.
• Mask image loading restrictions: Explain why a mask image may fail to load from a local file or another domain and how the section suggests previewing it.
  Why it matters: Serving the page correctly prevents a security restriction from being mistaken for a CSS error.

Key terms: masking, mask image, opaque, transparent, mask-image, mask-size, -webkit-mask-image, cover, contain, CORS

14.2.1 Masking with a gradient

Shows how to use a CSS gradient as a mask and how to make an invisible mask easier to debug.

• Gradient mask behavior: Explain how a gradient used as mask-image controls which parts of an element are visible, and why mask-size is unnecessary for this gradient.
  Why it matters: It lets you create fades and other visibility effects without supplying a separate mask image.
• Visual mask debugging: Describe how to temporarily display a difficult-to-diagnose mask gradient so its declarations can be corrected.
  Why it matters: Seeing the gradient helps diagnose a mask that leaves an element entirely visible or entirely hidden.

Key terms: mask-image, gradient, transparent, mask-size, background-image, background-size

14.2.2 Masking using luminance

This section explains how to use an image’s brightness instead of its transparency to control a CSS mask, and cautions about browser support.

• Alpha and luminance masking: Explain how the default alpha mask differs from a luminance mask, and describe how `mask-mode: luminance` treats black, white, and intermediate shades.
  Why it matters: This lets you use a black-and-white image as a mask when a transparent mask image is unavailable.
• Luminance mask browser support: State the browser-support caution given for `mask-mode` and when to check support.
  Why it matters: An essential visual effect should not depend on `mask-mode` without checking whether the required browsers support it.

Key terms: mask-mode, alpha, luminance, -webkit-prefixed

14.2.3 Other mask properties

This section describes the CSS properties that control a mask’s source, placement, extent, interpretation, and combination with other masks.

• Mask sources and sizing: Describe how to choose a mask image, size it, control whether it repeats, and express its size in the mask shorthand.
  Why it matters: These properties let you select a mask and control how its image fills the element.
• Mask position and extent: Distinguish the properties that place a mask, set the origin for that placement, and limit the area the mask affects.
  Why it matters: Positioning a mask and limiting where it applies are separate decisions.
• Mask interpretation and combination: Explain what mask-mode controls and when mask-composite applies to multiple mask images.
  Why it matters: A mask’s source determines how its default mode is interpreted, and multiple masks need a rule for combining.
• Chrome mask support change: State the Chrome support change noted for mask properties.
  Why it matters: Older Chrome behavior can explain why existing mask CSS uses prefixed properties.

Key terms: mask, mask-image, mask-size, mask-repeat, mask-position, mask-origin, mask-clip, content-box, padding-box, border-box

14.3 Clipping paths

This section explains how CSS clipping paths hide parts of an element with geometric shapes while leaving its layout space unchanged.

• Clipping path basics: Explain how a clipping path selectively hides part of an element and how it differs from a mask.
  Why it matters: This distinction helps you choose a geometric clipping shape when you want to hide part of an element.
• Circle size and position: Describe how circle() sets the size and position of a circular clipping path.
  Why it matters: Sizing and moving the circle lets you control which part of an image remains visible.
• Elliptical clipping dimensions: Distinguish an ellipse() clipping path from a circle() clipping path.
  Why it matters: Separate radii let the visible area be oval rather than circular.
• Clipped element layout space: Explain what happens to an element’s layout space when it is clipped and how that affects image preparation.
  Why it matters: A visually smaller clipped image can still leave a large gap in the page layout.

Key terms: clipping path, clip-path, masks, circle(), radius, farthest-side, closest-side, at keyword, border box, ellipse()

14.3.1 Polygon clipping paths

This section explains how polygon() coordinates define a clipping shape and how that shape can frame an image or alter an element’s edges.

• Polygon vertices and coordinates: Explain how polygon() defines a clipping shape from comma-separated x- and y-coordinate pairs, and trace the three points in the section’s triangle example.
  Why it matters: Thinking of each pair as a vertex lets you work out what shape a polygon clip path will produce.
• Polygon clipping uses: Describe the two visual uses given for polygon clipping: shaping visible space around an important part of an image and creating an interesting border near an element’s edges.
  Why it matters: The choice of vertices can serve the image content or create a decorative edge.

Key terms: polygon(), x- and y-coordinate pairs, vertex, visible space, key portion of an image, border

14.3.2 Firefox clip-path tools

This section shows how to use Firefox DevTools to edit clip paths visually instead of repeatedly adjusting CSS values by hand.

• Firefox clip-path editor access: Describe how to open the visual clip-path editor in Firefox DevTools and identify which clip-path functions expose its editing icon.
  Why it matters: The editor makes it easier to build or adjust a clipping path without repeatedly fiddling with values.
• Interactive shape control handles: Explain how dragging the editor’s handles changes a clip path, including the controls described for polygons, circles, and ellipses.
  Why it matters: Knowing what each handle changes lets you reshape the path directly and see the resulting CSS update.

Key terms: Firefox DevTools, Rules pane, clip-path, polygon icon, control handle, vertex, radius

14.3.3 Other clip-path types

This section introduces additional clip-path values for rectangular regions and complex SVG shapes.

• Rectangular clip path options: Distinguish an inset() clip path from the margin-box, border-box, padding-box, and content-box clip paths. Describe how inset() values set the distance from the element’s edges.
  Why it matters: These options let you choose a rectangular clipping boundary without defining a custom shape.
• SVG path clipping tradeoff: Explain what path() clips to and why it offers more shape freedom than polygon(), along with the practical limitation the section identifies.
  Why it matters: path() expands the shapes you can clip to, but its authoring cost affects when it is practical.

Key terms: inset(), margin-box, border-box, padding-box, content-box, path(), SVG path string, polygon(), vector-editing software

14.4 Floats and shapes

Introduces how shape-outside changes the way text wraps around an element and why the element must be floated.

• Visual shape versus text flow: Explain that masks and clip paths change an element’s visible shape without changing its rectangular layout box, while shape-outside changes the contour around which inline content wraps. Describe why matching that contour to a visible shape makes the text flow fit the element’s appearance.
  Why it matters: It helps you distinguish an element’s appearance from the space text flows around.
• Floating requirement for shapes: State that shape-outside requires the element to be floated, and describe the basic effect of a float on nearby inline content.
  Why it matters: The floating requirement explains why shape-outside cannot be applied to just any element and affect nearby text.

Key terms: shape-outside, mask, clip path, inline content, floated, margin box

14.4.1 Floating

Explains how floats make text wrap around an element, how their placement and clearing affect the page, and why text wrapping remains their main use.

• Float behavior and placement: Explain how float: left or float: right moves an element to a container edge so inline content wraps around it, and why its position in the HTML determines which lines wrap.
  Why it matters: Where you put the floated element in the HTML determines where text starts wrapping around it.
• Float height and clearing: Explain why a floated child may extend beyond its parent, and describe how clear can make a following element sit beneath a float or make the parent contain it.
  Why it matters: This explains both why text in a later container can wrap around a float and how to stop it.
• Floats’ intended layout role: Justify using floats primarily for text wrapping rather than complex page layouts now that flexbox and grid are available.
  Why it matters: Choosing floats for wrapping rather than general layout makes their behavior easier to use as intended.

Key terms: float: left, float: right, normal document flow, inline content, clear: both, clear: left, clear: right, ::after pseudo-element, floats, flexbox

14.4.2 Defining a shape

Shows how to make text wrap around a floated image’s visible shape, including clipped circles, rounded borders, and gradient masks.

• Matching clipped and wrapped shapes: Explain how shape-outside controls text wrapping beside a floated image and why the same shape value can be used for both shape-outside and clip-path.
  Why it matters: Matching the visible edge and wrapping edge keeps text aligned with the image.
• Wrapping rounded borders: Describe how a border radius and a box value for shape-outside can produce wrapping around a rounded floated image.
  Why it matters: A rounded image and its text-wrapping boundary need not rely on a clip path.
• Spacing around wrapping shapes: Distinguish the effect of shape-margin from a right margin, including when shape-margin may not give the desired gap.
  Why it matters: The margin-box limit explains why a contour-following gap can look uneven.
• Gradient masks and wrapping edges: Explain how a gradient can define both an image mask and its text-wrapping shape, and how opacity determines the wrapping edge.
  Why it matters: A shared gradient lets a diagonal or fading image edge guide the nearby text.

Key terms: shape-outside, clip-path, custom property, border-radius, margin-box, border-box, padding-box, content-box, shape-margin, margin box

14.5 Summary