Médiaforma

All posts tagged rgb

Dans cette rubrique, vous allez apprendre à créer un nuancier en agissant sur les composantes Rouge, Verte et Bleue d’une couleur. Pour cela, nous utiliserons trois curseurs <input>. Attention, seuls les navigateurs Safari 5 et supérieur, Chrome 8 et supérieur et Opera 11 et supérieur représentent cette balise en utilisant un curseur.

Voici le code utilisé :

Commençons par examiner le code HTML.

Une balise <div> d’identifiant carre est utilisée pour représenter la couleur qui correspond aux trois composantes RVB.

Les instructions suivantes mettent en place trois balises <input> suivies de trois balises <span>. Les premières serviront à choisir la valeur à affecter à chaque composante et les dernières à afficher la valeur courante de chaque composante, entre 0 et 255.

Examinons le code CSS.

Le style #carre définit lers caractéristiques de la balise <div> d’identifiant carre. Ses dimensions sont fixées à 200 pixels sur 200 et sa couleur d’arrière-plan est rouge à l’ouverture de la page.

Examinons le code JavaScript.

La fonction modifie est exécutée chaque fois qu’un curseur est modifié par l’utilisateur.

Les trois premières instructions lisent la valeur des curseurs sliderR, sliderV et sliderB et les stockent dans les variables r, v et b.

L’instruction suivante affecte ces trois composantes à la propriété backgroundColor de la balise <div> en utilisant la fonction rgb().

Enfin, les trois dernières instructions affichent la valeur courante des trois curseurs dans les balises <span> correspondantes.


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