Comprendre les couleurs en CSS3

Version imprimable

26/09/2010, 21h37
ornitho13

Comprendre les couleurs en CSS3

Bonsoir à tous,

Voici un article pour comprendre les nouveautés au niveau des couleurs en CSS3 :

:fleche: Comprendre les couleurs en CSS3

Bonne lecture!

N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

Merci.
28/09/2010, 00h32
Auteur
bonjour,

petite erreur dans le code CSS écrit dans l'article du II-Couleur HSL :
Code:

1 2 3 4 5 p.hslAutre{ background-color:hsl(100, 100%, 50%); color:hsl(250, 100%, 25%);// couleur plus sombre que la précédente }
les commentaires en CSS s'écrivent entre /* et */ ;)
J'ai vérifié dans la demo, tu utilises bien les /* et */ pour les commentaires.

en IV-Couleur RGBA

Citation:

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

Tu peux détailler ?

Si je reprends ton exemple :
Code:

1 2 3 4 5 p.rgbaAutre{ background-color:rgba(90, 100, 50, 0.5); color:rgba(250, 100, 50, 0.4); }
Code:

1 2 3 4 5 couleurs gérées en rgba coucou bonjour tout le monde ! 
en ajoutant un dans ... Donc normalement si j'ai bien compris le span ne prend pas la couleur définie dans le CSS, c'est bien ça ("coucou" est écrit en noir sur fond blanc) ?

Code:

1
2
3
4
5
6
7
8
p.hsla{
        background-color:hsl(100, 100%, 50%, 0.8);
        color:hsl(250, 100%, 50%, 0.5);
    }
    p.hslaAutre{
        background-color:hsla(90, 100%, 50%, 0.5);
        color:hsla(250, 100%, 50%, 1.0);
    }

manque pas les a de hsla dans la premiere declaration ?

28/09/2010, 10h38
c_s_s

Citation:

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

Citation:

en ajoutant un dans ... Donc normalement si j'ai bien compris le span ne prend pas la couleur définie dans le CSS, c'est bien ça ("coucou" est écrit en noir sur fond blanc) ?

En fait, il faudrait préciser que l'opacité n'est pas héritée par les enfants si on leur applique un/des style(s).

Si tu n'appliques aucune propriété au span, il héritera des propriétés du paragraphe, opacité comprise.
Si tu appliques une couleur sur le texte du span, alors il n'héritera pas de l'opacité de la couleur du texte du paragraphe et sa couleur de texte sera "pleine".
Idem pour la couleur de fond.