CSS - shape-image-threshold Property

CSS shape-image-threshold property specifies the alpha channel threshold for shape extraction when using an image with the shape-outside property.

Possible Values

  • <alpha-value> − This sets the threshold for shape extraction. The pixels with alpha values larger than the threshold define the shape. Values beyond the range of 0.0 (completely transparent) to 1.0 (completely opaque) are limited to this particular range.

Applies to

Floats.

DOM Syntax

shape-image-threshold = <alpha-value>;

CSS shape-image-threshold - No Threshold

The following example demonstrates that the shape-image-threshold: 0 property sets alpha channel value to 0% (fully transparent) and considered part of the element's shape −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-image-threshold: 0;
   }
</style>
</head>
<body>
   <div class="box"></div>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>

CSS shape-image-threshold - With 50% Threshold

The following example demonstrates the shape-image-threshold: 0.5 property indicates that any pixel with an alpha value more than 50% opaque than transparent is considered part of the shape −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(50deg, red, transparent 80%, transparent);
      shape-image-threshold: 0.5;
   }
</style>
</head>
<body>
   <div class="box"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>

CSS shape-image-threshold - With 100% Threshold

The following example demonstrate the shape-image-threshold: 1 property sets alpha channel value to 100% (fully opaque ) and considered part of the element's shape −

<html>
<head>
<style>
   .box {
      width: 120px;
      height: 120px;
      float: left;
      background-image: linear-gradient(30deg, red, transparent 70%, transparent);
      shape-outside: linear-gradient(50deg, red, transparent 80%, transparent);
      shape-image-threshold: 1;
   }
</style>
</head>
<body>
   <div class="box"></div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</body>
</html>
Advertisements