shape-image-threshold
Quick Summary for shape-image-threshold
shape-image-threshold CSS property sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
Code Usage for shape-image-threshold
/* <number> value */ shape-image-threshold: 0.7; /* Global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: revert; shape-image-threshold: unset; More Details for 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.
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.
Syntax
/* <number> value */ shape-image-threshold: 0.7; /* Global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: revert; shape-image-threshold: unset; Values
<alpha-value> 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. Values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range.
Formal definition
| Initial value | 0.0 |
|---|---|
| Applies to | floats |
| Inherited | no |
| Computed value | The same as the specified value after clipping the <number> to the range [0.0, 1.0]. |
| Animation type | a number |
Formal syntax
<alpha-value>where
<alpha-value> = <number> | <percentage>
Examples
Aligning text to a gradient
This example creates a <div> block with a gradient background image. The gradient is established as a CSS shape using shape-outside, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.
<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> #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; } The shape is established here using background-image with a linear gradient rather than an image file. The same gradient is also used as the image from which the shape is derived for establishing the float area, using the shape-outside property.
The 20% opacity threshold for treating gradient pixels as part of the shape is then established using shape-image-threshold with a value of 0.2.
Specifications
| Specification |
|---|
| CSS Shapes Module Level 2 # shape-image-threshold-property |
See also
CSS Shapes Overview of CSS Shapes<basic-shape> shape-outside shape-margin Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)Français日本語中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
Random Quote
"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."
I just checked google books for BFG, and the dedication is there.
https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1
Roald Dahl, 1986
