shape-image-threshold - Propriété CSS
Résumé des caractéristiques de la propriété shape-image-threshold
0.0shape-image-threshold passe progressivement d'une valeur à une autre.Description de la propriété shape-image-threshold.
La propriété shape-image-threshold s'applique aux éléments déclaré flottants, et dont la forme d'habillage est définie par les parties
transparentes d'une image (le canal alpha).
shape-image-threshold définit alors le seuil de transparence au dessus duquel l'image est considérée comme opaque.
Voici un exemple. L'image ci-contre (un triangle) est déclarée flottante à gauche, et avec une forme d'habillage calculée suivant
son canal alpha (les parties transparentes de l'image).
Dans cet exemple, le triangle est parfaitement opaque et le fond est parfaitement transparent, mais lorsque l'image comporte des zones
semi-transparentes il est utile de fixer le seuil à partir duquel on considère que l'image est opaque.
C'est le rôle de la propriété shape-image-threshold.
Pour plus de précisions sur les éléments flottants, reportez-vous à la propriété float.
Et voyez aussi la propriété shape-outside pour définir la forme d'habillage, et shape-margin pour
fixer la marge autour de cette forme d'habillage.
Valeurs pour shape-image-threshold.
- shape-image-threshold: 0.35;
Une valeur positive comprise entre 0 et 1. elle peut aussi être exprimée en pourcentage :
100%étant équivalent à1.Cette valeur détermine le seuil au dessus duquel l'image est considérée comme opaque.
- shape-image-threshold:
initial; shape-image-threshold:inherit; shape-image-threshold:revert; shape-image-threshold:revert-layer; shape-image-threshold:unset;La valeur initiale est :
0.0
Animation de la propriété shape-image-threshold.
L'élément flottant utilisé pour cet exemple est un dégradé à 45 degrés, du noir au transparent ;
il comporte donc toutes les opacités, de 0 à 100%.
Le texte empiète plus ou moins sur le dégradé en fonction de l'évolution de l'animation.
Simulateur.
L'image ci-dessous (la boule) est flottante à gauche, et sa forme d'habillage a été définie suivant son canal alpha.
La boule elle-même est totalement opaque ; son ombre a une transparence qui varie de 10% à 50% environ.
D'autre part, ce n'est sans doute pas visible à l’œil nu, mais le fond de l'image n'est pas parfaitement transparent :
il a une opacité de 1% environ.
En ajustant la valeur de la propriété shape-image-threshold, vous pouvez inclure ou non l'ombre dans la forme d'habillage.
Vous pouvez aussi tester l'extrême : en donnant la valeur maximale 1 à la propriété shape-image-threshold, toutes les
parties de l'image seront considérées comme transparentes, y compris la boule elle-même.
A l'inverse, en forçant shape-image-threshold à 0, aucune partie de l'image n'est considérée comme transparente.
Rappelons que le fond n'est pas parfaitement transparent, comme c'est parfois le cas avec une image réelle.
*
Prise en charge par les navigateurs (compatibilité).
shape-image-threshold.
shape-image-threshold.
shape-image-thresholdNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que shape-image-threshold.
Les spécifications CSS éditées par le W3C sont organisées en modules. shape-image-threshold fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.