270
Maîtrise des CSS
Bandeau translucide de légende et transparence RGBa
Il.existe.plusieurs.moyens.de.spécifier.des.couleurs..Le.plus.souvent,.cela.se.fait.à.l’aide.
d’un.triplet.RVB.au.format.hexadécimal..D’autres.développeurs.utilisent.les.noms.anglais.
des.couleurs,.dans.certains.cas..Il.est.également.possible.d’utiliser.des.pourcentages.RVB.
ou. des. chiffres. décimaux..Tous. les. exemples. suivants. sont. ainsi. valides. pour. spécifier. la.
couleur.rouge :
color: #f00
color: #ff0000
color: red
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)
RGB.est.l’acronyme.de.Red, Green, Blue.(rouge,.vert,.bleu)..C’est.un.mode.colorimétrique.
bien.connu.des.graphistes..RGBa.introduit.une.quatrième.couche,.dite.alpha,.qui.gère.la.
transparence.. La. beauté. des. CSS 3. tient. à. ce. qu’il. est. possible. de. continuer. à. spécifier.
les.couleurs.en.RVB,.mais.également.de.définir.une.transparence.alpha.de.ces.couleurs.à.
l’aide.d’une.quatrième.valeur.décimale..Toutes.les.valeurs.comprises.entre 0.0.(transparence.
totale).et 1.0.(opacité.totale).sont.autorisées.
Dans.l’exemple.suivant,.nous.déclarons.à.nouveau.la.couleur.rouge.en.RVB,.mais.en.fixant.
une.transparence.à.50 %.avec.la.valeur 0.5.pour.la.transparence.alpha.
color: rgb(255,0,0,0.5)
La.valeur.RGBa.n’est.attribuée.qu’à.l’élément.déclaré :.les.éléments.enfants.n’héritent.donc.
pas. de. la. transparence.. Elle. se. distingue. ainsi. de. la. propriété. opacity,. qui. est. toujours.
héritée..
Pour. le. site. CTM,. les. déclarations. suivantes. exécutent. les. premières. formules. magiques.
pour.la.photo.et.la.légende..Nous.positionnons.la.div.conteneur.de.manière.relative,.puis.la.
légende.de.manière.absolue,.afin.qu’elle.puisse.être.placée.exactement.où.nous.le.voulons.
au-dessus.de.l’image..
div.captioned_image {
position:relative;
}
div.captioned_image p.caption {
position:absolute;
bottom:0;
left:0;
margin:0;
color:#fff;
font-size:13px;
line-height:16px;
font-style:italic;
padding:5px;
}
Ensuite,.nous.déclarons.la.valeur.RGBa.avec.la.formule.rgba(0,0,0,0.5),.les.trois.premières. valeurs. combinées. produisant. du. noir. et. la. valeur. de. transparence. alpha. de. 0.5.
Maîtrise des CSS
Bandeau translucide de légende et transparence RGBa
Il.existe.plusieurs.moyens.de.spécifier.des.couleurs..Le.plus.souvent,.cela.se.fait.à.l’aide.
d’un.triplet.RVB.au.format.hexadécimal..D’autres.développeurs.utilisent.les.noms.anglais.
des.couleurs,.dans.certains.cas..Il.est.également.possible.d’utiliser.des.pourcentages.RVB.
ou. des. chiffres. décimaux..Tous. les. exemples. suivants. sont. ainsi. valides. pour. spécifier. la.
couleur.rouge :
color: #f00
color: #ff0000
color: red
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)
RGB.est.l’acronyme.de.Red, Green, Blue.(rouge,.vert,.bleu)..C’est.un.mode.colorimétrique.
bien.connu.des.graphistes..RGBa.introduit.une.quatrième.couche,.dite.alpha,.qui.gère.la.
transparence.. La. beauté. des. CSS 3. tient. à. ce. qu’il. est. possible. de. continuer. à. spécifier.
les.couleurs.en.RVB,.mais.également.de.définir.une.transparence.alpha.de.ces.couleurs.à.
l’aide.d’une.quatrième.valeur.décimale..Toutes.les.valeurs.comprises.entre 0.0.(transparence.
totale).et 1.0.(opacité.totale).sont.autorisées.
Dans.l’exemple.suivant,.nous.déclarons.à.nouveau.la.couleur.rouge.en.RVB,.mais.en.fixant.
une.transparence.à.50 %.avec.la.valeur 0.5.pour.la.transparence.alpha.
color: rgb(255,0,0,0.5)
La.valeur.RGBa.n’est.attribuée.qu’à.l’élément.déclaré :.les.éléments.enfants.n’héritent.donc.
pas. de. la. transparence.. Elle. se. distingue. ainsi. de. la. propriété. opacity,. qui. est. toujours.
héritée..
Pour. le. site. CTM,. les. déclarations. suivantes. exécutent. les. premières. formules. magiques.
pour.la.photo.et.la.légende..Nous.positionnons.la.div.conteneur.de.manière.relative,.puis.la.
légende.de.manière.absolue,.afin.qu’elle.puisse.être.placée.exactement.où.nous.le.voulons.
au-dessus.de.l’image..
div.captioned_image {
position:relative;
}
div.captioned_image p.caption {
position:absolute;
bottom:0;
left:0;
margin:0;
color:#fff;
font-size:13px;
line-height:16px;
font-style:italic;
padding:5px;
}
Ensuite,.nous.déclarons.la.valeur.RGBa.avec.la.formule.rgba(0,0,0,0.5),.les.trois.premières. valeurs. combinées. produisant. du. noir. et. la. valeur. de. transparence. alpha. de. 0.5.