Skip to content

Links to new mask guides #40073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Links to new mask guides #40073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b7b112b
Links to new mask guides
estelle Jun 24, 2025
f698066
Merge branch 'main' into masklinks
estelle Jun 25, 2025
1553bef
Apply suggestions from code review
estelle Jun 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions files/en-us/web/css/basic-shape/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,10 @@ div {

## See also

- Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("offset-path")}}, {{cssxref("shape-outside")}},
- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module
- Properties that use this data type: {{cssxref("clip-path")}}, {{cssxref("offset-path")}}, {{cssxref("shape-outside")}}
- SVG shape elements: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}
- [Overview of CSS shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
- [Edit Shape Paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)
- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
- [Edit shape paths in Firefox developer tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)
2 changes: 2 additions & 0 deletions files/en-us/web/css/css_masking/clipping/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -546,5 +546,7 @@ In addition to applying the same shape for both the `clip-shape` and `shape-outs
- {{cssxref("shape-margin")}}
- [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module
3 changes: 3 additions & 0 deletions files/en-us/web/css/css_masking/masking/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,4 +290,7 @@ If all you need are shapes, clipping may suffice. But if you need fading, variab
## See also

- [Introduction to CSS clipping](/en-US/docs/Web/CSS/CSS_masking/Clipping)
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
6 changes: 5 additions & 1 deletion files/en-us/web/css/mask-border-mode/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,12 @@ This property is not supported by any browser yet.

## See also

- {{cssxref("mask-border")}}
- {{cssxref("mask-mode")}}
- {{cssxref("mask-type")}}
- [Alpha transparency versus luminance](/en-US/docs/Web/CSS/CSS_masking/Masking#alpha_transparency_versus_luminance)
- {{cssxref("mask-border")}} shorthand
- {{cssxref("mask-border-outset")}}
- {{cssxref("mask-border-repeat")}}
- {{cssxref("mask-border-source")}}
- {{cssxref("mask-border-width")}}
- {{cssxref("mask-mode")}}
5 changes: 5 additions & 0 deletions files/en-us/web/css/mask-clip/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,4 +156,9 @@ body {
- {{cssxref("mask-size")}}
- {{cssxref("mask-border")}}
- {{cssxref("clip-path")}}
- {{cssxref("background-clip")}}
- [Introduction to CSS clipping](/en-US/docs/Web/CSS/CSS_masking/Clipping)
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
3 changes: 3 additions & 0 deletions files/en-us/web/css/mask-composite/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,4 +304,7 @@ body > img {
- {{cssxref("mask")}} shorthand
- {{cssxref("mask-type")}}
- {{cssxref("mask-mode")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
3 changes: 3 additions & 0 deletions files/en-us/web/css/mask-image/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,5 +287,8 @@ Toggle the checkbox to toggle the value of the `mask-mode` between `alpha` (chec
- {{cssxref("mask-size")}}
- {{cssxref("mask-border")}}
- {{cssxref("clip-path")}}
- {{cssxref("background-image")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
2 changes: 2 additions & 0 deletions files/en-us/web/css/mask-mode/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,4 +146,6 @@ Because the mask source is an `<image>` and not an SVG `<mask>`, the `match-sour
- {{cssxref("mask-image")}}
- {{cssxref("mask")}} shorthand
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
4 changes: 4 additions & 0 deletions files/en-us/web/css/mask-origin/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,9 +223,13 @@ We have three `mask-image` values, but only two `mask-origin` values. This means

## See also

- {{cssxref("background-origin")}}
- {{cssxref("mask-image")}}
- {{cssxref("mask-position")}}
- {{cssxref("mask-repeat")}}
- {{cssxref("mask-size")}}
- {{cssxref("mask")}} shorthand
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
6 changes: 6 additions & 0 deletions files/en-us/web/css/mask-position/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,11 +173,17 @@ div {

## See also

- {{cssxref("background-position")}}
- {{cssxref("mask-image")}}
- {{cssxref("mask-origin")}}
- {{cssxref("mask-repeat")}}
- {{cssxref("mask-size")}}
- {{cssxref("mask")}} shorthand
- {{cssxref("mask-border")}}
- {{cssxref("mask-border-outset")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
- {{cssxref("background-position")}}
- {{cssxref("&lt;position&gt;")}}
7 changes: 6 additions & 1 deletion files/en-us/web/css/mask-repeat/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,4 +359,9 @@ Each image is matched with a corresponding repeat style. As there are more `mask

## See also

- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)
- {{cssxref("background-repeat")}}
- {{cssxref("mask-border-repeat")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
5 changes: 5 additions & 0 deletions files/en-us/web/css/mask-size/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ The `contain` value contains the mask within the origin box. The `cover` value c

## See also

- {{cssxref("background-size")}}
- {{cssxref("mask")}} shorthand
- {{cssxref("mask-image")}}
- {{cssxref("mask-origin")}}
Expand All @@ -315,4 +316,8 @@ The `contain` value contains the mask within the origin box. The `cover` value c
- {{cssxref("mask-image")}}
- {{cssxref("mask-border")}}
- {{cssxref("background-size")}}
- {{cssxref("mask-border-width")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
3 changes: 3 additions & 0 deletions files/en-us/web/css/mask/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,9 @@ div {

- {{CSSxRef("clip-path")}}
- {{CSSxRef("filter")}}
- [Introduction to CSS masking](/en-US/docs/Web/CSS/CSS_masking/Masking)
- [CSS `mask` properties](/en-US/docs/Web/CSS/CSS_masking/Mask_properties)
- [Declaring multiple masks](/en-US/docs/Web/CSS/CSS_masking/Multiple_masks)
- [CSS masking](/en-US/docs/Web/CSS/CSS_masking) module
- SVG {{SVGAttr("mask")}} attribute
- [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Guides/Applying_SVG_effects_to_HTML_content)