Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété shape-image-threshold définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour shape-outside. Une valeur de 0.5 indiquera qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50% .
/* Quantité seuil */ /* Valeur <number> */ shape-image-threshold: 0.7; /* Valeurs globales */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset;
| Valeur initiale | 0.0 |
|---|---|
| Applicabilité | flottants |
| Héritée | non |
| Média | visuel |
| Valeur calculée | La même que la valeur spécifiée après avoir écrêté number dans l'intervalle [0.0, 1.0]. |
| Type d'animation | un nombre |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
<number>- Un nombre (
<number>) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.
Syntaxe formelle
<number>
Exemples
CSS
#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;
}
HTML
<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>
Résultat
Spécifications
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Shapes Module Level 1 La définition de 'shape-image-threshold' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 37 | ? | 591 | Non | 24 | 7 -webkit- |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | ? | ? | 591 | 24 | ? | ? |
1. From version 59: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.