La transparence de couleur en CSS3

rgba

Grâce à l’écriture RGBa, le module de couleurs de CSS3 introduit désormais la notion de transparence dans les valeurs en association avec une couleur. Cette écriture permet ainsi de jouer sur les effets d’opacité entre les différentes couches d’éléments HTML.

Vous vous trompez si vous pensez que le principe de la transparence RGBa est semblable à la propriété opacity également en CSS3, mais qui est déjà dépassé. Contrairement à opacity, RGBa est une propriété s’appliquant à une propriété de l’élément sélectionné uniquement tandis que l’opacity s’applique à l’élément dans son ensemble jusqu’à tous ses descendants. Ainsi, RGBas’applique à toutes les propriétés dont la valeur peut être une couleur : color, border-color, text-shadow, background-color ou encore box-shadow…

Concept de la propriété RGBa

Comme la notation classique RGB, RGBa obéit aux mêmes règles de fonctionnement sauf sur un point puisqu’une composante est ajoutée à la fin de la valeur. Si la valeur classique est rgb (0, 0, 0), celle de RGBa est rgba (0, 0, 0, 0). La dernière valeur également appelée alpha est celle qui indique le degré d’opacité. Cette valeur est comprise entre 0 et 1.

Voici une petite illustration avec comme objectif de mettre une transparence de 20% sur la couleur d’arrière-plan de l’élément :

Pour allez plus vite voir ici un générateur de rgba très pratique.

Pour s’assurer que la propriété passe sur tous les navigateurs, même les plus anciens, vous pourrez commencer par indiquer une couleur de fond solide grâce à l’écriture classique RGB :

Avec cette écriture, la plupart des anciens navigateurs s’arrêteront sur la première déclaration puisqu’ils ne reconnaissent pas la valeur RGBa.

Compatibilité navigateurs

On peut constater qu’à l’heure actuelle la plupart des navigateurs prennent en charge cette valeur de transparence… à l’exception d’Internet Explorer, jusqu’à la version 8 comprise.
La solution adéquate serait de détourner un filtre propriétaire Microsoft que l’on va spécifier pour IE .

Le filtre microsoft pour IE <9

La technique va détourner un filtre propriétaire à Microsoft, il va créer des dégradés d’arrière-plan sur Internet Explorer.

Pour avoir l’effet de transparence il suffit d’indiquer une couleur identique pour le début et la fin du dégradé.
Ce filtre a pour avantage de prendre en compte la transparence de la couche Alpha dans ses valeurs. Il est donc possible de rendre le fond transparent en indiquant la même couleur pour le début et la fin du “dégradé”.

Pour vous éclairer, voici la correspondance de valeur hexadécimal en pourcentage.

  • 0% (transparent) -> #00
  • 20% -> #33
  • 50% -> #80
  • 75% -> #C0
  • 100% (opaque) -> #FF

Répondre