Médiaforma

Un nuancier CSS3 et JavaScript

Print Friendly

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.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply