Shape-image-threshold - Propriété CSS

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; (0.0) shape-image-threshold: inherit; shape-image-threshold: revert; shape-image-threshold: revertLayer; shape-image-threshold: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'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 avec la propriété shape-image-threshold.

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. *

Ce texte est placé à coté d'une image habillé par la propriété float. La forme de l'habillage a été définie sur le canal alpha. Observez, en faisant varier la valeur affectée à shape-image-threshold comment réagit le texte, ne particulier au niveau de l'ombre de la boule. Ce texte est placé à coté d'une image habillé par la propriété float. La forme de l'habillage a été définie sur le canal alpha. Observez, en faisant varier la valeur affectée à shape-image-threshold comment réagit le texte, ne particulier au niveau de l'ombre de la boule.

Support de shape-image-threshold.

1

Propriété
shape-image-threshold

2

Valeur en
pourcentages

Estimation de la prise en charge globale.

95%

78%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Safari

Safari sur IOS

Samsung Internet

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Évolution de la propriété shape-image-threshold.

• Module CSS - Formes de base - Niveau 1

  Première présentation de la propriété shape-image-threshold.
  

  20 Juin 2013

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  

Voir aussi.

Le tracé des formes en SVG ou HTML est décrit par le module CSS Shapes Module. On retrouve dans ce module la propriété shape-image-threshold, ainsi que les descriptions suivantes :

Propriétés :

Fonctions :