From 17972a302df0a012cdb4001d016d839d8e5f7959 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 26 Jul 2023 13:57:07 -0400 Subject: [PATCH 01/10] wip --- files/en-us/web/css/offset-path/index.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 3db3cc0d255f020..de0366e1cc78cce 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -24,7 +24,7 @@ offset-path: ray(45deg); /* URL */ offset-path: url(#path); -/* Shape */ +/* Basic shape */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); @@ -48,17 +48,28 @@ offset-path: unset; ### Values +- `none` + + - : Specifies no motion path at all. + +- `` + + - : This parameter is optional. If not specified, the default value is. One of the following three values can be specified for ``: ``, ``, or ``. + - {{cssxref("ray","ray()")}} - - : Defines a path that is a line segment from the starting position of an element and proceeding in the direction defined by the specified angle. This value accepts up to three parameters – an {{CSSxRef("angle")}} similar to the CSS [linear-gradient](/en-US/docs/Web/CSS/gradient/linear-gradient) angle, a size value similar to the CSS [radial-gradient](/en-US/docs/Web/CSS/gradient/radial-gradient) size values, and the keyword `contain`. The angle `0deg` starts on the y-axis, pointing up, with positive angles increasing in the clockwise direction. The possible values for the optional size parameter include `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, and `sides`. If omitted, the value of the size parameter defaults to `closest-side`. The optional `contain` keyword reduces the length of the offset path so that the element stays within its containing block. + + - : Defines a path that is a line segment from an element's starting position and extending at the specified angle. This value accepts up to three parameters – an {{CSSxRef("angle")}} similar to the CSS [linear-gradient](/en-US/docs/Web/CSS/gradient/linear-gradient) angle, a size value similar to the CSS [radial-gradient](/en-US/docs/Web/CSS/gradient/radial-gradient) size values, and the keyword `contain`. The angle `0deg` starts on the y-axis, pointing up, with positive angles increasing in the clockwise direction. The possible values for the optional size parameter include `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, and `sides`. If omitted, the value of the size parameter defaults to `closest-side`. The optional `contain` keyword reduces the length of the offset path so that the element stays within its containing block. > **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support. +- `` + + - : This parameter is optional. If not specified, the default value is `border-box`. + - `url()` - : References the ID of an SVG shape — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` — using the shape's geometry as the path. - `` - : Specifies a [CSS shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) by using one of the shape functions such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon), or {{cssxref("path","path()")}}. -- `none` - - : Specifies no motion path at all. ## Description From a39899a8eb07465ba20ef865c89cdcb993c2616b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 31 Jul 2023 15:07:00 -0400 Subject: [PATCH 02/10] adds page for data type --- files/en-us/web/css/box_value/index.md | 78 ++++++++++++++++++++++++ files/en-us/web/css/offset-path/index.md | 2 +- files/en-us/web/css/offset/index.md | 2 +- 3 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/css/box_value/index.md diff --git a/files/en-us/web/css/box_value/index.md b/files/en-us/web/css/box_value/index.md new file mode 100644 index 000000000000000..99adf557b8c5541 --- /dev/null +++ b/files/en-us/web/css/box_value/index.md @@ -0,0 +1,78 @@ +--- +title: +slug: Web/CSS/box_value +page-type: css-type +--- + +{{CSSRef}} + +The **``** value type describes different aspects of an element's box model and represents how elements are rendered and positioned on a web page. The value type can applied to properties such as {{cssxref("transform-box")}} and {{cssxref("background-clip")}}. The value type is a keyword that represents a [box edge](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). + +## Syntax + +```css + = = content-box | padding-box | border-box + = | margin-box + = | fill-box | stroke-box + = | fill-box | stroke-box | view-box +``` + +### Values + +A `` can be of the type ``, ``, ``, or ``. + +- `` + + - : Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's padding and border. It excludes the margin area. + +- `` + + - : Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. + +- `` + + - : Refers to the area within the layout box that is used to render the content visually. This includes the area where the element's background and borders are painted. It excludes the margin area. + +- `` + - : Refers to the coordinate box used for positioning and sizing an element within its parent container. It is used to control how content flows around the edges of the box. It excludes the margin area. + +### Keywords + +The different `` value types can be specified as one of the keyword values listed below: + +- `content-box` + + - : Refers to the edge of the content area of the box. In SVG, this value is treated as `fill-box`. It is the innermost box and contains the actual content, such as text, images, or other HTML elements. + +- `padding-box` + + - : Refers to the edge of the padding of the box. If there is no padding on a side, then the value is the same as `content-box`. In SVG, `padding-box` is treated as `fill-box`. The padding area surrounds the content area. + +- `border-box` + + - : Refers to the edge of the border of the box. If there is no border on a side, then the value is the same as `padding-box`. In SVG, `border-box` is treated as `stroke-box`. The border area surrounds the padding area. + +- `margin-box` + + - : Refers to the edge of the margin of the box. If there is no margin on a side, then the value is the same as `border-box`. In SVG, `margin-box` is treated as `stroke-box`. + +- `fill-box` + + - : Refers to the object bounding box in SVG. In CSS, `fill-box` is treated as `content-box`. It is used to wrap the content around the edges defined by the `coord-box` values. + +- `stroke-box` + + - : Refers to the stroke bounding box in SVG. In CSS, `stroke-box` is treated as `border-box`. It is used to define the shape of the element when strokes are applied. + +- `view-box` + + - : Refers to the nearest SVG viewport element's origin box. The origin box is a rectangle with the width and height of the initial SVG user coordinate system established by the {{svgattr("viewBox")}} attribute for that element. The origin box is positioned such that its top left corner is anchored at the coordinate system origin. In CSS, `view-box` treated as `border-box`. + > **Note:** When the SVG viewport is not anchored at the origin, the origin box does not correspond to the SVG viewport. + +## See also + +- Properties that use `` data type: {{cssxref("background-clip")}} +- Properties that use `` data type: {{cssxref("clip-path")}} +- Properties that use `` data type: {{cssxref("mask-origin")}} +- Properties that use `` data type: {{cssxref("clip-path")}}, {{cssxref("mask-clip")}}, {{cssxref("offset-path")}} +- [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index de0366e1cc78cce..54afa2606cff251 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset-path {{CSSRef}} -The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system. +The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system. The path is defined by a geometrical shape. {{EmbedInteractiveExample("pages/css/offset-path.html")}} diff --git a/files/en-us/web/css/offset/index.md b/files/en-us/web/css/offset/index.md index 90537487f098aab..ac8ce6b0c50d168 100644 --- a/files/en-us/web/css/offset/index.md +++ b/files/en-us/web/css/offset/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset {{CSSRef}} -The **`offset`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the properties required for animating an element along a defined path. +The **`offset`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the properties required for animating an element along a defined path. The offset properties together help to define an _offset transform_, a type of [transform](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) that aligns a point in an element ([offset-anchor](/en-US/docs/Web/CSS/offset-anchor)) to an _offset position_ ([offset-position](/en-US/docs/Web/CSS/offset-position)) on a path ([offset-path](/en-US/docs/Web/CSS/offset-path)) at various points along the path ([offset-distance](/en-US/docs/Web/CSS/offset-distance)) and optionally rotates the element ([offset-rotate](/en-US/docs/Web/CSS/offset-rotate)) to follow the direction of the path. > **Note:** Early versions of the spec called this property `motion`. From ce2c4c9f187b3c4f2e767f334409e5f8846bf8b2 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 1 Aug 2023 23:51:08 -0400 Subject: [PATCH 03/10] updates offset-* property pages --- files/en-us/web/css/box_value/index.md | 10 +- files/en-us/web/css/offset-path/index.md | 51 ++--- files/en-us/web/css/offset-position/index.md | 4 +- files/en-us/web/css/offset/index.md | 2 +- files/en-us/web/css/ray/index.md | 192 +++++++++++-------- 5 files changed, 147 insertions(+), 112 deletions(-) diff --git a/files/en-us/web/css/box_value/index.md b/files/en-us/web/css/box_value/index.md index 99adf557b8c5541..61793f9cf3a2cc1 100644 --- a/files/en-us/web/css/box_value/index.md +++ b/files/en-us/web/css/box_value/index.md @@ -11,10 +11,11 @@ The **``** value type describes different aspects of an element's box model ## Syntax ```css - = = content-box | padding-box | border-box - = | margin-box + = content-box | padding-box | border-box /* also referred to as */ + = | margin-box /* also referred to as */ = | fill-box | stroke-box = | fill-box | stroke-box | view-box + = | fill-box | stroke-box | view-box ``` ### Values @@ -72,7 +73,8 @@ The different `` value types can be specified as one of the keyword values ## See also - Properties that use `` data type: {{cssxref("background-clip")}} -- Properties that use `` data type: {{cssxref("clip-path")}} +- Properties that use `` data type: {{cssxref("shape-outside")}}, - Properties that use `` data type: {{cssxref("mask-origin")}} -- Properties that use `` data type: {{cssxref("clip-path")}}, {{cssxref("mask-clip")}}, {{cssxref("offset-path")}} +- Properties that use `` data type: {{cssxref("mask-clip")}}, {{cssxref("offset-path")}} +- Properties that use `` data type: {{cssxref("clip-path")}} - [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 54afa2606cff251..1743e4bf6341a63 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -7,7 +7,9 @@ browser-compat: css.properties.offset-path {{CSSRef}} -The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system. The path is defined by a geometrical shape. +The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a path for an element to follow and the element's positioning within the path's parent container or SVG coordinate system. The path is a geometrical shape along which the element gets positioned or moves. + +The `offset-path` property is used in combination with the {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}}, and {{cssxref("offset-anchor")}} properties to control the position and orientation of the element along a path. {{EmbedInteractiveExample("pages/css/offset-path.html")}} @@ -30,7 +32,8 @@ offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200"); -/* Coord box */ +/* Coordinate box */ +offset-path: border-box; offset-path: content-box; offset-path: padding-box; offset-path: border-box; @@ -48,32 +51,35 @@ offset-path: unset; ### Values +You can either specify the `none` keyword or one or both of `` and `` values. + - `none` - - : Specifies no motion path at all. + - : Specifies that the element does not follow any offset path. This is the default value. This value is equivalent of the element not having any [offset transform](/en-US/docs/Web/CSS/offset). The element's movement in this case is determined by its default position properties, such as {{cssxref("top")}} and {{cssxref("left")}}, instead of an offset path. - `` - - : This parameter is optional. If not specified, the default value is. One of the following three values can be specified for ``: ``, ``, or ``. + - : Specifies the geometrical offset path. This parameter is optional. If not specified, the default value of the path shape is `inset(0 round X)`, where `X` is the value of {{cssxref("border-radius")}} of the element that establishes the [containing block](/en-US/docs/Web/CSS/Containing_block). `` is specified as one of the following three values: + + - {{cssxref("ray","ray()")}} -- {{cssxref("ray","ray()")}} + - : Defines the path, which is a line segment, from an element's starting position and extending at the specified angle. This value accepts up to four parameters – an {{CSSxRef("angle")}}, an optional size value, the optional keyword `contain`, and an optional `at `. - - : Defines a path that is a line segment from an element's starting position and extending at the specified angle. This value accepts up to three parameters – an {{CSSxRef("angle")}} similar to the CSS [linear-gradient](/en-US/docs/Web/CSS/gradient/linear-gradient) angle, a size value similar to the CSS [radial-gradient](/en-US/docs/Web/CSS/gradient/radial-gradient) size values, and the keyword `contain`. The angle `0deg` starts on the y-axis, pointing up, with positive angles increasing in the clockwise direction. The possible values for the optional size parameter include `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, and `sides`. If omitted, the value of the size parameter defaults to `closest-side`. The optional `contain` keyword reduces the length of the offset path so that the element stays within its containing block. + - {{cssxref("url","url()")}} -> **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support. + - : Specifies the URL reference of an SVG shape element — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. The referenced shape's geometry is the equivalent offset path. If the URL does not reference a shape element (because it references a different element or resolves to a non-SVG document or doesn't resolve at all), the derived offset path is `path("M0,0")` (that is, a ``). -- `` + - [``](/en-US/docs/Web/CSS/basic-shape) - - : This parameter is optional. If not specified, the default value is `border-box`. + - : Specifies a [CSS shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) as the equivalent offset path by using one of the shape functions such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), {{cssxref("path","path()")}}, or [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon). If a `` type accepts the `at ` parameter but the parameter is omitted, and the element has an {{cssxref("offset-position")}}, the `offset-position` value is used for the `at ` parameter. Otherwise, the `at ` parameter defaults as specified for each shape function. -- `url()` - - : References the ID of an SVG shape — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` — using the shape's geometry as the path. -- `` - - : Specifies a [CSS shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) by using one of the shape functions such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon), or {{cssxref("path","path()")}}. +- {{cssxref("box_value","<coord-box>")}} + + - : Specifies the size information of the reference box containing the path. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. ## Description -This property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element's exact position on the offset path is determined by the {{cssxref("offset-distance")}} property. Each shape or path must define an initial position for the computed value of `0` for {{cssxref("offset-distance")}} and an initial direction which specifies the rotation of the object to the initial position. +The `offset-path` property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element's exact position on the offset path is determined by the {{cssxref("offset-distance")}} property. Each shape or path must define an initial position for the computed value of `0` for {{cssxref("offset-distance")}} and an initial direction which specifies the rotation of the object to the initial position. Early versions of the spec called this property `motion-path`. It was changed to `offset-path` because the property describes static positions, not motion. @@ -89,11 +95,11 @@ Early versions of the spec called this property `motion-path`. It was changed to ### Animating an element with offset-path -The `offset-path` properties in the CSS code sample defines a motion path that is identical to the `` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney. +The `offset-path` properties in the CSS code sample defines a path that is identical to the `` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney. #### SVG -The top and bottom halves of the scissors would appear in the top left of the canvas were they not positioned along the starting point of the motion path defined by `offset-path`. +The top and bottom halves of the scissors would appear in the top left of the canvas were they not positioned along the starting point of the path defined by `offset-path`. ```html ](/en-US/docs/Web/SVG/Tutorial/Paths) - {{cssxref("path","path()")}} - -Other demos: - -- [Examples of the various values](https://codepen.io/team/css-tricks/pen/WZdKMq) -- [Triangle](https://codepen.io/ericwilligers/pen/jMbJPp) -- [Scissors](https://codepen.io/ericwilligers/pen/bwVZNa) -- [Eyes](https://jsfiddle.net/ericwilligers/r1snqdan/) +- Other demos: + - [Examples using various shapes values](https://codepen.io/team/css-tricks/pen/WZdKMq) on Codepen by CSS-Tricks + - [Moving a triangle along a curved path](https://codepen.io/ericwilligers/pen/jMbJPp) on Codepen by Eric Willigers + - [Moving a pair of scissors along the shape of a house](https://codepen.io/ericwilligers/pen/bwVZNa) on Codepen by Eric Willigers + - [Moving multiple pairs of eyes](https://jsfiddle.net/ericwilligers/r1snqdan/) on JSFiddle by Eric Willigers diff --git a/files/en-us/web/css/offset-position/index.md b/files/en-us/web/css/offset-position/index.md index 82f7724aed40799..fa224974e0e7e62 100644 --- a/files/en-us/web/css/offset-position/index.md +++ b/files/en-us/web/css/offset-position/index.md @@ -53,8 +53,8 @@ offset-position: unset; - : Indicates that the element does not have an offset starting position. - `auto` - : Indicates that the offset starting position is the top-left corner of the element's box. This is the default value. -- `` - - : A {{cssxref("<position>")}}. The position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the {{cssxref("length-percentage")}} values are offsets for the preceding keyword value(s). For more explanation of these value types, see {{cssxref("background-position")}}. +- {{cssxref("<position>")}} + - : Specifies the position as an x/y coordinate to place an element relative to its box edges. The position can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the {{cssxref("length-percentage")}} values are offsets for the preceding keyword value(s). For more explanation of these value types, see {{cssxref("background-position")}}. ## Formal definition diff --git a/files/en-us/web/css/offset/index.md b/files/en-us/web/css/offset/index.md index ac8ce6b0c50d168..20a4abce5721444 100644 --- a/files/en-us/web/css/offset/index.md +++ b/files/en-us/web/css/offset/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset {{CSSRef}} -The **`offset`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the properties required for animating an element along a defined path. The offset properties together help to define an _offset transform_, a type of [transform](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) that aligns a point in an element ([offset-anchor](/en-US/docs/Web/CSS/offset-anchor)) to an _offset position_ ([offset-position](/en-US/docs/Web/CSS/offset-position)) on a path ([offset-path](/en-US/docs/Web/CSS/offset-path)) at various points along the path ([offset-distance](/en-US/docs/Web/CSS/offset-distance)) and optionally rotates the element ([offset-rotate](/en-US/docs/Web/CSS/offset-rotate)) to follow the direction of the path. +The **`offset`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the properties required for animating an element along a defined path. The offset properties together help to define an _offset transform_, a [transform](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) that aligns a point in an element ([offset-anchor](/en-US/docs/Web/CSS/offset-anchor)) to an _offset position_ ([offset-position](/en-US/docs/Web/CSS/offset-position)) on a path ([offset-path](/en-US/docs/Web/CSS/offset-path)) at various points along the path ([offset-distance](/en-US/docs/Web/CSS/offset-distance)) and optionally rotates the element ([offset-rotate](/en-US/docs/Web/CSS/offset-rotate)) to follow the direction of the path. > **Note:** Early versions of the spec called this property `motion`. diff --git a/files/en-us/web/css/ray/index.md b/files/en-us/web/css/ray/index.md index 668132ef363541e..0ab960201d4a682 100644 --- a/files/en-us/web/css/ray/index.md +++ b/files/en-us/web/css/ray/index.md @@ -9,17 +9,13 @@ browser-compat: css.types.ray {{CSSRef}}{{SeeCompatTable}} -The **`ray()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) defines a line segment that begins from an {{cssxref("offset-position")}} and extends in the direction of the specified angle. The line segment is referred to as "ray". The length of a ray can be constrained by specifying a size and using the `contain` keyword. +The **`ray()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) defines the [`offset-path`](/en-US/docs/Web/CSS/offset-path) line segment that an animated element can follow. The line segment is referred to as "ray". The ray begins from an {{cssxref("offset-position")}} and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the `contain` keyword. ```css -ray() = ray( && ? && contain? ) - = closest-side | closest-corner | farthest-side | farthest-corner | sides +ray() = ray( && ? && contain? && [at ]? ) + = closest-side | closest-corner | farthest-side | farthest-corner | sides ``` -The `ray()` function is used in [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path). It is used as a value for the [`offset-path`](/en-US/docs/Web/CSS/offset-path) property to define the path that an animated element can follow. The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the path's offset starting position. - -> **Note:** The default offset starting position of a ray is `auto`. If `offset-position: auto` is explicitly specified or allowed to default, the offset starting position is the `left top` corner (or `0 0`) of the element box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the containing block. - ## Syntax ```css @@ -36,65 +32,89 @@ offset-path: ray(45deg); ### Parameters +The parameters can be specified in any order. + - [``](/en-US/docs/Web/CSS/angle) + - : Specifies the direction in which the line segment extends from the offset starting position. The angle `0deg` lies on the y-axis pointing up, and positive angles increase in the clockwise direction. -- `` - - : Specifies the length of the line segment, which is the distance between [`offset-distance`](/en-US/docs/Web/CSS/offset-distance)`: 0%` and `offset-distance: 100%`. This is an optional parameter and accepts one of the following keyword values: +- `` - `closest-side`: Specifies the length of the line segment as the distance between the ray's starting point and the closest side of the [containing block](/en-US/docs/Web/CSS/Containing_block) of the element. This is the default value used when no `` is specified. If the starting point lies on the containing block's boundary, the length of the line segment is zero. If the starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. + - : Specifies the length of the line segment, which is the distance between {{cssxref("offset-distance")}} `0%` and `100%`, relative to the containing box. It is an optional parameter (`closest-side` is used if no `` is specified) and accepts one of the following keyword values: - `closest-corner`: Specifies the length of the line segment as the distance between the ray's starting point and the closest corner in the element's containing block. If the starting point lies on a corner of the containing block, the length of the line segment is zero. + `closest-side`: Distance between the ray's starting point and the closest side of the [containing block](/en-US/docs/Web/CSS/Containing_block) of the element. If the ray's starting point lies on an edge of the containing block, the length of the line segment is zero. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. - `farthest-side`: Specifies the length of the line segment as the distance between the ray's starting point and the farthest side of the containing block of the element. If the starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. + `closest-corner`: Distance between the ray's starting point and the closest corner in the element's containing block. If the ray's starting point lies on a corner of the containing block, the length of the line segment is zero. - `farthest-corner`: Specifies the length of the line segment as the distance between the ray's starting point and the farthest corner in the element's containing block. + `farthest-side`: Distance between the ray's starting point and the farthest side of the containing block of the element. If the ray's starting point is outside the containing block, the edge of the containing block is considered to extend to infinity. - `sides`: Specifies the length of the line segment as the distance between the ray's starting point and the point where the line segment intersects the containing block's boundary. If the starting point is on or outside the containing block's boundary, the length of the line segment is zero. + `farthest-corner`: Distance between the ray's starting point and the farthest corner in the element's containing block. + + `sides`: Distance between the ray's starting point and the point where the line segment intersects the containing block's boundary. If the starting point is on or outside the containing block's boundary, the length of the line segment is zero. > **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support. - `contain` - - : Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, but never going less than zero. + + - : Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, but never going less than zero. It is an optional parameter. + +- `at ` + - : Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for position is `offset-position: normal`, which places the element at `50%, 50%` of the containing block. + +## Description + +The `ray()` function allows the positioning of an element along a path using polar coordinates, rather than using the standard rectangular coordinates used by the {{cssxref("translate","translate()")}} function or using animation to move an element along a defined path. The `ray()` function helps to create 2D spatial transitions. + +The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the element's offset starting position. The default offset starting position of a ray is the default `offset-position` value: `auto`. If `offset-position` is explicitly specified as `auto` or allowed to default, the offset starting position is the `top left` corner (or `0 0`) of the element's box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the element's containing block. + +The `` value of the [`offset-path`](/en-US/docs/Web/CSS/offset-path) property provides the reference box for the ray path. ## Examples -### Defining an angle for the ray +### Defining the angle and starting position for a ray -This example shows how an element's anchor point gets positioned initially at a ray's starting point and how the element gets oriented at the specified ray angle. +This example shows how to work with an element's anchor point, how the element gets oriented at the specified ray angle, and how to change a ray's starting point. #### CSS ```css hidden .container { - display: grid; - grid-template-columns: 200px 100px; + position: relative; + width: 600px; + height: 100px; + border: 1px dashed black; + margin: 0 2em 4em 5em; + text-align: center; } -.example { - position: relative; - margin: 1em 2em 4em 3em; +pre { + font-size: 1em; + text-align: right; + padding-right: 10px; + line-height: 1em; } .box { - display: inline-block; - width: 3em; - height: 3em; - text-align: center; - line-height: 3em; - border: solid 0.05em; - background-color: palegreen; - border-top: 4px solid black; + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; } -.original { - position: absolute; - left: 0; - opacity: 20%; +.box + .box { + opacity: 1; } ``` ```css +.box { + background-color: palegreen; + border-top: 4px solid black; + position: absolute; + opacity: 20%; +} + .box1 { offset-path: ray(0deg closest-side); } @@ -110,77 +130,87 @@ This example shows how an element's anchor point gets positioned initially at a } .box4 { + offset-rotate: 0deg; offset-anchor: 0 0; + offset-position: 20% 30%; + offset-path: ray(closest-side 150deg); +} + +.box5 { offset-rotate: 0deg; - offset-path: ray(150deg closest-side); + offset-path: ray(100deg closest-side at bottom right); } ``` ```html hidden
-
-
0
-
0
-
- +
0
+
0
/* original */
+
-
-
1
-
1
-
- +
+
0
+
1
-offset-path: ray(0deg closest-side);
-/* Anchor is the center and starting position is top-left corner */
- -
-
2
-
2
-
+ offset-path: ray(0deg closest-side); + /* Offset starting position is top-left corner */ + +
+
+
0
+
2
-offset-path: ray(0deg closest-side);
-offset-anchor: 0 0;
-/* Anchor and starting position are at the top-left corner */
- -
-
3
-
3
-
+ offset-anchor: 0 0; + offset-path: ray(0deg closest-side); + /* Anchor and starting position are at the top-left corner */ + +
+
+
0
+
3
-offset-path: ray(150deg closest-side);
-offset-anchor: 0 0;
+ offset-anchor: 0 0; + offset-path: ray(150deg closest-side); + +
-
-
4
-
4
-
+
+
0
+
4
+ 
+    offset-anchor: 0 0;
+    offset-position: 20% 30%;
+    offset-rotate: 0deg;
+    offset-path: ray(closest-side 150deg);
+
+
+
+
0
+
5
-offset-path: ray(150deg closest-side);
-offset-anchor: 0 0;
-offset-rotate: 0deg;
+ offset-rotate: 0deg; + offset-path: ray(100deg closest-side at bottom right); +
``` -Similar to {{cssxref("transform-origin")}}, the default anchor point is at the center of an element. This anchor point can be modified using the [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) property. The default offset starting position of a path at is the top-left corner of the element box. +Similar to {{cssxref("transform-origin")}}, the default anchor point is at the center of an element. This anchor point can be modified using the [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) property. -In this example, various `offset-anchor` and `offset-path: ray()` values are applied to a box and results are displayed side-by-side for comparison. One box border is highlighted to demonstrate different ray starting points and box orientations. After a box is positioned at the ray's starting point, it is oriented in the direction of the specified ray angle. +In this example, various `offset-anchor` and `offset-path: ray()` values are applied to a box. Results are displayed side-by-side for comparison. The element's containing block is depicted with a dashed border. One border of the box is highlighted to demonstrate different ray starting points and box orientations. After a box is positioned at the ray's starting point, it is oriented in the direction of the specified ray angle. If `offset-position` is not specified, the default offset starting position of a ray is the top-left corner of the element's containing block. #### Result -{{EmbedLiveSample('Giving an angle to the ray', '100%', 700)}} +{{EmbedLiveSample('Giving an angle to the ray', '100%', 1000)}} -- `box1` gets initially positioned such that its anchor point (at the center) is at the offset starting position (top-left corner). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `original` box in the background. -- The anchor point of `box2` is changed to the top-left corner (`0px 0px`) using the `anchor-position` property, and as a result, the element's anchor point and the offset starting position coincide. The ray angle is applied to the element at this starting point, the top-left corner. The box is rotated to match the `0deg` angle along y-axis and pointing up. -- With other settings the same as in `box2`, a greater positive angle of `150deg` is applied on `box3`. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle. -- `box3` and `box4` have the same `offset-path` and `offset-anchor` values. In `box4`, however, an [`offset-rotate`](/en-US/docs/Web/CSS/offset-rotate) of `0deg` is applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path and prevents the element from rotating in the direction of the path. Notice in `box4` that the ray path is at `150deg`, but the box orientation will not change along the path. +- `box1` gets initially positioned such that its anchor point (at the center) is at the offset starting position (top-left corner of the box). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `box0` in the background. +- The anchor point of `box2` is changed to the top-left corner (`0px 0px`) using the `offset-anchor` property, and as a result, the element's anchor point and the offset starting position coincide. The ray angle is applied to the element at this starting point. The box is rotated to match the `0deg` angle along y-axis and pointing up. +- With other settings the same as in `box2`, a greater positive angle of `150deg` is applied in `box3`. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle of `150deg`. +- `box3` and `box4` have the same `offset-anchor` and `offset-path` values. In `box4`, however, an [`offset-rotate`](/en-US/docs/Web/CSS/offset-rotate) of `0deg` is applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path, and the element will not rotate in the direction of the path. Notice in `box4` that the ray path is at `150deg`, but the box orientation will not change along the path because of `offset-rotate`. Also note that the `offset-path` property of `box4` does not specify a starting ``, so the ray's starting position is derived from the element's `offset-position`, which in this case is `top 20% left 30%`. +- In `box5`, the `offset-path` property specifies the `at ` value, which places the box at the `bottom` and `right` edge of the element's containing block. ### Animating an element along the ray @@ -288,7 +318,7 @@ offset-rotate: 0deg; {{EmbedLiveSample('Animating an element along the ray', '100%', 750)}} -In the first two samples where `offset-path` is applied, notice the orientation of the shape without `offset-rotate` and with `offset-rotate`. The last two `offset-path` samples show the impact of corner `` values. The `closest-corner` value creates a very short offset-path because the shape is already in the corner. The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the containing block to the bottom-right corner. +In the first two samples where `offset-path` is applied, notice the orientation of the shape without `offset-rotate` and with `offset-rotate`. The last two `offset-path` samples show the impact of corner `` values: `closest-corner` and `farthest-corner`. The `closest-corner` value creates a very short offset-path because the shape is already at the corner. The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the containing block to the bottom-right corner. ## Specifications From efb2ec505786c73b31ec5099dc25e25db1adeefd Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 2 Aug 2023 11:24:07 -0400 Subject: [PATCH 04/10] updates syntax examples --- files/en-us/web/css/offset-path/index.md | 4 ++-- files/en-us/web/css/ray/index.md | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 1743e4bf6341a63..573edc9c9f390a4 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -21,10 +21,11 @@ offset-path: none; /* Line segment */ offset-path: ray(45deg closest-side contain); +offset-path: ray(contain 150deg at center center); offset-path: ray(45deg); /* URL */ -offset-path: url(#path); +offset-path: url(#myCircle); /* Basic shape */ offset-path: circle(50% at 25% 25%); @@ -33,7 +34,6 @@ offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200"); /* Coordinate box */ -offset-path: border-box; offset-path: content-box; offset-path: padding-box; offset-path: border-box; diff --git a/files/en-us/web/css/ray/index.md b/files/en-us/web/css/ray/index.md index 0ab960201d4a682..98bb74e4e0840f6 100644 --- a/files/en-us/web/css/ray/index.md +++ b/files/en-us/web/css/ray/index.md @@ -19,9 +19,10 @@ ray() = ray( && ? && contain? && [at ]? ) ## Syntax ```css -/* property: ray(expression) */ +/* offset-path: ray(parameters) */ + /* all parameters specified */ -offset-path: ray(50deg closest-corner contain); +offset-path: ray(50deg closest-corner contain at 100px 20px); /* two parameters specified, order does not matter */ offset-path: ray(contain 200deg); @@ -59,13 +60,13 @@ The parameters can be specified in any order. - : Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced by half the width or half the height of the element's border box, whichever is greater, but never going less than zero. It is an optional parameter. - `at ` - - : Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for position is `offset-position: normal`, which places the element at `50%, 50%` of the containing block. + - : Specifies the point where the ray begins and where the element is placed in its containing block. This is an optional parameter. If omitted, the value used is the `offset-position` value of the element. If omitted and the element doesn't have an `offset-position` value, the value used for ray's starting position is `offset-position: auto`, which places the element at the `top left` corner of the element's box. ## Description The `ray()` function allows the positioning of an element along a path using polar coordinates, rather than using the standard rectangular coordinates used by the {{cssxref("translate","translate()")}} function or using animation to move an element along a defined path. The `ray()` function helps to create 2D spatial transitions. -The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the element's offset starting position. The default offset starting position of a ray is the default `offset-position` value: `auto`. If `offset-position` is explicitly specified as `auto` or allowed to default, the offset starting position is the `top left` corner (or `0 0`) of the element's box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the element's containing block. +The element is initially positioned by moving the element's [`offset-anchor`](/en-US/docs/Web/CSS/offset-anchor) point to the element's offset starting position. The default offset starting position of a ray is the default `offset-position` value: `auto`. If `offset-position` is explicitly specified as `auto` or omitted and allowed to default, the offset starting position is the `top left` corner (or `0 0`) of the element's box. With `offset-position: normal`, the starting position of the ray is `50%, 50%` of the element's containing block. The `` value of the [`offset-path`](/en-US/docs/Web/CSS/offset-path) property provides the reference box for the ray path. From d2b8413a3673156bec361ac375cbca68317238fe Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 2 Aug 2023 13:52:06 -0400 Subject: [PATCH 05/10] adds coord-box example --- files/en-us/web/css/offset-path/index.md | 69 +++++++++++++++++- .../css/offset-path/offset-path-coord-box.png | Bin 0 -> 2692 bytes 2 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 files/en-us/web/css/offset-path/offset-path-coord-box.png diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 573edc9c9f390a4..8904b2f1c3baff0 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -71,11 +71,11 @@ You can either specify the `none` keyword or one or both of `` and - [``](/en-US/docs/Web/CSS/basic-shape) - - : Specifies a [CSS shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) as the equivalent offset path by using one of the shape functions such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), {{cssxref("path","path()")}}, or [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon). If a `` type accepts the `at ` parameter but the parameter is omitted, and the element has an {{cssxref("offset-position")}}, the `offset-position` value is used for the `at ` parameter. Otherwise, the `at ` parameter defaults as specified for each shape function. + - : Specifies the offset path as the equivalent path of a [basic shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) function such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), {{cssxref("path","path()")}}, or [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon). For example, if the `` is an `ellipse()` function, then the path is the outline of the circle/ellipse – it starts at the rightmost point of the circle/ellipse, and then is composed of four circular arcs, each comprising a quarter of the circle/ellipse, proceeding clockwise, ending with a segment-completing close path operation. If a `` type accepts the `at ` parameter but the parameter is omitted, and the element has an {{cssxref("offset-position")}}, the `offset-position` value is used for the `at ` parameter. Otherwise, the `at ` parameter defaults as specified for each shape function. - {{cssxref("box_value","<coord-box>")}} - - : Specifies the size information of the reference box containing the path. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. + - : Specifies the size information of the reference box containing the path. The reference box is derived from the element that establishes the containing block for this element. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. ## Description @@ -93,6 +93,71 @@ Early versions of the spec called this property `motion-path`. It was changed to ## Examples +### Creating an offset-path using coord-box positioning + +This example shows the how `` parameter of `offset-path` works in with {{cssxref("border-radius")}}. + +```html hidden +
+
+
+``` + +```css +body { + width: 300px; + height: 200px; + border-radius: 50px; + border: dashed aqua; + border-width: 25px; + padding: 25px; + margin: 50px; +} + +.box { + width: 40px; + height: 20px; + animation: move 8000ms infinite ease-in-out; +} + +.blueBox { + background-color: blue; + offset-path: border-box; + offset-distance: 5%; +} + +.greenBox { + background-color: green; + offset-path: padding-box; + offset-distance: 8%; +} + +.redBox { + background-color: red; + offset-path: content-box; + offset-distance: 12%; +} + +@keyframes move { + 0%, + 20% { + offset-distance: 0%; + } + 80%, + 100% { + offset-distance: 100%; + } +} +``` + +In this example, the margin, border, and padding have been purposely been given large values to demonstrate the placement of the blue, green, and red boxes on their respective `coord-box` edges: border-box, padding-box, and content-box. + +![Box model showing the placement of the blue, red, and green boxes on the border-box, padding-box, and context-box, respectively, by using the coord-box value in the offset-path property.](offset-path-coord-box.png) + +#### Result + +{{EmbedLiveSample('Creating an offset-path using coord-box positioning', '100%', 400)}} + ### Animating an element with offset-path The `offset-path` properties in the CSS code sample defines a path that is identical to the `` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney. diff --git a/files/en-us/web/css/offset-path/offset-path-coord-box.png b/files/en-us/web/css/offset-path/offset-path-coord-box.png new file mode 100644 index 0000000000000000000000000000000000000000..37775ea68ad6fc270077daa35d0a2d053f172b75 GIT binary patch literal 2692 zcmZ{m2~ZPh7RO`Ftm7z-J0fOLkS!08QDHGEsE`OA2uOe&sEiOr0l^WJOK53gd4P)W zEvE`iAVEl)tH%WgMU!Zu%PIm6Bt(>B<9LjX7zgdi*db&)98)#5V^?)`z1Oc^fA4+$ z`@ip8AlrNP%mp)PG}>&R?OQlB+BAZ?^JaWTdD^37cc{nbQJ(&uG}=`#YjodVD0^B0 z$J>im-(mBbGSq=Pcw4IwZO&zh;~qyxM?hUBlZkfr;Rln1vaUaSzbX27)w<)?)3Uz- zU=yMZ2Ot%I6#%RSz!`w;02CnFy#VY2fCoS{02u&q05}JL8vsWD@B$zKfD-_$24Euq znE(U;a0Y;601g1a0w5BAYyjK=*a1K=073xL5G@mc3yAhIqTLOE0Dx&{AHFw9HUO{( z(Iz6=C`5Y@(Iz0;07P4eXaf;#C88B0S_z`{0U#97t_Q$>lQf@3`_kWMizhGT$#8%4 zw+ruEO%Gg_`yx5~QHMeoDX@H}c=+68x^jE3trt6)gJLPuE0ptgNZ4i#Pi1Dq^P+yc8Z7iNJIH1QyA8GgBC zRa?HDsh<`9GPknf8E2JKYEg~U#vS-T5(#n zu-i18YOgB0lAho8dfQxlA=kiS<)6C%y{&-)YmI33=jlBf2EMgAYRGXk1LHae%S9(i zulIK>f7Fyc(O}(swucv&NW-p>X$u%>r=VOsdyT55O_jwJup^YrjR;hG!*Mpzdthu` z(>j#}s|RP%53MRy{zt@h_BFcO5`26sirIg_{k#RvRhTKa>rkwpi`pb&I959^BYcMz z6N^>!ZU{D>guceP(P(Fovlr~NiojpqW~3!8RoCRIkN@lPV_TkjIE666>LxB1Q;3;Uz7a)hW!)`=N%v`)sl<45#z*4f99)@6)|KK4j zp(@WSrZ6r_+Nxs-=-5+3Tvs5rM{Z2i^JK4rmF?0dVQ?M~6b|}&*qHYlR4807H7l4$ z1f8hjYc3okS8OugP}A`tu8UgVP`iGxdYA{o9>J>~k{Oe8bi@z5^HM&Emhg+P85!KDi zVMRpTR?gr|`8xO1!V{!2KJu;#v){}gJYS)h%M<#^R}ynPi9$D=C?_582=v$~oN&V# zVuB@of_S~<; zgJ>CE=Y|hIBBNAoTox5;>n*nqF)gH4qRglsxKP3T(Lq=z5QmA#i#pw$^h;8iCN|!v z-UM9Zx_;KDB=i~=3FOdPsy6~<2k|!(83TG;czREx=v~92v?lgD;eU57DbTEczeht~ z8UFp7qve^uYO&LGxZTRhN;DUD!wVfazZvH>-}_E zYIV(u*kVgcR%Be)mJ+SGu26yI&+2QHV1~xBs35&{z_?<;TU7hz|6{zp&5C+#vWF_P zMBDz(955wzPG*&R(?>OV$}=v1f6{DoJstkCEMxPh_e6i!;e>lub0;i*%Mks0f5v!! z;ZVV3pV9xTBGjDk@eOJtrt0!&f`;uig4rKZ9D67mwfwVxfbQkU|A97;18}a8Z#rI@8YbFIF zd7$rwoNwCo;OKx&yF`UGB$_%8T>OP?jf`D=`Q&3vJ$HKad|6msy$Cb@^-_*>;CkrM z)OEVvyfw4<%8oZ9b)HL}os$@L_aJf4nL)hsm$X9P{ff&G2A9s<(h$tq;z&+yL3vo6 zlS(5Eua2`whQ2S5jM*+OCd;F?F;+BV(jy!E&M#Z|Ni~^K$jEH zsYn-#1jaT^L-$X|?6542|7N*sX734f{>9qs?t^^Wm!m&aTv2GMn0@?f`Y!HZyKGJ> zpOW-J@@U4K^~L|x!|RzRXc^yVv@8pKt**`6-7jSs#)r3Pk1RUpW#(47LlF=FRE~qi#k%Wmr zLwjE>zq(OY-*Amn_8Mt?(oRj~F>6I{Y-wU7zT(?d8Ci?m|@o}J4t5EK;{3;{l MmA$3jYwyYb0k_e_TL1t6 literal 0 HcmV?d00001 From 53d9f32c205c5a22c0fe846d039188644cbb226d Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 3 Aug 2023 15:51:46 -0400 Subject: [PATCH 06/10] fixes feedback in offset-position --- files/en-us/web/css/offset-position/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/offset-position/index.md b/files/en-us/web/css/offset-position/index.md index fa224974e0e7e62..6248f6d6b06eb3a 100644 --- a/files/en-us/web/css/offset-position/index.md +++ b/files/en-us/web/css/offset-position/index.md @@ -50,7 +50,7 @@ offset-position: unset; ### Values - `normal` - - : Indicates that the element does not have an offset starting position. + - : Indicates that the element does not have an offset starting position and places the element at `(50%, 50%)` of the containing block - `auto` - : Indicates that the offset starting position is the top-left corner of the element's box. This is the default value. - {{cssxref("<position>")}} @@ -124,6 +124,7 @@ This example visually compares various initial offset starting position of an el
0
     offset-position: normal;
+    /* No offset-path specified */
@@ -235,7 +236,7 @@ pre { {{EmbedLiveSample('Comparing various offset starting positions', '100%', 930)}} -Notice that when `offset-position` is `normal`, the starting position of the ray is `50%, 50%` of the containing block. Also notice the difference between offset starting positions `auto` and `left top`. The value `auto` places the element such that its anchor point is at the top-left corner of the element box itself, whereas the value `left top` places the element such that the anchor point is the top-left corner of the containing block. +Notice that when `offset-position` is `normal`, the starting position of the ray is (`50%, 50%`) of the containing block. Also notice the difference between offset starting positions `auto` and `left top`. The value `auto` places the element such that its anchor point is at the top-left corner of the element box itself, whereas the value `left top` places the element such that the anchor point is the top-left corner of the containing block. ## Specifications From 29a0d3a55c7a24d13040334db382cb28df970877 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 3 Aug 2023 16:42:45 -0400 Subject: [PATCH 07/10] fixes feedack, renames to --- .../web/css/{box_value => box-edge}/index.md | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) rename files/en-us/web/css/{box_value => box-edge}/index.md (63%) diff --git a/files/en-us/web/css/box_value/index.md b/files/en-us/web/css/box-edge/index.md similarity index 63% rename from files/en-us/web/css/box_value/index.md rename to files/en-us/web/css/box-edge/index.md index 61793f9cf3a2cc1..34629d4bc817fad 100644 --- a/files/en-us/web/css/box_value/index.md +++ b/files/en-us/web/css/box-edge/index.md @@ -1,12 +1,13 @@ --- -title: -slug: Web/CSS/box_value +title: +slug: Web/CSS/box-edge page-type: css-type +spec-urls: https://drafts.csswg.org/css-box-4/#keywords --- {{CSSRef}} -The **``** value type describes different aspects of an element's box model and represents how elements are rendered and positioned on a web page. The value type can applied to properties such as {{cssxref("transform-box")}} and {{cssxref("background-clip")}}. The value type is a keyword that represents a [box edge](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). +The **``** keywords represent a [box edge](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). These keywords are used to define different aspects of an element's box model and how elements are positioned and rendered on screen. The `` keyword values are the components of, but not limited to, the``, ``, ``, ``, and `` data types. These types are applied to properties such as {{cssxref("transform-box")}} and {{cssxref("background-clip")}}. ## Syntax @@ -20,26 +21,30 @@ The **``** value type describes different aspects of an element's box model ### Values -A `` can be of the type ``, ``, ``, or ``. +A `` can be of the type ``, ``, ``, ``, or ``. - `` - - : Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's padding and border. It excludes the margin area. + - : Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's content, padding, and border. It excludes the margin area. This value type is used for the {{cssxref("background-clip")}} and {{cssxref("overflow-clip-margin")}} properties. - `` - - : Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. + - : Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. This value type is used for the {{cssxref("shape-outside")}} property. - `` - : Refers to the area within the layout box that is used to render the content visually. This includes the area where the element's background and borders are painted. It excludes the margin area. - `` - - : Refers to the coordinate box used for positioning and sizing an element within its parent container. It is used to control how content flows around the edges of the box. It excludes the margin area. + + - : Refers to the coordinate box used for positioning and sizing an element within its parent container. It is used to control how content flows around the edges of the box. It excludes the margin area. This value type is used for the {{cssxref("offset-path")}} property. + +- `` + - : Defines the reference box for a [basic shape](/en-US/docs/Web/CSS/basic-shape), or if specified by itself, causes the edges of the specified box, including any corner shaping (such as a {{cssxref("border-radius")}}), to be the clipping path. This value type is used for the {{cssxref("clip-path")}}, {{cssxref("mask-clip")}}, and {{cssxref("mask-origin")}} properties and the SVG {{SVGAttr("clip-path")}} attribute. ### Keywords -The different `` value types can be specified as one of the keyword values listed below: +The `` keywords are defined as follows: - `content-box` @@ -70,11 +75,10 @@ The different `` value types can be specified as one of the keyword values - : Refers to the nearest SVG viewport element's origin box. The origin box is a rectangle with the width and height of the initial SVG user coordinate system established by the {{svgattr("viewBox")}} attribute for that element. The origin box is positioned such that its top left corner is anchored at the coordinate system origin. In CSS, `view-box` treated as `border-box`. > **Note:** When the SVG viewport is not anchored at the origin, the origin box does not correspond to the SVG viewport. +## Specifications + +{{Specifications}} + ## See also -- Properties that use `` data type: {{cssxref("background-clip")}} -- Properties that use `` data type: {{cssxref("shape-outside")}}, -- Properties that use `` data type: {{cssxref("mask-origin")}} -- Properties that use `` data type: {{cssxref("mask-clip")}}, {{cssxref("offset-path")}} -- Properties that use `` data type: {{cssxref("clip-path")}} - [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) module From d261b5d4869c2784cea7ae6849ebd8a43b6d5fe2 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 3 Aug 2023 16:53:38 -0400 Subject: [PATCH 08/10] swaps usage of keywords and data types in intro --- files/en-us/web/css/box-edge/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/box-edge/index.md b/files/en-us/web/css/box-edge/index.md index 34629d4bc817fad..206e79f82621c59 100644 --- a/files/en-us/web/css/box-edge/index.md +++ b/files/en-us/web/css/box-edge/index.md @@ -7,7 +7,9 @@ spec-urls: https://drafts.csswg.org/css-box-4/#keywords {{CSSRef}} -The **``** keywords represent a [box edge](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). These keywords are used to define different aspects of an element's box model and how elements are positioned and rendered on screen. The `` keyword values are the components of, but not limited to, the``, ``, ``, ``, and `` data types. These types are applied to properties such as {{cssxref("transform-box")}} and {{cssxref("background-clip")}}. +The **``** value types represent a [box edge](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) keyword, such as [`content-box`](#content-box) and [`border-box`](#border-box). The box-edge keywords are used to define different aspects of an element's box model and how elements are positioned and rendered on screen. + +The box-edge keywords are the components of, but not limited to, the data types ``, ``, ``, ``, and ``. These types are applied to properties such as {{cssxref("transform-box")}} and {{cssxref("background-clip")}}. ## Syntax From bb13346c8b0b7601fe06a310a33eaaa71776198a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 8 Aug 2023 15:05:48 -0400 Subject: [PATCH 09/10] fixes review comments --- files/en-us/web/css/basic-shape/circle/index.md | 2 +- files/en-us/web/css/basic-shape/ellipse/index.md | 2 +- files/en-us/web/css/offset-path/index.md | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/basic-shape/circle/index.md b/files/en-us/web/css/basic-shape/circle/index.md index 7be3adfa1b419cb..1877e1a492d752a 100644 --- a/files/en-us/web/css/basic-shape/circle/index.md +++ b/files/en-us/web/css/basic-shape/circle/index.md @@ -30,7 +30,7 @@ clip-path: circle(6rem at 12rem 8rem); - : Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension. - `` - - : Moves the center of the circle. May be a {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as `left`. + - : Moves the center of the circle. May be a {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as `left`. The `` value defaults to center if omitted. ## Examples diff --git a/files/en-us/web/css/basic-shape/ellipse/index.md b/files/en-us/web/css/basic-shape/ellipse/index.md index f62f007833eeacf..cf9b9a9b6cf083b 100644 --- a/files/en-us/web/css/basic-shape/ellipse/index.md +++ b/files/en-us/web/css/basic-shape/ellipse/index.md @@ -32,7 +32,7 @@ An ellipse is essentially a squashed circle and so `ellipse()` acts in a very si - : Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension. - `` - - : Moves the center of the ellipse. May be a {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as `left`. + - : Moves the center of the ellipse. May be a {{cssxref("length")}}, or a {{cssxref("percentage")}}, or a values such as `left`. The `` value defaults to center if omitted. ## Examples diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 8904b2f1c3baff0..5e514e67b59d473 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset-path {{CSSRef}} -The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a path for an element to follow and the element's positioning within the path's parent container or SVG coordinate system. The path is a geometrical shape along which the element gets positioned or moves. +The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a path for an element to follow and the element's positioning within the path's parent container or SVG coordinate system. The path is a line, a curve, or geometrical shape along which the element gets positioned or moves. The `offset-path` property is used in combination with the {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}}, and {{cssxref("offset-anchor")}} properties to control the position and orientation of the element along a path. @@ -51,29 +51,29 @@ offset-path: unset; ### Values -You can either specify the `none` keyword or one or both of `` and `` values. +The `offset-path` takes as it's value an `` value, a `` value, or both or the `none` keyword. The `` value is a {{cssxref("ray","ray()")}}, a {{cssxref("url","url()")}}, or a [``](/en-US/docs/Web/CSS/basic-shape) value. - `none` - - : Specifies that the element does not follow any offset path. This is the default value. This value is equivalent of the element not having any [offset transform](/en-US/docs/Web/CSS/offset). The element's movement in this case is determined by its default position properties, such as {{cssxref("top")}} and {{cssxref("left")}}, instead of an offset path. + - : Specifies that the element does not follow any offset path. The `none` value is equivalent to the element not having any [offset transform](/en-US/docs/Web/CSS/offset). The element's movement in this case is determined by its default position properties, such as {{cssxref("top")}} and {{cssxref("left")}}, instead of an offset path. This is the default value. - `` - - : Specifies the geometrical offset path. This parameter is optional. If not specified, the default value of the path shape is `inset(0 round X)`, where `X` is the value of {{cssxref("border-radius")}} of the element that establishes the [containing block](/en-US/docs/Web/CSS/Containing_block). `` is specified as one of the following three values: + - : A `ray()`, a `url()`, or a `` specifying the geometrical offset path. If omitted, the path shape for the `` value is `inset(0 round X)`, where `X` is the value of {{cssxref("border-radius")}} of the element that establishes the [containing block](/en-US/docs/Web/CSS/Containing_block). - {{cssxref("ray","ray()")}} - - : Defines the path, which is a line segment, from an element's starting position and extending at the specified angle. This value accepts up to four parameters – an {{CSSxRef("angle")}}, an optional size value, the optional keyword `contain`, and an optional `at `. + - : Defines a line starting at a set position, of a set length, and extending at the specified angle. The `ray()` function accepts up to four parameters – an {{CSSxRef("angle")}}, an optional size value, the optional keyword `contain`, and an optional `at `. - {{cssxref("url","url()")}} - - : Specifies the URL reference of an SVG shape element — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. The referenced shape's geometry is the equivalent offset path. If the URL does not reference a shape element (because it references a different element or resolves to a non-SVG document or doesn't resolve at all), the derived offset path is `path("M0,0")` (that is, a ``). + - : Specifies the URL reference of a shape element with an SVG. The path is the shape of the SVG {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, or {{SVGElement("rect")}} element referenced by the`id` in the `url()` parameter. If the URL does not reference a shape element or is otherwise invalid, the resolved value for the offset path is `path("M0,0")` (which is a valid `` value). - [``](/en-US/docs/Web/CSS/basic-shape) - - : Specifies the offset path as the equivalent path of a [basic shape](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) function such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), {{cssxref("path","path()")}}, or [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon). For example, if the `` is an `ellipse()` function, then the path is the outline of the circle/ellipse – it starts at the rightmost point of the circle/ellipse, and then is composed of four circular arcs, each comprising a quarter of the circle/ellipse, proceeding clockwise, ending with a segment-completing close path operation. If a `` type accepts the `at ` parameter but the parameter is omitted, and the element has an {{cssxref("offset-position")}}, the `offset-position` value is used for the `at ` parameter. Otherwise, the `at ` parameter defaults as specified for each shape function. + - : Specifies the offset path as the equivalent path of a [CSS basic shape function](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes), such as [`circle()`](/en-US/docs/Web/CSS/basic-shape/circle), [`ellipse()`](/en-US/docs/Web/CSS/basic-shape/ellipse), [`inset()`](/en-US/docs/Web/CSS/basic-shape/inset), {{cssxref("path","path()")}}, or [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon). For example, if the `` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at ` parameter, if the `` is omitted, the position defaults to `center` unless the element has an {{cssxref("offset-position")}} specified. In this case, the `offset-position` value is used for the `at ` parameter. -- {{cssxref("box_value","<coord-box>")}} +- [``](/en-US/docs/Web/CSS/box-edge#values) - : Specifies the size information of the reference box containing the path. The reference box is derived from the element that establishes the containing block for this element. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. From 78af25b001420d22acd53672cb430d1af45cbc59 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 16 Aug 2023 22:43:43 -0400 Subject: [PATCH 10/10] fixes review comments --- files/en-us/web/css/box-edge/index.md | 24 ++++++++++++------------ files/en-us/web/css/offset-path/index.md | 20 +++++++++----------- 2 files changed, 21 insertions(+), 23 deletions(-) diff --git a/files/en-us/web/css/box-edge/index.md b/files/en-us/web/css/box-edge/index.md index 206e79f82621c59..e3878848f731d60 100644 --- a/files/en-us/web/css/box-edge/index.md +++ b/files/en-us/web/css/box-edge/index.md @@ -13,12 +13,12 @@ The box-edge keywords are the components of, but not limited to, the data types ## Syntax -```css - = content-box | padding-box | border-box /* also referred to as */ - = | margin-box /* also referred to as */ +```plain + = content-box | padding-box | border-box /* the three values */ + = | margin-box /* the values */ = | fill-box | stroke-box = | fill-box | stroke-box | view-box - = | fill-box | stroke-box | view-box + = | fill-box | stroke-box | view-box ``` ### Values @@ -27,15 +27,15 @@ A `` can be of the type ``, ``, ``, - `` - - : Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's content, padding, and border. It excludes the margin area. This value type is used for the {{cssxref("background-clip")}} and {{cssxref("overflow-clip-margin")}} properties. + - : Refers to the rectangular box generated for an element as seen by a user on a web page. It includes the element's content, padding, and border. Also referred to as ``, this value excludes the margin area. This value type is used for the {{cssxref("background-clip")}} and {{cssxref("overflow-clip-margin")}} properties. - `` - - : Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. This value type is used for the {{cssxref("shape-outside")}} property. + - : Refers to the space occupied by an element, including its content, padding, border, and margin. This value type is used for layout and positioning purposes. Also referred to as ``, this value type is used for the {{cssxref("shape-outside")}} property. - `` - - : Refers to the area within the layout box that is used to render the content visually. This includes the area where the element's background and borders are painted. It excludes the margin area. + - : Refers to the area within the layout box that is used to visually render the content. This includes the area where the element's background and borders are painted. As an element's paintable area does not include its margins, this value excludes `margin-box`. - `` @@ -50,19 +50,19 @@ The `` keywords are defined as follows: - `content-box` - - : Refers to the edge of the content area of the box. In SVG, this value is treated as `fill-box`. It is the innermost box and contains the actual content, such as text, images, or other HTML elements. + - : Refers to the outer edge of the box's content area. . The content box is the innermost box. The content area contains the actual content, such as text, images, or other HTML elements. In SVG, this value is treated as `fill-box`. - `padding-box` - - : Refers to the edge of the padding of the box. If there is no padding on a side, then the value is the same as `content-box`. In SVG, `padding-box` is treated as `fill-box`. The padding area surrounds the content area. + - : Refers to the outer edge of the padding of the box. If there is no padding on a side, then the value is the same as `content-box`. In SVG, `padding-box` is treated as `fill-box`. The padding area surrounds the content area, starting at the outer edge of the content box. - `border-box` - - : Refers to the edge of the border of the box. If there is no border on a side, then the value is the same as `padding-box`. In SVG, `border-box` is treated as `stroke-box`. The border area surrounds the padding area. + - : Refers to the outer edge of the border of the box. If there is no border on a side, then the value is the same as `padding-box`. In SVG, `border-box` is treated as `stroke-box`. The border area surrounds the padding area, starting at the outer edge of the padding box. - `margin-box` - - : Refers to the edge of the margin of the box. If there is no margin on a side, then the value is the same as `border-box`. In SVG, `margin-box` is treated as `stroke-box`. + - : Refers to the outer edge of the margin of the box. If there is no margin on a side, then the value is the same as `border-box`. In SVG, `margin-box` is treated as `stroke-box`. - `fill-box` @@ -74,7 +74,7 @@ The `` keywords are defined as follows: - `view-box` - - : Refers to the nearest SVG viewport element's origin box. The origin box is a rectangle with the width and height of the initial SVG user coordinate system established by the {{svgattr("viewBox")}} attribute for that element. The origin box is positioned such that its top left corner is anchored at the coordinate system origin. In CSS, `view-box` treated as `border-box`. + - : Refers to the nearest SVG viewport element's origin box. The origin box is a rectangle with the width and height of the initial SVG user coordinate system established by the {{svgattr("viewBox")}} attribute for that element. The origin box is positioned such that its top left corner is anchored at the [coordinate system](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems) origin. In CSS, `view-box` is treated as `border-box`. > **Note:** When the SVG viewport is not anchored at the origin, the origin box does not correspond to the SVG viewport. ## Specifications diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 5e514e67b59d473..4e56213be71df9a 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.offset-path {{CSSRef}} -The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a path for an element to follow and the element's positioning within the path's parent container or SVG coordinate system. The path is a line, a curve, or geometrical shape along which the element gets positioned or moves. +The **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a path for an element to follow and determines the element's positioning within the path's parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves. The `offset-path` property is used in combination with the {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}}, and {{cssxref("offset-anchor")}} properties to control the position and orientation of the element along a path. @@ -51,7 +51,7 @@ offset-path: unset; ### Values -The `offset-path` takes as it's value an `` value, a `` value, or both or the `none` keyword. The `` value is a {{cssxref("ray","ray()")}}, a {{cssxref("url","url()")}}, or a [``](/en-US/docs/Web/CSS/basic-shape) value. +The `offset-path` takes as it's value an `` value, a [``](/en-US/docs/Web/CSS/box-edge#values) value, or both, or the `none` keyword. The `` value is a {{cssxref("ray","ray()")}}, a {{cssxref("url","url()")}}, or a [``](/en-US/docs/Web/CSS/basic-shape) value. - `none` @@ -75,7 +75,7 @@ The `offset-path` takes as it's value an `` value, a `` - [``](/en-US/docs/Web/CSS/box-edge#values) - - : Specifies the size information of the reference box containing the path. The reference box is derived from the element that establishes the containing block for this element. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. + - : Specifies the size information of the [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box) containing the path. The reference box is derived from the element that establishes the containing block for this element. This parameter is optional. If not specified, the default value is `border-box`. In SVG, the value is treated as `view-box`. If `ray()` or `` is used to define the offset path, the `` value provides the reference box for the ray or the ``, respectively. If `url()` is used to define the offset path, the `` value provides the viewport and user coordinate system for the shape element, with the origin (`0 0`) at the top left corner and size being `1px`. ## Description @@ -93,9 +93,9 @@ Early versions of the spec called this property `motion-path`. It was changed to ## Examples -### Creating an offset-path using coord-box positioning +### Creating an offset-path using box-edge positioning -This example shows the how `` parameter of `offset-path` works in with {{cssxref("border-radius")}}. +This example demonstrates using various `` values in the `offset-path` property. ```html hidden
@@ -150,17 +150,17 @@ body { } ``` -In this example, the margin, border, and padding have been purposely been given large values to demonstrate the placement of the blue, green, and red boxes on their respective `coord-box` edges: border-box, padding-box, and content-box. +In this example, the margin, border, and padding have been purposely given large values to demonstrate the placement of the blue, green, and red rectangles on their respective `` edges: border-box, padding-box, and content-box. -![Box model showing the placement of the blue, red, and green boxes on the border-box, padding-box, and context-box, respectively, by using the coord-box value in the offset-path property.](offset-path-coord-box.png) +![The blue rectangle sits on the outer edge of the border box, the green rectangle is on the inner border edge, which is the outer edge of the padding box, and the red rectangle is on the outer edge of the content box.](offset-path-coord-box.png) #### Result -{{EmbedLiveSample('Creating an offset-path using coord-box positioning', '100%', 400)}} +{{EmbedLiveSample('Creating an offset-path using box-edge positioning', '100%', 400)}} ### Animating an element with offset-path -The `offset-path` properties in the CSS code sample defines a path that is identical to the `` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney. +In the CSS code in this example, the `offset-path` property defines a path that is identical to the `` element in the SVG. The path of the SVG animation is a line drawing of a house with a chimney. #### SVG @@ -209,8 +209,6 @@ The top and bottom halves of the scissors would appear in the top left of the ca ``` -#### CSS - ```css .scissorHalf { offset-path: path(