alphawiki

user:anonymous

°°° *************************************************** °°°
{require lib_menu}
{require lib_fonctions}
{M+}{fond}
{{hide}{def AVANT fontes}{def APRES padding}}
°°° *************************************************** °°°
{{TITRE} Les couleurs}
{br}
_p Les couleurs sont utilisées comme des caractéristiques des textes [lettres, mots, phrases ou paragraphe ou des fonds d'encadrés, de pages ou d'écran ainsi que pour tout objet comme les bordures par exemple.
_p Comment spécifier une couleur en particulier?

{div {PG}1. Valeurs en hexadécimal}
_p Les valeurs hexadécimales des couleurs sont supportées par tous les navigateurs principaux.
_p Une couleur en hexadécimale est spécifiée ainsi: #RRGGBB, où le RR (red), GG (green) and BB (blue) sont des entiers en hexadécimal integers spécifiant la valeur de la couleu. Toutes les valeurs doivent être comprisent entre  00 et FF (0 à 255 en décimal).
Par exemple la valeur #0000ff  donne la couleuur bleue parce que la composante de bleu est au maximum alors  que les composantes rouge et vert sont à 00.
_p Exemple
Definir differentes couleurs en HEX:{br}
#p1 {background-color: #ff0000;}   * rouge *{br}
#p2 {background-color: #00ff00;}   * vert *{br}
#p3 {background-color: #0000ff;}   * bleu *{br}
{CR}
{center {i-hex couleur1.jpg Gamme_de_couleur_en_hexadécimal}}
{CR}
{div {PG}2. Valeurs en RGB}
{br}
_p Les valeurs hexadécimales des couleurs sont supportées par tous les navigateurs principaux.
_p Une couleur en RGB est spécifée ainsi:  rgb(red, green, blue). Chaque paramètre (red, green, and blue) définit l'intensité de la couleur qui s'énonce par un entier entre 0 et 255 ou par un pourcentage (de 0% à 100%).
_p Par exemple,  rgb(0,0,255) spécifiera la couleur bleue, parce que la valeur de la composante bleue est au maximum alors quye les autres sont à 0
On peut aussi les définir en termes de pourcentage: rgb(0,0,255) ou rgb(0%,0%,100%).
_p Exemple
_p Definir differentes couleurs en RGB :{br}
#p {background-color: rgb(0, 0, 0);}   * noir *{br}
#p1 {background-color: rgb(255, 0, 0);}   * rouge *{br}
#p2 {background-color: rgb(0, 255, 0);}   * vert *{br}
#p3 {background-color: rgb(0, 0, 255);}   * bleu *{br}
#p4 {background-color: rgb(255, 255, 255);}   * blanc *{br}
_p En variant les composantes de 8 en 8 voici un gamme de rouge ou de noir:
{center
{show {@ src="data/couleur/C10.jpg"
         heigth="20" width="700" title="Gamme de rouge"}
}
{show {@ src="data/couleur/C11.jpg"
         heigth="20" width="700" title="Gamme de gris"}
}
}
{CR}

{div {PG}3. Valeurs en RGBA}
_p Les couleurs spécifiées en RGBA sont supportées par IE9+, Firefox 3+, Chrome, Safari, et dans Opera 10+.
_p Les couleurs en RGBA  sont une extention des couleurs en RGB  avec un paramètre alpha - qui spécifie l'opacité de l'objet coloré.
_p Une couleur en RGBA est spécifée ainsi:  rgb(red, green, blue): rgba(red, green, blue, alpha). Le paramètre alpha est un nombre entre 0.0 (totalement transparent) et 1.0 (totalement opaque).
_p Exemple:
_p Definir differentes couleurs en RGA :{br}
#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* rouge avec 0.3 d'opacité */{br}
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* vert avec 0.3 d'opacité */{br}
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* bleu avec 0.3 d'opacité */{br}
{CR}

{div {PG}4. Valeurs en HLS}
_p Les couleurs spécifiées en RGBA sont supportées par IE9+, Firefox 3+, Chrome, Safari, et dans Opera 10+.
_p  La spécification en HSL se fait en termes de teinte, saturation et luminosité au lieu du mélange de rouge, vert et bleus.
_p Une couleur en HLS est spécifiée ainsi: hsl(hue, saturation, lightness).
_p la teinte s'exprime en degrés dans la roue des couleurs  (de 0 à 360) - 0 (ou 360) is rouge, 120 est vert, 240 est bleu. 
_p La saturation s'exprime en pourcentage; 0% est une couleur grise et 100% est la pleine couleur.
_p La luminosité s'exprime aussi en pourcentage; 0% est noir, 100% is blanc.
_p Exemple
_p Definir différentes couleurs en HLS:
#p1 {background-color: hsl(120, 100%, 50%);}   /* vert */{br}
#p2 {background-color: hsl(120, 100%, 75%);}   /* vert lumineux */{br}
#p3 {background-color: hsl(120, 100%, 25%);}   /* vert foncé */{br}
#p4 {background-color: hsl(120, 60%, 70%);}    /* vert pastel */{br}
{CR}

{div {PG}5. Valeurs en HLSA}
_p Les couleurs spécifiées en RGBA sont supportées par IE9+, Firefox 3+, Chrome, Safari, et dans Opera 10+.
_p Les couleurs en HLSA  sont une extension des couleurs en HLS  avec un paramètre alpha - qui spécifie l'opacité de l'objet coloré.
_p Une couleur en HLS est spécifiée ainsi:: hsla(hue, saturation, lightness, alpha), où le paramètre alpha définit l'opacité. Le paramètre alpha est un nombre entre 0.0 (totalement transparent) et 1.0 (totalement opaque).
_p Definir différentes couleurs en HLSA:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* vert avec une opacité de 0.3 */{br}
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* vert lumineux vert avec une opacité de 0.3 */{br}
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* vert foncé avec vert avec une opacité de 0.3 */{br}
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* vert pastel vert avec une opacité de 0.3 */{br}
{CR}

{div {PG}6. Couleurs prédéfinies}

_p IL y a 140 couleurs prédéfinies et spécifiables par leur nom sous HTML et CSS.
{table
 {tr 
   {td Nom}
   {td tableau}

}
 {tr
   {td _ul gamme de rose}
   {td
     {gamme C-rose gamme_de_rose}
   }
 }
 {tr
   {td _ul gamme de pourpre}
   {td
     {gamme C-pourpre gamme_de_pourpre}
   }
 }
 {tr
   {td _ul gamme de rouge}
   {td
     {gamme C-rouge gamme_de_rouge}
   }
 } 
 {tr
   {td _ul gamme d'orange}
   {td
     {gamme C-orange gamme_d'orange}
   }
 }  
 {tr
   {td _ul gamme de brun}
   {td
     {gamme C-brun gamme_de_brun}
   }
 }  
 {tr
   {td _ul gamme de jaune}
   {td 
     {gamme C-jaune gamme_de_jaune}
   }
 }
 {tr
   {td _ul gamme de cyan}
   {td 
     {gamme C-cyan gamme_de_cyan}
   }
 }
 {tr
   {td _ul gamme de bleu}
   {td 
     {gamme C-bleu gamme_de_bleu}
   }
 }
 {tr
   {td _ul gamme de vert}
   {td 
     {gamme C-vert gamme_de_vert}
   }
 }
 {tr
   {td _ul gamme de gris}
   {td 
     {gamme C-gris gamme_de_gris}
   }
 }
 {tr
   {td _ul gamme de blanc}
   {td 
     {gamme C-blanc gamme_de_blanc}
   }
 }
}

{CR}

°°° Coin des fonctions °°°
{div   {@ style="display:none"}

{def i-hex
 {lambda {:nom :titre}
  {show
   {@ src="data/:nom"
     height="100"
     width="800"
     title=":titre"
   }
  }
 }
}
{def gamme
 {lambda {:nom :titre}
  {show
   {@ src="data/couleur/:nom.jpg"
     height="100"
     width="1000"
     title=":titre"
   }
  }
 }
}

}°°° Fin du DIV °°°