From 50aa81fc387260ffc69700579c910ab150fe8dff Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 13 Nov 2024 17:07:19 -0800 Subject: [PATCH 1/2] New pages: CSS SVG filter properites --- files/en-us/_redirects.txt | 6 - .../web/css/css_color_adjustment/index.md | 10 +- files/en-us/web/css/flood-color/index.md | 123 ++++++++++++++++ files/en-us/web/css/flood-opacity/index.md | 136 ++++++++++++++++++ files/en-us/web/css/lighting-color/index.md | 135 +++++++++++++++++ 5 files changed, 399 insertions(+), 11 deletions(-) create mode 100644 files/en-us/web/css/flood-color/index.md create mode 100644 files/en-us/web/css/flood-opacity/index.md create mode 100644 files/en-us/web/css/lighting-color/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index e8616d22b29ff55..3c1363c63017257 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -701,8 +701,6 @@ /en-US/docs/CSS/flex-shrink /en-US/docs/Web/CSS/flex-shrink /en-US/docs/CSS/flex-wrap /en-US/docs/Web/CSS/flex-wrap /en-US/docs/CSS/float /en-US/docs/Web/CSS/float -/en-US/docs/CSS/flood-color /en-US/docs/Web/SVG/Attribute/flood-color -/en-US/docs/CSS/flood-opacity /en-US/docs/Web/SVG/Attribute/flood-opacity /en-US/docs/CSS/font /en-US/docs/Web/CSS/font /en-US/docs/CSS/font-family /en-US/docs/Web/CSS/font-family /en-US/docs/CSS/font-feature-settings /en-US/docs/Web/CSS/font-feature-settings @@ -733,7 +731,6 @@ /en-US/docs/CSS/left /en-US/docs/Web/CSS/left /en-US/docs/CSS/length /en-US/docs/Web/CSS/length /en-US/docs/CSS/letter-spacing /en-US/docs/Web/CSS/letter-spacing -/en-US/docs/CSS/lighting-color /en-US/docs/Web/SVG/Attribute/lighting-color /en-US/docs/CSS/line-height /en-US/docs/Web/CSS/line-height /en-US/docs/CSS/linear-gradient /en-US/docs/Web/CSS/gradient/linear-gradient /en-US/docs/CSS/list-style /en-US/docs/Web/CSS/list-style @@ -11627,8 +11624,6 @@ /en-US/docs/Web/CSS/flex-line-pack /en-US/docs/Web/CSS/align-content /en-US/docs/Web/CSS/flex-order /en-US/docs/Web/CSS/order /en-US/docs/Web/CSS/flex-pack /en-US/docs/Web/CSS/justify-content -/en-US/docs/Web/CSS/flood-color /en-US/docs/Web/SVG/Attribute/flood-color -/en-US/docs/Web/CSS/flood-opacity /en-US/docs/Web/SVG/Attribute/flood-opacity /en-US/docs/Web/CSS/font-size/font-optical-sizing /en-US/docs/Web/CSS/font-optical-sizing /en-US/docs/Web/CSS/gradient/conic-gradient() /en-US/docs/Web/CSS/gradient/conic-gradient /en-US/docs/Web/CSS/gradient/linear-gradient() /en-US/docs/Web/CSS/gradient/linear-gradient @@ -11652,7 +11647,6 @@ /en-US/docs/Web/CSS/inset-area_value /en-US/docs/Web/CSS/position-area_value /en-US/docs/Web/CSS/justify-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout /en-US/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning -/en-US/docs/Web/CSS/lighting-color /en-US/docs/Web/SVG/Attribute/lighting-color /en-US/docs/Web/CSS/linear-gradient /en-US/docs/Web/CSS/gradient/linear-gradient /en-US/docs/Web/CSS/linear-gradient() /en-US/docs/Web/CSS/gradient/linear-gradient /en-US/docs/Web/CSS/margin-new /en-US/docs/Web/CSS/margin diff --git a/files/en-us/web/css/css_color_adjustment/index.md b/files/en-us/web/css/css_color_adjustment/index.md index b2d60c8b379f3cd..84edcb373b7d6d8 100644 --- a/files/en-us/web/css/css_color_adjustment/index.md +++ b/files/en-us/web/css/css_color_adjustment/index.md @@ -36,13 +36,13 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color - {{cssxref("color")}} - {{cssxref("color-scheme")}} - {{cssxref("column-rule-color")}} - - [`fill`](/en-US/docs/Web/SVG/Attribute/fill) - - [`flood-color`](/en-US/docs/Web/SVG/Attribute/flood-color) - - [`lighting-color`](/en-US/docs/Web/SVG/Attribute/lighting-color) + - {{cssxref("fill")}} + - {{cssxref("flood-color")}} + - {{cssxref("lighting-color")}} - {{cssxref("outline-color")}} - {{cssxref("scrollbar-color")}} - - [`stop-color`](/en-US/docs/Web/SVG/Attribute/stop-color) - - [`stroke`](/en-US/docs/Web/SVG/Attribute/stroke) + - {{cssxref("stop-color")}} + - {{cssxref("stroke")}} - {{cssxref("text-decoration-color")}} - {{cssxref("text-emphasis-color")}} - {{cssxref("text-shadow")}} diff --git a/files/en-us/web/css/flood-color/index.md b/files/en-us/web/css/flood-color/index.md new file mode 100644 index 000000000000000..474e62012b37017 --- /dev/null +++ b/files/en-us/web/css/flood-color/index.md @@ -0,0 +1,123 @@ +--- +title: flood-color +slug: Web/CSS/flood-color +page-type: css-property +browser-compat: css.properties.flood-color +--- + +{{CSSRef}} + +The **`flood-color`** [CSS](/en-US/docs/Web/CSS) property defines the color of the current filter primitive subregion in {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements within a {{SVGElement("filter")}}. If present, it overrides the element's {{SVGAttr("flood-color")}} attribute. + +> [!NOTE] +> The `flood-color` property only applies to {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* values */ +flood-color: red; +flood-color: hsl(120deg 75% 25% / 60%); +flood-color: currentcolor; + +/* Global values */ +flood-color: inherit; +flood-color: initial; +flood-color: revert; +flood-color: revert-layer; +flood-color: unset; +``` + +### Values + +- {{cssxref("color_value", "<color>")}} + + - : The flood's color. This can be any valid CSS {{cssxref("color_value", "<color>")}} value. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Defining the color of a filters flood + +This example demonstrates the basic use case of `flood-color`, and how the CSS `flood-color` property takes precedence over the `flood-color` attribute. + +#### HTML + +We have an SVG with two {{SVGElement("filter")}} elements, each with a {{SVGElement("feFlood")}} child. Each `` element includes the SVG `flood-color` attribute defining the flood color as `seagreen`. We included two {{SVGElement("rect")}} elements with a filter attribute; this is where the filters will be displayed. + +```html + + + + + + + + + + + +``` + +#### CSS + +We define the size and position of our `` using the CSS {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("x")}}, and {{cssxref("y")}} properties: + +```css +rect { + width: 100px; + height: 100px; + x: 10px; + y: 10px; +} +#r2 { + x: 150px; +} +``` + +We then apply different flood color values to the `` elements using the CSS `flood-color` property. We use a named color and a 3-digit hexidecimal color, but we can use any valid CSS color syntax: + +```css +#flood1 feFlood { + flood-color: rebeccapurple; +} +#flood2 feFlood { + flood-color: #f36; +} +``` + +#### Results + +{{EmbedLiveSample("Defining the color of a filters flood", "300", "220")}} + +The attributes defined the squares as seagreen, but these values were overridden by the CSS `flood-color` values. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("flood-opacity")}} +- {{cssxref("color")}} +- {{cssxref("fill")}} +- {{cssxref("lighting-color")}} +- {{cssxref("stop-color")}} +- {{cssxref("stroke")}} +- {{cssxref("box-shadow")}} +- {{cssxref("text-shadow")}} +- {{cssxref("background-color")}} +- {{cssxref("color_value", "<color>")}} +- {{cssxref("filter-function")}} +- SVG {{SVGAttr("flood-color")}} attribute diff --git a/files/en-us/web/css/flood-opacity/index.md b/files/en-us/web/css/flood-opacity/index.md new file mode 100644 index 000000000000000..1dca56be777fc85 --- /dev/null +++ b/files/en-us/web/css/flood-opacity/index.md @@ -0,0 +1,136 @@ +--- +title: flood-opacity +slug: Web/CSS/flood-opacity +page-type: css-property +browser-compat: css.properties.flood-opacity +--- + +{{CSSRef}} + +The **`flood-opacity`** [CSS](/en-US/docs/Web/CSS) property defines the opacity of the current filter primitive subregion in {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements within a {{SVGElement("filter")}}. If present, it overrides the element's {{SVGAttr("flood-opacity")}} attribute. + +The property value impacts the {{cssxref("flood-color")}}'s alpha channel; it can increase the transparency of a `flood-color` but can not make the color defined by the `flood-color` property more opaque. + +> [!NOTE] +> The `flood-opacity` property only applies to {{SVGElement("feFlood")}} and {{SVGElement("feDropShadow")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* numeric and percentage values */ +flood-opacity: 0.2; +flood-opacity: 20%; + +/* Global values */ +flood-opacity: inherit; +flood-opacity: initial; +flood-opacity: revert; +flood-opacity: revert-layer; +flood-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 flood is fully transparent. With `1` or `100%` set, the element is the full opacity of the `flood-color` value, which may or may not be partially opaque. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Defining the flood opacity of a filter + +This example demonstrates the basic use case of `flood-opacity`, and how the CSS `flood-opacity` property takes precedence over the `flood-opacity` attribute. + +#### HTML + +We have an SVG with a few {{SVGElement("filter")}} elements, each with a {{SVGElement("feFlood")}} child. The `` define the filters as `seagreen`, with the first being declared by its `flood-opacity` attribute as fully opaque and the second being fully transparent. We included two {{SVGElement("rect")}} elements, each with a filter attribute. + +```html + + + + + + + + + + + +``` + +#### CSS + +We define the {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("x")}}, and {{cssxref("y")}},positioning of our rectangles with CSS, and include a repeating linear gradient as a {{cssxref("background-image")}} on the SVG so the opacity of the flood-color is more apparent: + +```css +svg { + background-image: repeating-linear-gradient( + 45deg, + transparent 0 9px, + #ccc 0px 10px + ); +} +rect { + width: 100px; + height: 100px; + x: 10px; + y: 10px; +} +#r2 { + x: 150px; +} +``` + +We then apply different flood opacity values to the `` elements using the CSS `flood-opacity`: property: + +```css +#flood1 feFlood { + flood-opacity: 0.5; +} +#flood2 feFlood { + flood-opacity: 90%; +} +``` + +#### Results + +{{EmbedLiveSample(" Defining the flood opacity of a filter", "300", "220")}} + +The attributes defined the first square as fully opaque and the second as fully transparent, but these values were overridden by the CSS `flood-opacity` values. The seagreen filters are 50% and 90% opaque, respectively. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("flood-color")}} +- {{cssxref("fill")}} +- {{cssxref("stop-opacity")}} +- {{cssxref("stroke-opacity")}} +- {{cssxref("opacity")}} +- {{cssxref("box-shadow")}} +- {{cssxref("text-shadow")}} +- {{cssxref("filter-function")}}, including {{cssxref("filter-function/opacity", "opacity()")}} +- SVG {{SVGAttr("flood-opacity")}} attribute diff --git a/files/en-us/web/css/lighting-color/index.md b/files/en-us/web/css/lighting-color/index.md new file mode 100644 index 000000000000000..796cd25365cd5f2 --- /dev/null +++ b/files/en-us/web/css/lighting-color/index.md @@ -0,0 +1,135 @@ +--- +title: lighting-color +slug: Web/CSS/lighting-color +page-type: css-property +browser-compat: css.properties.lighting-color +--- + +{{CSSRef}} + +The **`lighting-color`** [CSS](/en-US/docs/Web/CSS) property defines the color of the light source for the {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} SVG lighting filter primitives within an SVG {{SVGElement("filter")}}. If present, it overrides the element's {{SVGAttr("lighting-color")}} attribute. + +> [!NOTE] +> The `lighting-color` property only applies to {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements. + +## Syntax + +```css +/* values */ +lighting-color: red; +lighting-color: hsl(120deg 75% 25% / 60%); +lighting-color: currentcolor; + +/* Global values */ +lighting-color: inherit; +lighting-color: initial; +lighting-color: revert; +lighting-color: revert-layer; +lighting-color: unset; +``` + +### Values + +- {{cssxref("color_value", "<color>")}} + + - : The lighting's color. This can be any valid CSS {{cssxref("color_value", "<color>")}} value. + +## Formal definition + +{{CSSInfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Defining the color of filter lighting + +This example demonstrates the basic use case of `lighting-color`, and how the CSS `lighting-color` property takes precedence over the `lighting-color` attribute. + +#### HTML + +We have an SVG with two {{SVGElement("filter")}} elements, one with a `` and one with a `` child. Each includes the SVG `lighting-color` attribute defining the lighting color as `red`. Both of these children have a {{SVGElement("fePointLight")}}, the required child that sets the light source. We included two {{SVGElement("rect")}} elements with a filter attribute; this is where the filters will be displayed. + +```html + + + + + + + + + + + + + + + +``` + +#### CSS + +We define the size and position of our `` using the CSS {{cssxref("height")}}, {{cssxref("width")}}, {{cssxref("x")}}, and {{cssxref("y")}} properties. We also add a background image to the SVG to make any color alpha transparency more apparent: + +```css +svg { + background-image: repeating-linear-gradient( + 45deg, + transparent 0 9px, + #ccc 0px 10px + ); +} + +rect { + width: 100px; + height: 100px; + x: 10px; + y: 10px; +} + +#r2 { + x: 150px; +} +``` + +We then apply different lighting color values to the filter's child elements using the CSS `lighting-color` property. We use a named color and a 3-digit hexidecimal color, but we can use any valid CSS color syntax: + +```css +feDiffuseLighting { + lighting-color: blue; +} + +feSpecularLighting { + lighting-color: #f09; +} +``` + +#### Results + +{{EmbedLiveSample("Defining the color of filter lighting", "300", "220")}} + +The attributes defined the color of both light filters as `red`, but these values were overridden by the CSS `lighting-color` values. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("color")}} +- {{cssxref("fill")}} +- {{cssxref("flood-color")}} +- {{cssxref("stop-color")}} +- {{cssxref("stroke")}} +- {{cssxref("flood-opacity")}} +- {{cssxref("background-color")}} +- {{cssxref("color_value", "<color>")}} +- {{cssxref("filter-function")}} +- SVG {{SVGAttr("lighting-color")}} attribute From d753152ed1dbd97e3de0b75373a9bca8e083b292 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 14 Nov 2024 09:53:32 -0800 Subject: [PATCH 2/2] Update files/en-us/web/css/css_color_adjustment/index.md Co-authored-by: Brian Thomas Smith --- files/en-us/web/css/css_color_adjustment/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/css_color_adjustment/index.md b/files/en-us/web/css/css_color_adjustment/index.md index 84edcb373b7d6d8..6a42910b3875ff9 100644 --- a/files/en-us/web/css/css_color_adjustment/index.md +++ b/files/en-us/web/css/css_color_adjustment/index.md @@ -38,6 +38,7 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color - {{cssxref("column-rule-color")}} - {{cssxref("fill")}} - {{cssxref("flood-color")}} + - {{cssxref("flood-opacity")}} - {{cssxref("lighting-color")}} - {{cssxref("outline-color")}} - {{cssxref("scrollbar-color")}}