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>
To Continue Learning Please Login
Login with Google