Médiaforma

All posts tagged couleur

Par défaut, l’arrière-plan des pages Web est uniforme et de couleur blanche. Pour choisir une autre couleur uniforme, il vous suffit de définir l’attribut bgcolor dans la balise <body> :

<body bgcolor=”#RRVVBB”>

RR, VV et BB représentent les composantes rouge, vert et bleu de la couleur, codées en hexadécimal. Pour vous aider à obtenir ces trois composantes, je vous suggère de vous connecter sur la page http://www.raider-knight.com/generateur-couleur.php. Sélectionnez une couleur avec le curseur vertical et cliquez dans la palette.

Il ne vous reste plus qu’à copier/coller le code hexadécimal obtenu  dans l’attribut bgcolor de la balise <body> :


Dans la rubrique précédente, vous avez vu que l’arrière-plan des pages était de couleur blanche par défaut, mais qu’il était possible de modifier cette couleur en utilisant l’attribut bgcolor de la balise <body>. D’autres attributs de la balise <body> permettent de modifier la couleur par défaut du texte, des liens non visités et des liens visités. Vous utiliserez l’attribut :

  • text pour modifier la couleur par défaut du texte ;
  • link pour modifier la couleur par défaut des liens non visités ;
  • vlink pour modifier la couleur par défaut des liens visités.

Dans cet exemple, les couleurs par défaut sont les suivantes : bleu pour le texte, rouge pour les liens non visités et vert pour les liens visités.


Dans les rubriques précédentes, vous avez appris à définir des couleurs en HTML, en utilisant un nom de couleur ou un code hexadécimal. Dans cette rubrique, je vais vous montrer comment définir des couleurs en CSS. Pour cela, vous pouvez utiliser un code hexadécimal #rrvvbb rr représente la composant rouge de la couleur, vv la composante verte de la couleur et bb la composante bleue de la couleur. Ces trois composantes sont des nombres décimaux compris entre #00 et #ff.

Par exemple, pour définir la couleur d’arrière-plan rouge, vous pouvez affecter la valeur #ff0000 à la propriété CSS background-color :

background-color : #ff0000 ;

Une deuxième alternative s’offre à vous : l’utilisation de la fonction rgb(r, v, b)r, v et b sont les composantes rouge, verte et bleue de la couleur, codées en décimal (entre 0 et 255) ou en pourcentages (entre 0% et 100%).

Par exemple, pour définir la couleur d’arrière-plan vert, vous pouvez affecter la valeur rvb(0,255, 0) à la propriété CSS background-color :

background-color: rgb(0,255,0);

Ou encore, pour définir la couleur d’arrière-plan bleu, vous pouvez affecter la valeur rvb(0%, 0%, 100%) à la propriété CSS background-color :

background-color: rgb(0%,0%,100%);

Voyons comment mettre ces trois techniques en pratique :

Cet exemple utilise trois balises <div>. Le style div indique que ces balises seront positionnées de façon absolue et auront une dimension de 300×300 pixels.

Les trois balises <div> sont de classe (respectivement) rouge, vert et bleu.

Ces trois classes utilisent les trois types de déclaration de couleurs possibles en CSS. La classe rouge définit un arrière-plan de couleur rouge à l’aide d’un code rrvvbb hexadécimal. La classe vert définit un arrière-plan de couleur verte à l’aide de la fonction rvb() à laquelle sont passés trois valeurs décimales. Enfin, la classe bleu définit un arrière-plan de couleur bleu à l’aide de la fonction rvb() à laquelle sont passés trois valeurs spécifiées en pourcentages.

La commande Exécution / Launch in IE affiche le résultat dans Internet Explorer :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à modifier le contenu d’une zone de texte en utilisant la fonction JavaScript getElementById(). Dans cette rubrique, je vais vous apprendre à modifier une propriété CSS avec cette même instruction.

Dans cet exemple, nous allons modifier la couleur d’arrière-plan d’une balise <div>. Pour cela, l’utilisateur entrera une couleur codée en hexadécimal codée ainsi :

#rrvvbb

rr représente la quantité de rouge (entre 0 et FF), vv la quantité de vert (entre 0 et FF) et bb la quantité de bleu (entre 0 et FF) de la couleur à utiliser.

Une fois la couleur entrée, il lui suffira de cliquer sur un bouton de commande pour modifier la couleur de la balise <div>.

Examinons le code HTML.

  • Le corps du document est défini entre les lignes 22 et 31.
  • La ligne 23 définit une balise <div> d’identifiant div1 ;
  • La ligne 24 affiche un texte pour inviter l’utilisateur à saisir une couleur codée en hexadécimal.
  • Les lignes 25 à 28 mettent en place un formulaire pour héberger la zone de texte et le bouton de commande ;
  • La ligne 26 définit la zone de texte d’identifiant saisie ;
  • Enfin, la ligne 27 définit le bouton de commande. Le texte affiché dans le bouton est “Modifier la couleur”. Lorsque le bouton est cliqué, la fonction JavaScript couleur() est exécutée.

L’allure de la balise <div> est définie avec du code CSS, entre les lignes 4 et 11 :

  • Ligne 7, la couleur de l’arrière-plan par défaut est définie à #000000. A l’ouverture de la page, la balise <div> aura donc un arrière-plan noir ;
  • Les dimensions de la balise <div> sont définies lignes 8 et 9. La largeur et la hauteur sont fixées à 200 pixels.

Pour que le code soit complet, il ne reste plus qu’à définir la fonction JavaScript couleur(),entre les lignes 12 et 19 :

  • La ligne 15 crée l’objet objet1 et l’initialise avec l’élément saisie, c’est-à-dire avec la zone de texte dans laquelle est saisi le code de couleur hexadécimal.
  • La ligne 16 crée l’objet objet2 et l’initialise avec l’élément div1, c’est-à-dire avec la balise <div> qui a été mise en place dans le début du document.
  • Quant à la ligne 17, elle affecte à la propriété backgroundColor de la balise <div> le code de couleur hexadécimal qui se trouve dans la zone de texte. A droite du signe “=“, objet1.value récupère le contenu de la zone de texte. Remarquez la syntaxe utilisée à gauche du signe “=” : objet2.style.backgroundColor.
    • objet2 correspond à l’objet lié à la balise <div> div1 ;
    • style indique que l’on s’intéresse à une propriété CSS ;
    • backgroundColor correspond à la propriété CSS background-color.

Remarque
La syntaxe de la ligne 17 n’a rien d’extraordinaire. Cependant, notez que l’accès à la propriété CSS background-color se fait via le mot clé backgroundColor. Le tiret a disparu entre les mots background et color et la première lettre du mot color est en majuscules. Une grande partie de la difficulté à accéder aux propriétés CSS en JavaScript viendra de la syntaxe à utiliser. Cependant, ne vous en faites pas trop, vous verrez que l’utilisation des bons mots clés devient vite machinale pourvu que vous pratiquiez régulièrement.

Exécutons ce code dans un navigateur. A l’ouverture de la page, la balise <div> a un arrière-plan noir. Pour le modifier, il suffit d’entrer un code hexadécimal dans la zone de texte et de cliquer sur le bouton de commande.

Pour trouver facilement le code de couleur hexadécimal d’une couleur donnée, je vous suggère d’utiliser le site http://www.code-couleur.com/.


Pour appliquer une couleur, un dégradé ou une texture à l’arrière-plan d’un document, basculez en mode Page. Sélectionnez l’onglet CRÉATION dans le ruban, puis cliquez sur l’icône Couleur de page, dans le groupe Arrière-plan de la page.

Pointez une des couleurs proposées pour prévisualiser son effet dans le document. Si nécessaire, cliquez sur Autres couleurs pour accéder à un plus grand choix de couleurs.

Vous pouvez également affecter un dégradé, une texture, un motif ou une image à l’arrière-plan du document. Cliquez sur Couleur de page puis sur Motifs et textures et faites votre choix sous les onglets de la boîte de dialogue Motifs et textures.


Cette page donne un aperçu des couleurs étendues utilisables en HTML :

AliceBlue AntiqueWhite Aqua Aquamarine
Azure Beige Bisque Black
BlanchedAlmond Blue BlueViolet Brown
BurlyWood CadetBlue Chartreuse Chocolate
Coral CornflowerBlue Cornsilk Crimson
Cyan DarkBlue DarkCyan DarkGoldenRod
DarkGray DarkGrey DarkGreen DarkKhaki
DarkMagenta DarkOliveGreen Darkorange DarkOrchid
DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue
DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet
DeepPink DeepSkyBlue DimGray DimGrey
DodgerBlue FireBrick FloralWhite ForestGreen
Fuchsia Gainsboro GhostWhite Gold
GoldenRod Gray Grey Green
GreenYellow HoneyDew HotPink IndianRed
Indigo Ivory Khaki Lavender
LavenderBlush LawnGreen LemonChiffon LightBlue
LightCoral LightCyan LightGoldenRodYellow LightGray
LightGrey LightGreen LightPink LightSalmon
LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey
LightSteelBlue LightYellow Lime LimeGreen
Linen Magenta Maroon MediumAquaMarine
MediumBlue MediumOrchid MediumPurple MediumSeaGreen
MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed
MidnightBlue MintCream MistyRose Moccasin
NavajoWhite Navy OldLace Olive
OliveDrab Orange OrangeRed Orchid
PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed
PapayaWhip PeachPuff Peru Pink
Plum PowderBlue Purple Red
RosyBrown RoyalBlue SaddleBrown Salmon
SandyBrown SeaGreen SeaShell Sienna
Silver SkyBlue SlateBlue SlateGray
SlateGrey Snow SpringGreen SteelBlue
Tan Teal Thistle Tomato
Turquoise Violet Wheat White
WhiteSmoke Yellow YellowGreen