From 7202e7c245de2af81650d7c3133df1ea7ce20c42 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 11:43:45 +0100 Subject: [PATCH 1/9] chore(css): Move CSS examples - Basic shapes with shape-outside --- .../web/css/css_shapes/basic_shapes/index.md | 242 +++++++++++++++++- 1 file changed, 235 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md index 9141a813997492d..0a792c66afb0619 100644 --- a/files/en-us/web/css/css_shapes/basic_shapes/index.md +++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md @@ -80,11 +80,81 @@ The above rules can therefore also be written as: In the example below we have an `inset()` shape used to pull content over the floated element. Change the offset values to see how the shape changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} +```html live-sample___inset +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___inset +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + width: 150px; + height: 100px; + shape-outside: inset(20px 50px 10px 0 round 50px); + background-color: rebeccapurple; + border: 2px solid black; + border-radius: 10px; + margin: 20px; + padding: 20px; +} +``` + +{{EmbedLiveSample("inset", "", "250px")}} You can also add a box value as an alternative reference box. In the example below, try changing the reference box from `margin-box` to `border-box`, `padding-box`, or `content-box` to see how the reference box used as the starting point changes before offsets are calculated. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}} +```html hidden live-sample___inset-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___inset-box +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + width: 150px; + height: 100px; + shape-outside: inset(20px 50px 10px 0 round 50px) margin-box; + background-color: rebeccapurple; + border: 2px solid black; + border-radius: 10px; + margin: 20px; + padding: 20px; +} +``` + +{{EmbedLiveSample("inset-box", "", "250px")}} You can also create rectangles based on distances from the top and left edges of the reference box with the [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) function, or by width and height with the [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) function; both of these also support optional rounded corners. @@ -100,13 +170,74 @@ The second argument is a `position`, which accepts a one- or two-keyword [`` means the radius is `125px`. The position value is set to `30%`, which is `30%` from the left and at the default vertical `center`. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}} +```html live-sample___circle +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle +body { + font: 1.2em sans-serif; +} + +img { + float: left; + shape-outside: circle(50% at 30%); + margin: 20px; +} +``` + +{{EmbedLiveSample("circle", "", "250px")}} Play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`. The below example combines generated content with a `circle()` function that uses the keywords `top left` for position. This creates a quarter circle shape in the top left corner of the page for text to flow around. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}} +```html live-sample___circle-generated +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle-generated +body { + font: 1.2em sans-serif; +} + +.box::before { + content: ""; + float: left; + width: 250px; + height: 250px; + shape-outside: circle(50% at top left); +} +``` + +{{EmbedLiveSample("circle-generated", "", "300px")}} ### The shape will be clipped by the margin box @@ -127,11 +258,72 @@ An ellipse is a squashed circle. As such, the [`ellipse()`](/en-US/docs/Web/CSS/ These may then be followed by one or two `` values, as with `circle()`, to define the location of the center of the ellipse. In the example below, we have an ellipse with an `x` radius of `40%`, a `y` radius of `50%` and the `` set to `left`. This means that the center of the ellipse is at the center of the left edge of the reference box. This creates a half ellipse shape around which the text will wrap. You can change these values to see how the ellipse changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} +```html live-sample___ellipse +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___ellipse +body { + font: 1.2em sans-serif; +} +.shape { + float: left; + shape-outside: ellipse(40% 50% at left); + margin: 20px; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample("ellipse", "", "300px")}} The keyword values of `closest-side` and `farthest-side` are useful in creating a quick ellipse based on the size of the floated element reference box. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} +```html hidden live-sample___ellipse-keywords +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___ellipse-keywords +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + shape-outside: ellipse(closest-side farthest-side at 30%); + margin: 20px; + width: 100px; + height: 140px; +} +``` + +{{EmbedLiveSample("ellipse-keywords", "", "250px")}} ## polygon() @@ -139,7 +331,43 @@ The [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon) function is more comp The example below creates a shape for text to follow using the `polygon()` function. Try changing the coordinate values to see how the shape changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} +```html hidden live-sample___polygon +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___polygon +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + shape-outside: polygon( + 0px 0px, + 0px 189px, + 100.48% 94.71%, + 200px 120px, + 80.67% 37.17% + ); + width: 200px; + height: 200px; +} +``` + +{{EmbedLiveSample("polygon", "", "250px")}} To create even more complex shapes, you can define the outline of any shape with the [`path()`](/en-US/docs/Web/CSS/basic-shape/path) or [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) functions. From fc7f718d1a85db3b44a534c5e01562f990fc10ef Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 12:00:44 +0100 Subject: [PATCH 2/9] chore(css): Move CSS examples - Shapes from box values --- .../css/css_shapes/from_box_values/index.md | 191 +++++++++++++++++- 1 file changed, 186 insertions(+), 5 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 2678f28b983e0ab..c285b52019365c5 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 @@ -31,7 +31,39 @@ The `margin-box` is the shape defined by the outside margin edge and includes th In the example below, we have a circular purple item which is a {{htmlelement("div")}} with a height, width, and background color. The `border-radius` property has been used to create a circle by setting `border-radius: 50%`. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it. -{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}} +```html live-sample___margin-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___margin-box +body { + font: 1.2em sans-serif; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: margin-box; +} +``` + +{{EmbedLiveSample("margin-box", "", "200px")}} ### border-box @@ -39,19 +71,124 @@ The `border-box` value is the shape defined by the outside border edge. This sha 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)}} +```html hidden live-sample___border-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___border-box +body { + font: 1.2em sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("border-box", "", "240px")}} ### padding-box The `padding-box` value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then `padding-box` is the same as `content-box`. -{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}} +```html hidden live-sample___padding-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___padding-box +body { + font: 1.2em / 1.2 sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: padding-box; +} +``` + +{{EmbedLiveSample("padding-box", "", "260px")}} ### content-box 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)}} +```html hidden live-sample___content-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___content-box +body { + font: 1.2em / 1.2 sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: content-box; +} +``` + +{{EmbedLiveSample("content-box", "", "250px")}} ## When to use box values @@ -59,6 +196,50 @@ Using box values is a simple way to create shapes; however, this is by nature on 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)}} +```html live-sample___bottom-margin-box +
+
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___bottom-margin-box +body { + font: 1.2em / 1.5 sans-serif; +} + +.box { + text-align: justify; +} + +.shape-left, +.shape-right { + height: 100px; + width: 100px; +} + +.shape-left { + margin: 0 20px 20px 0; + border-bottom-right-radius: 100%; + float: left; + shape-outside: margin-box; +} +.shape-right { + margin: 0 20px 20px; + border-bottom-left-radius: 100%; + float: right; + shape-outside: margin-box; +} +``` + +{{EmbedLiveSample("bottom-margin-box", "", "240px")}} For more complex shapes, you will need to use one of the [basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) as a value, or define your shape from an image as covered in other guides in this section. From 78d91b057f4f9e19deb7410ebd4dc15c16d799e4 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 12:24:38 +0100 Subject: [PATCH 3/9] chore(css): Move CSS examples - Overview of shapes --- .../css_shapes/overview_of_shapes/index.md | 245 +++++++++++++++++- 1 file changed, 238 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md index abb0ef00316ec9e..d9b838ec9eefaf9 100644 --- a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md +++ b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md @@ -26,7 +26,37 @@ The `shape-outside` property allows us to define a shape. It takes a variety of In the following example, an image is floated to the left. We apply the `shape-outside` property with a `circle(50%)` value. The result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image. -{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} +```html live-sample___circle +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: circle(50%); +} +``` + +{{EmbedLiveSample("circle", "", "280px")}} Here we used the {{cssxref("basic-shape/circle", "circle()")}} function, which is supported across all modern browsers. If we used a newer shape type that doesn't have full support, users of non-supporting browsers would see the content flowing around the sides of a rectangular, due to the image being floated. Shapes are a visual progressive enhancement. @@ -60,7 +90,41 @@ Shapes can also be created around the box value. Therefore, you could create you In the example below, you can change the value `border-box` to any of the other allowed values to see how the shape moves closer or further away from the box. -{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}} +```html live-sample___box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___box +body { + font: 1.2em / 1.4 sans-serif; +} + +.shape { + background-color: rebeccapurple; + height: 150px; + width: 150px; + padding: 20px; + margin: 20px; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("box", "", "320px")}} To explore the box values in more detail, see our guide covering [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values). @@ -72,7 +136,37 @@ Note that images used in this way must be [CORS compatible](/en-US/docs/Web/HTTP In this next example, we have an image with a fully transparent area, and we are using an image as the URL value for `shape-outside`. The shape is created around the opaque area — the image of the balloon. -{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}} +```html live-sample___image +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___image +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/round-balloon.png); +} +``` + +{{EmbedLiveSample("image", "", "280px")}} #### `shape-image-threshold` @@ -80,7 +174,49 @@ The `shape-image-threshold` property is used to set the threshold of image trans You can see the threshold in action if we use a gradient as the image on which to define our shape. In the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected. -{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}} +```html live-sample___threshold +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___threshold +body { + font: 1.2em / 1.4 sans-serif; +} + +.shape { + float: left; + width: 200px; + height: 200px; + background-image: linear-gradient( + 45deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-outside: linear-gradient( + 45deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-image-threshold: 0.4; +} +``` + +{{EmbedLiveSample("threshold", "", "280px")}} To learn more about creating shapes from images, see the [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images) guide. @@ -90,7 +226,37 @@ The {{cssxref("shape-margin")}} property adds a margin to `shape-outside`. This In the example below we have added a `shape-margin` to a basic shape. Change the margin to push the text further away from the path the shape would take by default. -{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}} +```html live-sample___shape-margin +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___shape-margin +body { + font: 1.2em / 1.4 sans-serif; +} +img { + float: left; + shape-outside: circle(50%); + shape-margin: 5px; +} +``` + +{{EmbedLiveSample("shape-margin", "", "280px")}} ## Using Generated Content as the floated item @@ -98,7 +264,41 @@ In the examples above, we have used images or a visible element to define the sh In this example, we use generated content to insert an element with a height and width of 150px. We can then use basic shapes, box values, or even the alpha channel of an image to create a shape for the text to wrap around. -{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}} +```html live-sample___generated-content +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___generated-content +body { + font: 1.2em sans-serif; +} + +.box::before { + content: ""; + display: block; + height: 150px; + width: 150px; + padding: 20px; + margin: 20px; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("generated-content", "", "260px")}} ## Relationship to `clip-path` @@ -106,7 +306,38 @@ The basic shapes and box values used to create shapes are the same as those used The image below is a square image with a blue background. We have defined a shape using `shape-outside: ellipse(40% 50%);` and also used `clip-path: ellipse(40% 50%);` to clip away the same area that we used to define the shape. -{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} +```html live-sample___clip-path +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___clip-path +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: ellipse(40% 50%); + clip-path: ellipse(40% 50%); +} +``` + +{{EmbedLiveSample("clip-path", "", "280px")}} ## Developer Tools for Shapes From c41545c6ec74c1fdfc137044cc1dea419a0f47c3 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 13:56:36 +0100 Subject: [PATCH 4/9] chore(css): Move CSS examples - Shapes from images --- .../css_shapes/shapes_from_images/index.md | 213 +++++++++++++++++- 1 file changed, 207 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/css_shapes/shapes_from_images/index.md b/files/en-us/web/css/css_shapes/shapes_from_images/index.md index 9572afdd43a3235..1d17ffe4e9d2452 100644 --- a/files/en-us/web/css/css_shapes/shapes_from_images/index.md +++ b/files/en-us/web/css/css_shapes/shapes_from_images/index.md @@ -14,11 +14,72 @@ To use an image for creating a shape, the image needs to have an Alpha Channel, In the example below, there is an image of a star with a solid red area and an area that is fully transparent. The path to the image file is used as the value for the {{cssxref("shape-outside")}} property. The content now wraps around the star shape. -{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}} +```html live-sample___simple-example +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___simple-example +body { + font: 1.2em / 1.5 sans-serif; +} +img { + float: left; + shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); +} +``` + +{{EmbedLiveSample("simple-example", "", "340px")}} You can use {{cssxref("shape-margin")}} to move the text away from the shape, giving a margin around the created shape and the text. -{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}} +```html hidden live-sample___margin +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___margin +body { + font: 1.2em / 1.5 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-image-threshold: 0.2; + shape-margin: 20px; +} +``` + +{{EmbedLiveSample("margin", "", "340px")}} ## CORS compatibility @@ -34,7 +95,38 @@ The {{cssxref("shape-image-threshold")}} property enables the creation of shapes In the example below I am using a similar image to the initial example, however, in this image the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.3` then I see the shape, if I set it to something smaller than `0.2` I do not get the shape. -{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}} +```html hidden live-sample___threshold +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___threshold +body { + font: 1.2em / 1.5 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-image-threshold: 0.2; +} +``` + +{{EmbedLiveSample("threshold", "", "340px")}} ## Using images with generated content @@ -42,7 +134,38 @@ In the above example, I have both used the image as the value of {{cssxref("shap You do need something to float, but that could be some generated content as in the below example. I am floating generated content and using a larger star image to shape my content without displaying any image on the page. -{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}} +```html live-sample___generated-content +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___generated-content +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + width: 400px; + height: 300px; + shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("generated-content", "", "420px")}} ## Creating shapes using a gradient @@ -52,10 +175,88 @@ The next example uses generated content. The content has been floated, giving it You could also try removing the background image completely, thus using the gradient purely to create the shape and not displaying it on the page at all. -{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}} +```html live-sample___gradient +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___gradient +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + height: 250px; + width: 400px; + background-image: linear-gradient( + to bottom right, + rebeccapurple, + transparent + ); + shape-outside: linear-gradient(to bottom right, rebeccapurple, transparent); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("gradient", "", "400px")}} The next example uses a radial gradient with an ellipse, once again using a transparent part of the gradient to create the shape. -{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}} +```html hidden live-sample___radial-gradient +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___radial-gradient +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + height: 250px; + width: 00px; + background-image: radial-gradient( + ellipse closest-side, + rebeccapurple, + blue 50%, + transparent + ); + shape-outside: radial-gradient( + ellipse closest-side, + rebeccapurple, + blue 50%, + transparent + ); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("radial-gradient", "", "400px")}} You can experiment directly in these live examples to see how changing the gradient will change the path of your shape. From b8b95e1862c0261393340199f76f7d937abf4efa Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 14:04:02 +0100 Subject: [PATCH 5/9] chore(css): Move CSS examples - CSS transforms --- files/en-us/web/css/css_transforms/index.md | 643 +++++++++++++++++++- 1 file changed, 639 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index 31dfcf04cbcd533..77dca67a2b67d28 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -13,9 +13,646 @@ The **CSS transforms** module defines how elements styled with CSS can be transf ## CSS transforms in action -Use the sliders in the frame below to modify the translation, rotation, scale, and skew CSS transform properties of the cube in 3D space. As you move the cube through 3D space, notice the way it interacts with the element labelled `z:0px`, which is located at the 3D position `(0, 0, 0)`. +Use the sliders in the example below to modify the translation, rotation, scale, and skew CSS transform properties of the cube in 3D space. As you move the cube through 3D space, notice the way it interacts with the element labelled `z:0px`, which is located at the 3D position `(0, 0, 0)`. -{{EmbedGHLiveSample("css-examples/modules/transforms.html", '100%', 900)}} +```html hidden live-sample___transforms +
+
+ + Transform settings + + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
z:0px
+
+
+
+
+``` + +```css hidden live-sample___transforms +#allTransformFieldset { + border: none; + padding: 0; + margin-bottom: 4px; + accent-color: blue; /* or any color */ + font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +#allTransformFieldset > legend { + margin-bottom: 4px; +} + +fieldset { + margin: 0; +} + +legend { + font-weight: bold; + padding: 0; +} + +#fieldsetSection { + display: flex; + flex-wrap: wrap; + align-items: start; + gap: 8px; +} + +#outputSection { + width: 100%; + min-height: 400px; + background: linear-gradient(skyblue, khaki); + display: flex; + justify-content: center; + align-items: center; + position: relative; + overflow: clip; +} + +#outputContainer { + position: absolute; + width: 100%; + height: 100%; + perspective: 200px; + display: flex; + justify-content: center; + align-items: center; + transform-style: preserve-3d; + pointer-events: none; +} + +#z0 { + width: 50px; + height: 50px; + background: linear-gradient( + to right bottom, + rgb(223 223 223), + rgb(190 190 190) + ); + transform: translateZ(0px); + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + color: black; + border-radius: 50%; + outline: 1px solid rgb(0 0 0 / 0.35); + pointer-events: all; +} + +#perspectiveDot { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: rgb(240 0 0 / 0.5); + transform: translate3d(-2px, -2px, 0px); + position: absolute; +} + +#cube { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: all 0.075s ease-out; + position: absolute; + pointer-events: all; +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: white; +} + +.front { + background: rgb(90 90 90 / 0.7); + transform: translateZ(50px); +} + +.back { + background: rgb(0 210 0 / 0.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgb(210 0 0 / 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgb(0 0 210 / 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgb(210 210 0 / 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgb(210 0 210 / 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.transformFieldset { + margin: 0; +} + +.controlsContainer { + display: flex; + flex-direction: column; + align-items: start; + gap: 4px; +} + +.controlsContainer { + width: 100%; +} + +.controlsContainer > div { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +.controlsContainer > div > label { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +button { + font-size: 18px; + border-radius: 50%; + border: #ccc solid 1px; + padding: 0; + width: 26px; + height: 26px; + margin-left: 4px; +} + +input[type="range"] { + width: 172px; +} + +output { + width: 3em; +} +``` + +```js hidden live-sample___transforms +allTransformFieldset + .querySelectorAll("input[type='range']") + .forEach((rangeInput) => { + // Event listeners for when the range inputs change + rangeInput.addEventListener("input", (el) => { + updateTransform(); + }); + + // Reset the relevant transform setting when the range input is double clicked + rangeInput.addEventListener("dblclick", (el) => { + resetInput(el.target); + updateTransform(); + }); + }); + +// Event listeners for when checkbox inputs change +allTransformFieldset + .querySelectorAll("input[type='checkbox']") + .forEach((checkboxInput) => { + checkboxInput.addEventListener("input", (el) => { + updateTransform(); + }); + }); + +// "Reset All" button event listener +resetAllButton.addEventListener("click", () => { + allTransformFieldset.querySelectorAll("input").forEach((input) => { + resetInput(input); + }); + updateTransform(); +}); + +// Section reset button event listeners +allTransformFieldset + .querySelectorAll(".resetSectionButton") + .forEach((resetSectionButton) => { + resetSectionButton.addEventListener("click", (el) => { + let allRanges = el.target.parentElement.parentElement.querySelectorAll( + "input[type='range']", + ); + allRanges.forEach((range) => { + resetInput(range); + }); + + let allCheckboxes = + el.target.parentElement.parentElement.querySelectorAll( + "input[type='checkbox']", + ); + allCheckboxes.forEach((check) => { + resetInput(check); + }); + + updateTransform(); + }); + }); + +const resetInput = (inputEl) => { + if (!inputEl) { + console.warn(`inputEl \`${inputEl}\` is falsy!`); + console.trace(); + return; + } + + const defaultValue = inputEl.getAttribute("data-default"); + if (inputEl.getAttribute("type") === "checkbox") { + inputEl.checked = defaultValue === "checked"; + } else { + inputEl.value = defaultValue || "0"; + } +}; + +const updateOutputs = () => { + translateXOutput.value = `${parseInt(translateXRange.value)}px`; + translateYOutput.value = `${parseInt(translateYRange.value)}px`; + translateZOutput.value = `${parseInt(translateZRange.value)}px`; + + rotateXOutput.value = `${parseInt(rotateXRange.value)}°`; + rotateYOutput.value = `${parseInt(rotateYRange.value)}°`; + rotateZOutput.value = `${parseInt(rotateZRange.value)}°`; + + scaleXOutput.value = `${parseFloat(scaleXRange.value)}x`; + scaleYOutput.value = `${parseFloat(scaleYRange.value)}x`; + scaleZOutput.value = `${parseFloat(scaleZRange.value)}x`; + + skewXOutput.value = `${parseFloat(skewXRange.value)}°`; + skewYOutput.value = `${parseFloat(skewYRange.value)}°`; + + perspectiveOutput.value = `${parseInt(perspectiveRange.value)}px`; + + perspectiveOriginXOutput.value = `${parseInt(perspectiveOriginXRange.value)}%`; + perspectiveOriginYOutput.value = `${parseInt(perspectiveOriginYRange.value)}%`; +}; + +const updateTransform = () => { + updateOutputs(); + + cube.style.transform = `translate3d(${translateXRange.value}px, + ${translateYRange.value}px, + ${translateZRange.value}px) + rotateX(${rotateXRange.value}deg) + rotateY(${rotateYRange.value}deg) + rotateZ(${rotateZRange.value}deg) + scale3d(${scaleXRange.value}, + ${scaleYRange.value}, + ${scaleZRange.value}) + skewX(${skewXRange.value}deg) + skewY(${skewYRange.value}deg)`; + cube.style.backfaceVisibility = `${backfaceVisibilityCheckbox.checked ? "visible" : "hidden"}`; + + outputContainer.style.perspective = `${perspectiveRange.value}px`; + outputContainer.style.perspectiveOrigin = `${perspectiveOriginXRange.value}% ${perspectiveOriginYRange.value}%`; + + perspectiveDot.style.top = `${perspectiveOriginYRange.value}%`; + perspectiveDot.style.left = `${perspectiveOriginXRange.value}%`; +}; +updateTransform(); +``` + +{{EmbedLiveSample("transforms", "", "850px")}} You can also use the `perspective` slider to modify the [`perspective`](/en-US/docs/Web/CSS/perspective) property of the cube's container, which determines the distance between you and the `z=0` plane. @@ -28,8 +665,6 @@ The cube in the above example is comprised of six `
` elements, all of which > [!NOTE] > The order in which transformations, including 3D rotations, are applied affects the resultant transformation. In the above example, transforms are translated, scaled, rotated, then skewed. The rotations are applied in the order X → Y → Z. -You can [view this example's source on GitHub](https://github.com/mdn/css-examples/blob/main/modules/transforms.html). - ## Reference ### Properties From a35259e9aa4263c611a9ba6338f1d3e435030057 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 14:43:43 +0100 Subject: [PATCH 6/9] chore(css): Move CSS examples - Using CSS transitions --- .../using_css_transitions/index.md | 60 ++++++++++++++----- 1 file changed, 44 insertions(+), 16 deletions(-) diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.md b/files/en-us/web/css/css_transitions/using_css_transitions/index.md index 5f0318d71e73e8e..3b0c40b7867f394 100644 --- a/files/en-us/web/css/css_transitions/using_css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.md @@ -300,28 +300,56 @@ The code renders as follows: Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example. -```html +```html live-sample___js-transitions

Click anywhere to move the ball

+ + ``` -Using JavaScript you can make the effect of moving the ball to a certain position happen: +With CSS, you can smooth the styles applied through JavaScript. Add a transition to the element and any change will happen smoothly: -```js -const f = document.getElementById("foo"); -document.addEventListener( - "click", - (ev) => { - f.style.transform = `translateY(${ev.clientY - 25}px)`; - f.style.transform += `translateX(${ev.clientX - 25}px)`; - }, - false, -); -``` +```css hidden live-sample___js-transitions +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} -With CSS you can make it smooth without any extra effort. Add a transition to the element and any change will happen smoothly: +p { + margin-top: 3em; +} -```css +main { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + max-width: 660px; + height: 400px; + border: 1px solid #ccc; + padding: 20px; +} +``` + +```css live-sample___js-transitions .ball { border-radius: 25px; width: 50px; @@ -334,7 +362,7 @@ With CSS you can make it smooth without any extra effort. Add a transition to th } ``` -{{EmbedGHLiveSample("css-examples/transitions/js-transitions.html", '100%', 500)}} +{{EmbedLiveSample("js-transitions", "", "400px")}} ### Detecting the start and completion of a transition From 29ecc087a4f26390cbb0ed519fee636207d87b58 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 16:56:06 +0100 Subject: [PATCH 7/9] chore(css): Move CSS examples - Using the multi-keyword syntax with CSS display --- .../multi-keyword_syntax_of_display/index.md | 114 +++++++++++++++++- 1 file changed, 110 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md index bf412ce4e88c353..91f373bc877ef2f 100644 --- a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md +++ b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md @@ -29,11 +29,50 @@ As an example, when we use `display: flex` we create a block-level container, wi The live example below has a `` with `display: flex` applied. It has become a block-level box taking up all available space in the inline direction. You can now use `justify-content: space-between` to put this space between the two flex items. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/span-flex.html", '100%', 440)}} +```html live-sample___span-flex + Some text emphasized text +``` + +```css live-sample___span-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex { + border: 5px solid #ccc; + display: flex; + justify-content: space-between; +} +``` + +{{EmbedLiveSample("span-flex")}} It's also possible to create inline flex containers. If you use the single value `inline-flex` you will have an inline-level box with flex children. The children behave in the same way as the flex children of a block-level container. The only thing that has changed is that the parent is now an inline-level box. It therefore behaves like other inline-level things, and doesn't take up the full width (or size in the inline dimension) that a block-level box does. This means that some following text could come up alongside the flex container. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-flex.html", '100%', 440)}} +```html live-sample___inline-flex +
+
One
+
Two
+
+Text following the flex container. +``` + +```css live-sample___inline-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex > div { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.flex { + border: 5px solid #ccc; + display: inline-flex; +} +``` + +{{EmbedLiveSample("inline-flex")}} The same is true when working with grid layout. Using `display: grid` will give you a block-level box, which creates a grid formatting context for the direct children. Using `display: inline-grid` will create an inline-level box, which creates a grid formatting context for the children. @@ -43,7 +82,50 @@ As you can see from the above explanation, the `display` property has considerab This means that instead of setting `display: flex` to create a block-level box with flex children, we use `display: block flex`. Instead of `display: inline-flex` to create an inline-level box with flex children, we use `display: inline flex`. The example below demonstrates these values. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/multi-keyword-flex.html", '100%', 640)}} +```html live-sample___multi-keyword-flex +

Multiple values for display

+ +
+
Item One
+
Item Two
+
Item Three
+
+ +

The first example is a block element with flex children.

+ +
+
Item One
+
Item Two
+
Item Three
+
+The second example is an inline element with flex children. +``` + +```css live-sample___multi-keyword-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex { + border: 5px solid #ccc; + gap: 10px; +} + +.flex > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.flex1 { + display: block flex; +} + +.flex2 { + display: inline flex; +} +``` + +{{EmbedLiveSample("multi-keyword-flex", "", "300px")}} There are mappings for all of the existing values of `display`; the most common ones are listed in the table below. To see a full list take a look at the table found in the [`display` property specification](https://drafts.csswg.org/css-display/#display-value-summary). @@ -149,7 +231,31 @@ This is why `display: flow-root` can be written using the multi-keyword syntax ` The value `display: inline-block` has been around since the early days of CSS. The reason we tend to use it is to allow padding to push inline items away from an element, when creating navigation items for example, or when wanting to add a background with padding to an inline element as in the example below. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-block.html", '100%', 440)}} +```html live-sample___inline-block +

+ This paragraph has a span with padding it is + an inline-block so the padding is contained and pushes the other line boxes + away. +

+``` + +```css live-sample___inline-block +body { + font: 1.2em / 1.5 sans-serif; +} +p { + border: 2px dashed; + width: 300px; +} +.inline-block { + background-color: rgb(0 0 0 / 0.4); + color: #fff; + padding: 10px; + display: inline-block; +} +``` + +{{EmbedLiveSample("inline-block", "", "200px")}} An element with `display: inline-block` however, will also contain floats. It contains everything inside the inline-level box. Therefore `display: inline-block` does exactly what `display: flow-root` does, but with an inline-level, rather than a block-level box. The two-value syntax accurately describes what is happening with this value. In the example above, you can change `display: inline-block` to `display: inline flow-root` and get the same result. From c4d180d594f6a7d2cde501846ff4900e1fa1e7c5 Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 11 Nov 2024 17:41:29 +0100 Subject: [PATCH 8/9] chore(css): Move CSS examples - Fix shared assets URL --- .../css/css_shapes/shapes_from_images/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/css_shapes/shapes_from_images/index.md b/files/en-us/web/css/css_shapes/shapes_from_images/index.md index 1d17ffe4e9d2452..74eaebbfa7a6741 100644 --- a/files/en-us/web/css/css_shapes/shapes_from_images/index.md +++ b/files/en-us/web/css/css_shapes/shapes_from_images/index.md @@ -18,7 +18,7 @@ In the example below, there is an image of a star with a solid red area and an a
A red star + src="https://mdn.github.io/shared-assets/images/examples/star-shape.png" />

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the @@ -39,7 +39,7 @@ body { } img { float: left; - shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); } ``` @@ -51,7 +51,7 @@ You can use {{cssxref("shape-margin")}} to move the text away from the shape, gi

A red star + src="https://mdn.github.io/shared-assets/images/examples/star-shape.png" />

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the @@ -73,7 +73,7 @@ body { img { float: left; - shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); shape-image-threshold: 0.2; shape-margin: 20px; } @@ -99,7 +99,7 @@ In the example below I am using a similar image to the initial example, however,

A red star + src="https://mdn.github.io/shared-assets/images/examples/star-shape.png" />

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the @@ -121,7 +121,7 @@ body { img { float: left; - shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); shape-image-threshold: 0.2; } ``` @@ -160,7 +160,7 @@ body { float: left; width: 400px; height: 300px; - shape-outside: url(https://mdn.github.io/css-examples/shapes/images/star-shape1.png); + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); shape-image-threshold: 0.3; } ``` @@ -240,7 +240,7 @@ body { content: ""; float: left; height: 250px; - width: 00px; + width: 400px; background-image: radial-gradient( ellipse closest-side, rebeccapurple, From c22e6d2e333a4eccaf489e777626a21587d22d3f Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Tue, 26 Nov 2024 12:27:28 +0100 Subject: [PATCH 9/9] chore(css): Fixes following reviewer feedback --- files/en-us/web/css/css_shapes/shapes_from_images/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_shapes/shapes_from_images/index.md b/files/en-us/web/css/css_shapes/shapes_from_images/index.md index 74eaebbfa7a6741..8a62652d585f4a4 100644 --- a/files/en-us/web/css/css_shapes/shapes_from_images/index.md +++ b/files/en-us/web/css/css_shapes/shapes_from_images/index.md @@ -74,7 +74,6 @@ body { img { float: left; shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); - shape-image-threshold: 0.2; shape-margin: 20px; } ``` @@ -93,13 +92,13 @@ DevTools can help you to identify CORS errors. In Chrome the Console will alert The {{cssxref("shape-image-threshold")}} property enables the creation of shapes from areas which are not fully transparent. If the value of `shape-image-threshold` is `0.0` (which is the initial value) then the area must be fully transparent. If the value is `1.0` then it is fully opaque. Values in between mean that you can set a semi-transparent area as the defining area. -In the example below I am using a similar image to the initial example, however, in this image the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.3` then I see the shape, if I set it to something smaller than `0.2` I do not get the shape. +In the example below, the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.2` or greater, then I see the shape, if I set it to something smaller than `0.2` I do not get the shape. ```html hidden live-sample___threshold

A red star + src="https://mdn.github.io/shared-assets/images/examples/star-red-20.png" />

One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the @@ -121,7 +120,7 @@ body { img { float: left; - shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-red-20.png); shape-image-threshold: 0.2; } ```