From 7df39c44f9ee005ead322d4305f08fe761e2a596 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sun, 26 May 2024 22:29:08 -0700 Subject: [PATCH 1/2] CSS update: Shapes from box values --- .../web/css/css_shapes/from_box_values/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_shapes/from_box_values/index.md b/files/en-us/web/css/css_shapes/from_box_values/index.md index 5af5548ae917075..ceed861f15c8bd2 100644 --- a/files/en-us/web/css/css_shapes/from_box_values/index.md +++ b/files/en-us/web/css/css_shapes/from_box_values/index.md @@ -6,16 +6,16 @@ page-type: guide {{CSSRef}} -A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this. +A straightforward way to create a shape is to use a value from the [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model). This article explains how to do this. -The [box values](https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values) allowable as a shape value are: +The {{cssxref("box-edge")}} box values allowable as a shape value are: - `content-box` - `padding-box` - `border-box` - `margin-box` -The `border-radius` values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape. +The `border-radius` values are also supported. This means you can have something on your page with a curved border, and your shape can follow the created shape. ## CSS box model @@ -23,7 +23,7 @@ The values listed above correspond to the various parts of the CSS Box Model. A ![The Box Model consists of the margin, border, padding and content boxes.](box-model.png) -By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow. +By using box values for shapes, we can wrap our content around the edges defined by these values. In each of the examples below, I am using an element that has padding, a border, and a margin defined so that you can see the different ways in which content will flow. ### margin-box @@ -35,9 +35,9 @@ In the example below, we have a circular purple item which is a {{htmlelement("d ### border-box -The `border-box` value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case it will be the same as `padding-box`, the shape defined by the outside padding edge. +The `border-box` value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case, it will be the same as `padding-box`, the shape defined by the outside padding edge. -In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it. +In the example below, you can see how the text now follows the line created by the border. Change the border size, and the content will follow it. {{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}} @@ -49,7 +49,7 @@ The `padding-box` value defines the shape enclosed by the outside padding edge. ### content-box -The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here. +The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the `border-radius` less the `border-width` and `padding`, or `0`, whichever is larger. This means that it is impossible to have a negative value here. {{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}} @@ -57,7 +57,7 @@ The `content-box` value defines the shape enclosed by the outside content edge. Using box values is a simple way to create shapes; however, this is by nature only going to work with very simple shapes that can be defined using the well-supported `border-radius` property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it. -You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text. +With just this basic technique, you can create some interesting effects. In my final example of this section, I have floated two elements left and right, giving each a border radius of 100% in the direction closest to the text. {{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}} From f7ac5ae4c9f94dccf2be365e0e65087dc47f6cdc Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 27 May 2024 08:24:11 -0700 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/web/css/css_shapes/from_box_values/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_shapes/from_box_values/index.md b/files/en-us/web/css/css_shapes/from_box_values/index.md index ceed861f15c8bd2..b5993705bc6d66d 100644 --- a/files/en-us/web/css/css_shapes/from_box_values/index.md +++ b/files/en-us/web/css/css_shapes/from_box_values/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -A straightforward way to create a shape is to use a value from the [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model). This article explains how to do this. +A straightforward way to create a shape is to use a value from the [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model) module. This article explains how to do this. The {{cssxref("box-edge")}} box values allowable as a shape value are: @@ -15,7 +15,7 @@ The {{cssxref("box-edge")}} box values allowable as a shape value are: - `border-box` - `margin-box` -The `border-radius` values are also supported. This means you can have something on your page with a curved border, and your shape can follow the created shape. +The {{cssxref("border-radius")}} values are also supported. This means you can give an element a curved border, and flow your content around the created shape. ## CSS box model