santé mentale emplois nyc https://pilulesfrance.com/dysfonction-erectile/cialis-sur-internet/ où puis-je acheter des pilules abortives

Comprendre les couleurs CSS3

Couleur HSL

Le CSS3 inclut maintenant dans la norme la notion de teinte, saturation et luminosité (Hue, Stauration, Luminosity)

Le Hue permet de modifier la teinte donc la couleur, c'est une valeur numérique.

Par exemple 0 (ou 360) représente le rouge, 120 le vert et 240 le bleu, c'est une mesure sur la roue chromatique. Entre ces 3 valeurs, ce sont les nuances:

  • entre 0 et 119 : nuance de rouge
  • entre 120 et 239 : nuance de vert
  • entre 240 et 359 : nuance de bleu

La saturation est une valeur de pourcentage, 100% équivalent à la couleur

La luminosité est une valeur en pourcentage:

  • 0% est le sombre (noir)
  • 50% est la moyenne
  • 100% est la lumiere (blanc)

Exemple

CSS

p.example{ background-color:hsl(100, 100%, 50%); color:hsl(250, 100%, 50%); } p.exampleDark{ background-color:hsl(100, 100%, 50%); color:hsl(250, 100%, 25%);// couleur plus sombre que la précédente }

HTML

<p class="example"> couleurs gérées en hsl </p> <p class="exampleDark"> couleurs gérées en hsl </p>

Démo

couleurs gérées en hsl

couleurs gérées en hsl

Couleur HSLA

C'est la meme chose que la couleur HSL sauf qu'il y a en plus la gestion de l'opacité de la couleur (sa transparence)

Exemple

CSS

p.exampleOpacity{ background-color:hsl(100, 100%, 50%, 0.8); color:hsl(250, 100%, 50%, 0.5); } p.exampleOpacityOther{ background-color:hsla(90, 100%, 50%, 0.5); color:hsla(250, 100%, 50%, 1.0); }

HTML

<p class="exampleOpacity"> couleurs gérées en hsla </p> <p class="exampleOpacityOther"> couleurs gérées en hsla </p>

Démo

couleurs gérées en hsla

couleurs gérées en hsla

Couleur RGBA

Le RGB existe depuis un moment dans la norme CSS. Avec le CSS3, l'opacite est appliquée au RGB via RGBA

Les valeurs sont les suivantes

  • R: couleur rouge en % (0% à 100%) ou en valeur (0 à 255)
  • G: couleur verte en % (0% à 100%) ou en valeur (0 à 255)
  • B: couleur bleu en % (0% à 100%) ou en valeur (0 à 255)
  • A: opacité en valeur flottante (0.0 à 1.0)

Exemple

CSS

p.opacity{ background-color:rgba(255, 0, 0, 0.2); color:rgb(250, 100, 50); } p.other{ background-color:rgba(90, 100, 50, 0.5); color:rgba(250, 100, 50, 0.4); }

HTML

<p class="opacity"> couleurs gérées en hsla </p> <p class="other"> couleurs gérées en hsla </p>

Démo

couleurs gérées en hsla

couleurs gérées en hsla

l'intérêt du rgba et du hsla vient du fait que l'opacité qu'il applique n'est pas héritée par les enfants. ( c'est le cas pour opacity)

Opacity

opacity permet d'appliquer une transparence à un élément et à tous ses enfants (contrairement à hsla et à rgba)

Il prend pour valeur un flottant (entre 0.0 et 1.0)

Exemple

CSS

p.opacityExemple{ opacity:0.5; } p.otherOpacity{ opacity:0.3; }

HTML

<p class="opacityExemple"> exemple sur opacity </p> <p class="otherOpacity"> exemple sur opacity </p>

Démo

exemple sur opacity

exemple sur opacity

retourner en haut de la page