From 52a0245c02b85fb0fdd6b2a34995c103817e3a88 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Jul 2024 14:20:06 -0700 Subject: [PATCH 1/9] New page: stop-opacity property --- files/en-us/web/css/stop-opacity/index.md | 162 ++++++++++++++++++++++ 1 file changed, 162 insertions(+) create mode 100644 files/en-us/web/css/stop-opacity/index.md diff --git a/files/en-us/web/css/stop-opacity/index.md b/files/en-us/web/css/stop-opacity/index.md new file mode 100644 index 000000000000000..2edfa5ef6647340 --- /dev/null +++ b/files/en-us/web/css/stop-opacity/index.md @@ -0,0 +1,162 @@ +--- +title: stop-opacity +slug: Web/CSS/stop-opacity +page-type: css-property +browser-compat: css.properties.stop-opacity +--- + +{{CSSRef}} + +The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute. + +The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a ``'s color but can not make the color defined by the `color-stop` property more opaque. + +> [!NOTE] +> The `stop-opacity` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* numeric and percentage values */ +stop-opacity: 0.2; +stop-opacity: 20%; + +/* Global values */ +stop-opacity: inherit; +stop-opacity: initial; +stop-opacity: revert; +stop-opacity: revert-layer; +stop-opacity: unset; +``` + +### Values + +The `` is a {{cssxref("number")}} and {{cssxref("percentage")}} denoting the opacity of the SVG gradient `` element. + +- {{cssxref("number")}} + + - : A numeric value between `0` and `1`, inclusive. + +- {{cssxref("percentage")}} + + - : A percentage value between `0%` and `100%`, inclusive. + +With `0` or `0%`, the stop is fully transparent (that is, invisible). With `1` or `100%`, the element is the full opacity of the `stop-color` value; which may or may not be partially opaque. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Defining the opacity of a SVG gradient color stop + +This example demonstrates the basic use case of `stop-opacity`, and how the CSS `stop-opacity` property takes precedence over the `stop-opacity` attribute. + +#### HTML + +We have an SVG with a few {{SVGElement("polygon")}} stars and three almost identical {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value. + +```html + + + + + + + + + + + + + + + + + + + + + + +``` + +#### CSS + +We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} making the polygon path line visible. + +Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's`id` is the `url()` parameter. We set `magenta` as the fallback color. + +We define the opacity of the stops of each gradient using the `stop-opacity` property. + +The SVG has a striped background to make translucency more apparent. + +```css hidden +svg { + border: 1px solid; + height: calc(100vh - 20px); + margin-bottom: 10px; + background: repeating-linear-gradient( + to top left, + white 0 9px, + black 9px 10px + ); +} +``` + +```css +polygon { + stroke: #333; + stroke-width: 1px; +} +polygon:nth-of-type(1) { + fill: url("#myGradient1") magenta; +} +polygon:nth-of-type(2) { + fill: url("#myGradient2") magenta; +} +polygon:nth-of-type(3) { + fill: url("#myGradient3") magenta; +} + +#myGradient1 stop { + stop-opacity: 1; +} +#myGradient2 stop { + stop-opacity: 0.8; +} +#myGradient3 stop { + stop-opacity: 25%; +} +``` + +#### Results + +{{EmbedLiveSample("Defining the opacity of a SVG gradient color stop", "300", "200")}} + +The first star is fully opaque. The fill of the second star is 80% opaque because the color stops are slightly translucent; the `stop-opacity: 0.8;` overrode the `stop-opacity="1"` element attribute value. The fill of the last star is barely noticeable with color stops that are 25% opaque. Note the stroke is the same opaque dark grey in all cases. + +> [!NOTE] +> Because we used the same `stop-opacity` value for all the sibling `` elements in the linear gradient, we could have instead used a single `` with fully opaque stops, and set a value for each ``s {{cssxref("fill-opacity")}} property instead. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("stop-opacity")}} attribute +- Presentation properties: `stop-opacity`, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("fill")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-color")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}} +- {{cssxref("opacity")}} +- {{cssxref("background-color")}} +- {{cssxref("color_value", "<color>")}} +- {{cssxref("basic-shape")}} data type From c00765c1d627e97ee3021b4b5938ddbac9d5155c Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Jul 2024 14:22:24 -0700 Subject: [PATCH 2/9] remove redirect --- files/en-us/_redirects.txt | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 66ab353b81f51d7..25913209ef5c26f 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11716,7 +11716,6 @@ /en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/Web/CSS/stop-color /en-US/docs/Web/SVG/Attribute/stop-color -/en-US/docs/Web/CSS/stop-opacity /en-US/docs/Web/SVG/Attribute/stop-opacity /en-US/docs/Web/CSS/stroke /en-US/docs/Web/SVG/Attribute/stroke /en-US/docs/Web/CSS/stroke-dasharray /en-US/docs/Web/SVG/Attribute/stroke-dasharray /en-US/docs/Web/CSS/stroke-dashoffset /en-US/docs/Web/SVG/Attribute/stroke-dashoffset From efed66afe3f1681d85d98c2cbc2b9ee1549f7209 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Jul 2024 15:54:58 -0700 Subject: [PATCH 3/9] New page: CSS stop-color property --- files/en-us/_redirects.txt | 1 - files/en-us/web/css/stop-color/index.md | 146 ++++++++++++++++++++++++ 2 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/css/stop-color/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 25913209ef5c26f..462ff1472cc506c 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11715,7 +11715,6 @@ /en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function /en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position -/en-US/docs/Web/CSS/stop-color /en-US/docs/Web/SVG/Attribute/stop-color /en-US/docs/Web/CSS/stroke /en-US/docs/Web/SVG/Attribute/stroke /en-US/docs/Web/CSS/stroke-dasharray /en-US/docs/Web/SVG/Attribute/stroke-dasharray /en-US/docs/Web/CSS/stroke-dashoffset /en-US/docs/Web/SVG/Attribute/stroke-dashoffset diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md new file mode 100644 index 000000000000000..2e344d550cc69dc --- /dev/null +++ b/files/en-us/web/css/stop-color/index.md @@ -0,0 +1,146 @@ +--- +title: stop-color +slug: Web/CSS/stop-color +page-type: css-property +browser-compat: css.properties.stop-color +--- + +{{CSSRef}} + +The **`stop-color`** [CSS](/en-US/docs/Web/CSS) property defines the color to use for an SVG {{SVGElement("stop")}} element within a gradient. If present, it overrides the element's {{SVGAttr("stop-color")}} attribute. + +> [!NOTE] +> The `stop-color` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* values */ +stop-color: red; +stop-color: hsl(120deg 75% 25% / 60%); +stop-color: currentcolor; + +/* Global values */ +stop-color: inherit; +stop-color: initial; +stop-color: revert; +stop-color: revert-layer; +stop-color: unset; +``` + +### Values + +- {{cssxref("color_value", "<color>")}} + + - : The color of the fill as any valid CSS {{cssxref("color_value", "<color>")}} value. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Defining the color stops of SVG gradients + +This example demonstrates the basic use case of `stop-color`, and how the CSS `stop-color` property takes precedence over the `stop-color` attribute. + +#### HTML + +We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements that define four color-stops creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +#### CSS + +We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the stops of the first and last stops in each gradient using the `stop-color` property using different CSS {{cssxref("color_value", "<color>")}} syntaxes. + +```css hidden +svg { + border: 1px solid; + height: calc(100vh - 20px); + margin-bottom: 10px; +} +``` + +```css +rect { + stroke: #333; + stroke-width: 1px; +} + +#myGradient1 { + stop:first-of-type { + stop-color: #66ccff; + } + stop:last-of-type { + stop-color: #f4aab9; + } +} +#myGradient2 { + stop:first-of-type { + stop-color: yellow; + } + stop:last-of-type { + stop-color: purple; + } +} +#myGradient3 { + stop:first-of-type { + stop-color: hsl(0deg 100% 50%); + } + stop:last-of-type { + stop-color: hsl(20deg 100% 50%); + } +} +``` + +#### Results + +{{EmbedLiveSample("Defining the color stops of SVG gradients", "300", "200")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("stop-color")}} attribute +- Presentation properties: `stop-color`, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("fill")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}} +- {{cssxref("opacity")}} +- {{cssxref("background-color")}} +- {{cssxref("color_value", "<color>")}} +- {{cssxref("basic-shape")}} data type From bcf90132d8e4d173c9b33cbe6c09babf8bf1be8f Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Jul 2024 16:10:19 -0700 Subject: [PATCH 4/9] New page: CSS stop-color property --- files/en-us/web/css/stop-color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md index 2e344d550cc69dc..a1d84dec4698bea 100644 --- a/files/en-us/web/css/stop-color/index.md +++ b/files/en-us/web/css/stop-color/index.md @@ -82,7 +82,7 @@ We have an SVG with three {{SVGElement("rect")}} squares and three almost identi #### CSS -We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the stops of the first and last stops in each gradient using the `stop-color` property using different CSS {{cssxref("color_value", "<color>")}} syntaxes. +We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the first and last stops in each gradient, overriding their `stop-color` attribute values, using the `stop-color` property using various CSS {{cssxref("color_value", "<color>")}} syntaxes. ```css hidden svg { From bea75eecc6fbb2b3c37874373c1318497244f752 Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 26 Jul 2024 19:07:06 -0700 Subject: [PATCH 5/9] example details --- files/en-us/web/css/stop-color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md index a1d84dec4698bea..b1f542fdf7efcb1 100644 --- a/files/en-us/web/css/stop-color/index.md +++ b/files/en-us/web/css/stop-color/index.md @@ -50,7 +50,7 @@ This example demonstrates the basic use case of `stop-color`, and how the CSS `s #### HTML -We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements that define four color-stops creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value. +We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value. ```html From d376d4d180d00b56853e6b7920de89d5dad82487 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 7 Aug 2024 11:45:39 -0700 Subject: [PATCH 6/9] edits per review --- files/en-us/web/css/stop-opacity/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/stop-opacity/index.md b/files/en-us/web/css/stop-opacity/index.md index 2edfa5ef6647340..82ad2ef906fb54a 100644 --- a/files/en-us/web/css/stop-opacity/index.md +++ b/files/en-us/web/css/stop-opacity/index.md @@ -7,12 +7,12 @@ browser-compat: css.properties.stop-opacity {{CSSRef}} -The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute. +The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property defines the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element within an SVG gradient. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute. -The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a ``'s color but can not make the color defined by the `color-stop` property more opaque. +The property value impacts the {{cssxref("stop-color")}}'s alpha channel; it can increase the transparency of a ``'s color but can not make the color defined by the `stop-color` property more opaque. > [!NOTE] -> The `stop-opacity` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. +> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. ## Syntax @@ -31,7 +31,7 @@ stop-opacity: unset; ### Values -The `` is a {{cssxref("number")}} and {{cssxref("percentage")}} denoting the opacity of the SVG gradient `` element. +The `` is a {{cssxref("number")}} or {{cssxref("percentage")}} denoting the opacity of the SVG gradient `` element. - {{cssxref("number")}} @@ -41,7 +41,7 @@ The `` is a {{cssxref("number")}} and {{cssxref("percentage")}} d - : A percentage value between `0%` and `100%`, inclusive. -With `0` or `0%`, the stop is fully transparent (that is, invisible). With `1` or `100%`, the element is the full opacity of the `stop-color` value; which may or may not be partially opaque. +With `0` or `0%` set, the stop is fully transparent. With `1` or `100%` set, the element is the full opacity of the `stop-color` value, which may or may not be partially opaque. ## Formal definition @@ -59,7 +59,7 @@ This example demonstrates the basic use case of `stop-opacity`, and how the CSS #### HTML -We have an SVG with a few {{SVGElement("polygon")}} stars and three almost identical {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value. +We have an SVG with a few {{SVGElement("polygon")}} stars and three {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value. ```html @@ -90,11 +90,11 @@ We have an SVG with a few {{SVGElement("polygon")}} stars and three almost ident We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} making the polygon path line visible. -Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's`id` is the `url()` parameter. We set `magenta` as the fallback color. +Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's `id` is the `url()` parameter. We set `magenta` as the fallback color. We define the opacity of the stops of each gradient using the `stop-opacity` property. -The SVG has a striped background to make translucency more apparent. +The SVG has a striped background to make the transparency settings more apparent. ```css hidden svg { From 0f98c8bc050f0f817639feab86199301a5195190 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 7 Aug 2024 11:46:14 -0700 Subject: [PATCH 7/9] edits per review --- files/en-us/web/css/stop-color/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md index b1f542fdf7efcb1..bb7444ec3eb288e 100644 --- a/files/en-us/web/css/stop-color/index.md +++ b/files/en-us/web/css/stop-color/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.stop-color The **`stop-color`** [CSS](/en-US/docs/Web/CSS) property defines the color to use for an SVG {{SVGElement("stop")}} element within a gradient. If present, it overrides the element's {{SVGAttr("stop-color")}} attribute. > [!NOTE] -> The `stop-color` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. +> The `stop-color` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. ## Syntax @@ -50,7 +50,7 @@ This example demonstrates the basic use case of `stop-color`, and how the CSS `s #### HTML -We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value. +We have an SVG with three {{SVGElement("rect")}} squares and three {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value. ```html @@ -82,7 +82,7 @@ We have an SVG with three {{SVGElement("rect")}} squares and three almost identi #### CSS -We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the first and last stops in each gradient, overriding their `stop-color` attribute values, using the `stop-color` property using various CSS {{cssxref("color_value", "<color>")}} syntaxes. +We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} outlining the rectangle. We define the colors of the first and last stops in each gradient, overriding their `stop-color` attribute values, using the `stop-color` property. Various CSS {{cssxref("color_value", "<color>")}} syntaxes are shown. ```css hidden svg { From 7c464cc45dbe279205c04efe839503195cf0f31a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 7 Aug 2024 23:44:47 -0700 Subject: [PATCH 8/9] Update files/en-us/web/css/stop-color/index.md Co-authored-by: Chris Mills --- files/en-us/web/css/stop-color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/stop-color/index.md b/files/en-us/web/css/stop-color/index.md index bb7444ec3eb288e..29c5d494c122a3e 100644 --- a/files/en-us/web/css/stop-color/index.md +++ b/files/en-us/web/css/stop-color/index.md @@ -32,7 +32,7 @@ stop-color: unset; - {{cssxref("color_value", "<color>")}} - - : The color of the fill as any valid CSS {{cssxref("color_value", "<color>")}} value. + - : The color of the fill. This can be any valid CSS {{cssxref("color_value", "<color>")}} value. ## Formal definition From 46eded237aa53961832137d500960383df632b78 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 7 Aug 2024 23:47:03 -0700 Subject: [PATCH 9/9] Update files/en-us/web/css/stop-opacity/index.md --- files/en-us/web/css/stop-opacity/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/stop-opacity/index.md b/files/en-us/web/css/stop-opacity/index.md index 82ad2ef906fb54a..b8aff19ba47ef22 100644 --- a/files/en-us/web/css/stop-opacity/index.md +++ b/files/en-us/web/css/stop-opacity/index.md @@ -12,7 +12,7 @@ The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property defines the opacity o The property value impacts the {{cssxref("stop-color")}}'s alpha channel; it can increase the transparency of a ``'s color but can not make the color defined by the `stop-color` property more opaque. > [!NOTE] -> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements. +> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. ## Syntax