Discussion :

[ornitho13]

Bonsoir à tous,

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

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.

[Auteur]

bonjour,

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<p class="rgbaAutre"> couleurs gérées en rgba 
<span>coucou</span>
bonjour tout le monde !
</p>

en ajoutant un <span> dans <p>... 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) ?

[sebhm]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[c_s_s]

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

en ajoutant un <span> dans <p>... 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.