+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ z:0px
+ 
+
+```
+
+```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 `+ 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.
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. 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-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.
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
++ 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___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
++ 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
++ 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
++ 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
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..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
@@ -14,11 +14,71 @@ 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
+
+ + 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/shared-assets/images/examples/star-shape.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
+
+ + 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/shared-assets/images/examples/star-shape.png);
+ shape-margin: 20px;
+}
+```
+
+{{EmbedLiveSample("margin", "", "340px")}}
## CORS compatibility
@@ -32,9 +92,40 @@ 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.
-{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}
+```html hidden 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.5 sans-serif;
+}
+
+img {
+ float: left;
+ shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-red-20.png);
+ shape-image-threshold: 0.2;
+}
+```
+
+{{EmbedLiveSample("threshold", "", "340px")}}
## Using images with generated content
@@ -42,7 +133,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/shared-assets/images/examples/star-shape.png);
+ shape-image-threshold: 0.3;
+}
+```
+
+{{EmbedLiveSample("generated-content", "", "420px")}}
## Creating shapes using a gradient
@@ -52,10 +174,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: 400px;
+ 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.
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
++ 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. +
+` 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
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
`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_T
## Syntax
```plain
- = |
+ =
```
### Values
@@ -21,8 +21,9 @@ The value is either of the following:
- [``](/en-US/docs/Web/CSS/url_function)
- : The `url()` function accepts only a URL literal string (with or without quotes).
-- ``
- - : This function can accept a URL string or a [CSS variable](/en-US/docs/Web/CSS/var).
+
+> [!NOTE]
+> The specification defines an alternative function called `src()` that accepts a URL string or a [CSS variable](/en-US/docs/Web/CSS/var). But no web browser has implemented the function yet.
## Specifications
diff --git a/files/en-us/web/html/attributes/rel/noopener/index.md b/files/en-us/web/html/attributes/rel/noopener/index.md
index 7b6556416bb04be..c5e7b56fd820ceb 100644
--- a/files/en-us/web/html/attributes/rel/noopener/index.md
+++ b/files/en-us/web/html/attributes/rel/noopener/index.md
@@ -16,7 +16,7 @@ This is especially useful when opening untrusted links, in order to ensure they
Note that when `noopener` is used, nonempty target names other than `_top`, `_self`, and `_parent` are all treated like `_blank` in terms of deciding whether to open a new window/tab.
> [!NOTE]
-> Setting `target="_blank"` on `` elements now implicitly provides the same `rel` behavior as setting `rel="noopener"` which does not set `window.opener`. See [browser compatibility](/en-US/docs/Web/HTML/Element/a#browser_compatibility) for support status.
+> Setting `target="_blank"` on ``, `` and `
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 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 +
+
+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
+One
+ Two
+Multiple values for display
+ +
+
+
+Item One
+ Item Two
+ Item Three
+The first example is a block element with flex children.
+ +
+
+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
+Item One
+ Item Two
+ Item Three
++ 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. diff --git a/files/en-us/web/css/font-synthesis-position/index.md b/files/en-us/web/css/font-synthesis-position/index.md index a0dc032626c201c..7a028f38e806cde 100644 --- a/files/en-us/web/css/font-synthesis-position/index.md +++ b/files/en-us/web/css/font-synthesis-position/index.md @@ -2,10 +2,12 @@ title: font-synthesis-position slug: Web/CSS/font-synthesis-position page-type: css-property +status: + - experimental browser-compat: css.properties.font-synthesis-position --- -{{CSSRef}} +{{CSSRef}}{{SeeCompatTable}} The **`font-synthesis-position`** [CSS](/en-US/docs/Web/CSS) property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using {{cssxref("font-variant-position")}} to set the positions. diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md index 9591914bc22b3e2..2f2b7ecb5fb3f9e 100644 --- a/files/en-us/web/css/gradient/conic-gradient/index.md +++ b/files/en-us/web/css/gradient/conic-gradient/index.md @@ -53,7 +53,7 @@ conic-gradient( - : An {{Glossary("interpolation")}} hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops. > [!NOTE] -> Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](/en-US/docs/Web/SVG/Tutorial/Gradients). +> Rendering of color stops in conic gradients follows the same rules as [color stops in linear gradients](/en-US/docs/Web/CSS/gradient/linear-gradient#composition_of_a_linear_gradient). ## Description diff --git a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md index 8898496c37d1a0a..a737920c6420cd6 100644 --- a/files/en-us/web/css/gradient/repeating-conic-gradient/index.md +++ b/files/en-us/web/css/gradient/repeating-conic-gradient/index.md @@ -41,7 +41,7 @@ repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg) - : An {{Glossary("interpolation")}} hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops. > [!NOTE] -> Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](/en-US/docs/Web/SVG/Tutorial/Gradients). +> Rendering of color stops in repeating conic gradients follows the same rules as [color stops in linear gradients](/en-US/docs/Web/CSS/gradient/linear-gradient#composition_of_a_linear_gradient). ## Description diff --git a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md index 67a481856351f11..11c70ecbce614df 100644 --- a/files/en-us/web/css/gradient/repeating-linear-gradient/index.md +++ b/files/en-us/web/css/gradient/repeating-linear-gradient/index.md @@ -65,7 +65,7 @@ repeating-linear-gradient(in hsl longer hue, blue, red 50px) - : The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops. > [!NOTE] -> Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](/en-US/docs/Web/SVG/Tutorial/Gradients). +> Rendering of color stops in repeating linear gradients follows the same rules as [color stops in linear gradients](/en-US/docs/Web/CSS/gradient/linear-gradient#composition_of_a_linear_gradient). ### Formal syntax diff --git a/files/en-us/web/css/url_value/index.md b/files/en-us/web/css/url_value/index.md index 2af6102d2d442ce..8e55e6883c83a03 100644 --- a/files/en-us/web/css/url_value/index.md +++ b/files/en-us/web/css/url_value/index.md @@ -12,7 +12,7 @@ The **`