diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 6026075d4fa83c3..0703e4943995f60 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11709,8 +11709,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/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 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..29c5d494c122a3e --- /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')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to 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. This can be 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 {{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 + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +#### 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. Various CSS {{cssxref("color_value", "<color>")}} syntaxes are shown. + +```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 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..b8aff19ba47ef22 --- /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 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 {{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 to 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")}} or {{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%` 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 + +{{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 {{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 the transparency settings 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