The shape-image-threshold
CSS property defines the alpha channel threshold used to extract the shape using an image as the value for shape-outside
.
A value of 0.5
means that the shape will enclose all the pixels that are more than 50% opaque.
/* <number> value */ shape-image-threshold: 0.7; /* Global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset;
Initial value | 0.0 |
---|---|
Applies to | floats |
Inherited | no |
Media | visual |
Computed value | The same as the specified value after clipping the <number> to the range [0.0, 1.0]. |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<number>
- Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.
Formal syntax
<number>
Example
HTML Content
<div id="gradient-shape"></div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, libero quae nihil porro debitis laboriosam inventore animi impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni expedita? </p>
CSS Content
#gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Shapes Module Level 1 The definition of 'shape-image-threshold' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | No support | No support | No support | 7.0 -webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | No support | No support | No support | ? |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
Sebastianz,
myf,
Siilwyn,
teoli,
fscholz,
shaunw,
rebeccahauck
Last updated by:
chrisdavidmills,