UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
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
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.
- Applies to: floats
- Inherited: no
- Initial value: 0.0
- Animation type: number
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.