Css shape image threshold

Shape Image Threshold

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.

The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.

Any pixels whose alpha component’s value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries.
For example, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque.

div> p class="mt:0"> The shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside. p> div class="shape-image-threshold:0 flex float:left w:240 h:120 bg:url('/images/logo.svg')|no-repeat|top|left/contain shape-outside:url('/images/logo.svg') shape:25"> div> p class="mt:0"> Any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries.br> For example, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. p> div>

div class="shape-image-threshold:$(value)">. div>

Master supports native CSS variables and functions, just add var(—key) or use shorthand $(key) for variables.

You can also use calc(expression) , env(expression) and other CSS functions if the property supports it.

To learn more, see the Functions documentation.

div class="shape-image-threshold:0.2:hover">. div>

Master supports all native CSS selectors, just add :hover , :disabled , chaining, combinators and other CSS selectors as usual.

To learn more, see the Selectors documentation.

div class="shape-image-threshold:0.2@sm">. div>

Responsive breakpoints can be applied to all styles. Some available breakpoints are 3xs , 2xs , xs , sm , md , lg , xl , 2xl , 3xl , 4xl . Arbitrary breakpoints can be specified through comparison operators > , >= , < ,

To learn more, see the Breakpoints documentation.

div class="shape-image-threshold:0.2@print">. div>

Master supports media types like print , screen , speech , all , and other media queries.

To learn more, see the Media Queries documentation.

div class="shape-image-threshold:0.2@dark">. div>

Master uses the selector html.dark to support color schemes. Now, you can easily fine-tune your style for the color schemes.

To learn more, see the Color Schemes documentation.

.font\:heavy  font-weight: 900 > @media print  .hide\@print  display: none > > @media (min-width:1024px)  .font\:24\@md  font-size: 1.5rem > >

Источник

Overview of shapes

The CSS Shapes Level 1 Specification describes geometric shapes in CSS. They are, in Level 1 of the specification, designed to be applied to floated items. This article provides an overview of what you can do with shapes.

You could for example float an item left, which would cause the text to wrap round the right and bottom of the item in a rectangular fashion. If you then apply a circle shape, the text would then wrap round the line of the circle.

There are a number of ways to create these Shapes and in these guides we will find out how CSS Shapes work, and consider some ways you might like to use them.

What does the specification define?

The specification defines three new properties:

• shape-outside — allows definition of basic shapes
• shape-image-threshold — Sets an opacity threshold value. If an image is being used to define the shape, only the parts of the image that are the same opacity or greater than the threshold value are used in the shape. Any other parts are ignored.
• shape-margin — sets a margin around the defined shape

Defining basic shapes

The shape-outside property allows us to a define a shape. It takes a variety of values, all of which define different shapes, specified in the datatype. We can start by looking at a very simple case.

In the following example I have an image floated left. I have then applied the shape-outside property to it with a value of circle(50%) . The result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image.

As in this level of the specification an element has to be floated in order to apply to it; this has the side-effect of creating a simple fallback for many cases. If you do not have Shapes support in the browser, the user will see content flowing around the sides of a rectangular box as before. If they do have Shapes support then the visual display is enhanced.

Basic shapes

The value circle(50%) is an example of a basic shape. The specification defines four values, which are:

Using the value inset() wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.

We have already seen how circle() creates a circular shape. An ellipse() is essentially a squashed circle. If none of these simple shapes do the trick you can create a polygon() and make the shape as complex as you want.

In our Guide to Basic Shapes we explore each of the possible Basic Shapes and how to create them.

Shapes from the box value

Shapes can also be created around the box value. Therefore, you could create your shape on:

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.

To explore the box values in more detail, see our guide covering Shapes from box values.

Shapes from images

An interesting way to generate your path is to use an image with an alpha channel — the text will then wrap around the non-transparent parts of the image. This allows the overlay of wrapped content around an image, or the use of an image which is never displayed on the page purely as a method of creating a complex shape without needing to carefully map a polygon.

Note that images used in this way must be CORS compatible, otherwise shape-outside will act as if none had been given as the value, and you will get no shape.

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.

shape-image-threshold

The shape-image-threshold property is used to set the threshold of image transparency used to define the area of the image used for the shape. 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 of the shape.

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.

We take a deeper look at creating shapes from images in the Shapes from Images guide.

The shape-margin property

The shape-margin property adds a margin to shape-outside . This will further shorten the line boxes of any content wrapping the shape, pushing it away from the shape itself.

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.

Using Generated Content as the floated item

In the examples above, we have used images or a visible element to define the shape, meaning that you can see the shape on the page. Instead, you might want to cause some text to flow along a non-rectangular invisible line. You can do this with Shapes, however you will still need a floated item, which you can then make invisible. That could be a redundant element inserted into the document, an empty or perhaps, but our preference is to use generated content. This means we can keep things used for styling inside the CSS.

In this next example, we use generated content to insert an element with 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.

Relationship to clip-path

The Basic Shapes and Box values used to create Shapes are the same as those used as values for clip-path . Therefore if you want to create a shape using an image, and also clip away part of that image, you can use the same values.

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 have used to define the shape.

Developer Tools for Shapes

Along with CSS Shapes support in the browser, Firefox are shipping a Shape Path Editor in the Firefox DevTools. This tool means that you can inspect any shapes on your page, and even change the values in the live page. If your polygon isn’t quite right you can use the Shapes Editor to tweak it, then copy the new value back into your CSS.

The Shape Path Editor will be enabled by default in Firefox 60 for shapes generated via clip-path . You can also use it to edit shapes generated via shape-outside , but only when you enable it via the layout.css.shape-outside.enabled pref.

Future CSS Shapes Features

The initial Shapes specification included a property shape-inside for creating shapes inside an element. This property, along with the possibility of creating shapes on non-floated elements, has been moved to level 2 of the specification. As the shape-inside property was initially in Level 1 of the specification, you may find tutorials on the web detailing both properties.

Found a content problem with this page?

This page was last modified on May 25, 2023 by MDN contributors.

Источник

shape-image-threshold

The CSS shape-image-threshold property sets which pixels are included in the shape of an image when shape-outside is used to define the float area of a CSS element. Let’s say we’re using a linear gradient to define the float area of a CSS shape. Something like this where we go from a solid color to transparent at a 45° angle: Normally, we’d define that as the background-image of an element. If we float this element and drop some content next to it, the gradient and content would sit side-by-side.

But if we swap background-image for shape-outside , we’ll no longer see the gradient, but the content wraps around it where the pixels in the gradient are transparent.

But let’s say we think the text needs to hug the shape a little closer. That’s where we can reach for shape-image-threshold . We can use it to adjust where the content naturally wraps around the transparent pixels by including pixels that are semi-transparent. For example, a shape-image-threshold value of .3 will include pixels that are more than 30% opaque in the float area of the shape. This time, we’ll include the gradient to see just how this works.

See that? By declaring shape-image-threshold on the second shape and setting it to a value of .15, we’ve included pixels that are greater than 15% opaque in the float area, allowing the content to overlap the shape a smidge. This also works when we’re defining the outside shape with an actual image file that uses transparency. Same deal, just a different shape to work with.

The shape-image-threshold property accepts a single alpha value between 0 and 1, where 0 is the equivalent of an opacity level of 0% (fully transparent) and 1 is the equivalent of an opacity level of 100% (no transparency). The initial value is 0.0.

IE	Edge	Firefox	Chrome	Safari	Opera
No	79+	62+	37+	10.1+	24+

Source: caniuse

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mini
84+	68+	81+	10.3+	All

Источник