8. Couleur et arrière-plan
 |
| Couleur et arrière-plan - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application |
Continuons notre guide des propriétés CSS essentielles.
Dans ce chapitre, nous allons principalement parler des propriétés liées aux couleurs et aux arrière-plans.
Oui, au pluriel.
Comme vous le verrez, il existe de nombreuses façons d'ajuster la couleur d'un élément en CSS.
En plus de cela, nous allons également expliquer comment changer la couleur de l'arrière-plan, créer des dégradés, ajuster la transparence et plus encore.
CSS n'a pas fini de vous impressionner.
Couleur du texte
Puisqu'il faut commencer quelque part, commençons par le concept des couleurs.
Nous avons brièvement vu la couleur de la propriété CSS dans le premier chapitre de cette deuxième partie, Paramétrer CSS.
Son utilisation est assez intuitive, il vous suffit d'indiquer le nom de la couleur que vous souhaitez appliquer comme valeur.
p { color: red ; }
Ce code rendra tous vos paragraphes rouges.
Mais c'est loin d'être la seule façon d'utiliser la propriété color.
Nous allons voir les différentes manières de spécifier une couleur, elles sont nombreuses.
<capturer>
Couleurs par nom
Un moyen simple et pratique de spécifier une couleur consiste simplement à entrer son nom ou son mot-clé.
Par exemple.
h1 { color: magenta; }
p { color: olive; }
strong { color: red; }
Ce code est assez explicite, il transforme vos titres en magenta, vos paragraphes en olive (une nuance de vert jaunâtre) et vos accents en rouge.
Le résultat est illustré ci-dessous.
<capturer>
C'est la méthode que nous avons utilisée jusqu'à présent, mais elle a ses inconvénients : un nombre limité de couleurs au choix.
C'est bien tant que nous travaillons avec une palette de couleurs rudimentaire, mais cela ne rend pas justice au CSS de restreindre nos choix aux seules couleurs qui disposent d'un nom.
<capturer>
Et si nous voulions une nuance de rouge quelque part entre Crimson et FireBrick ?
Heureusement, il existe d'autres méthodes que nous pouvons utiliser pour indiquer une couleur avec plus de précision.
Couleurs par hexadécimal
La plupart des moniteurs peuvent afficher plus de 16 millions de couleurs et CSS vous permet d'utiliser n'importe quel ton sur votre page Web.
Évidemment, pour des raisons pratiques, toutes les nuances de rouge n'ont pas un nom bien établi.
Nous avons besoin d'une autre façon de spécifier la couleur que nous voulons.
L'un de ces moyens est la notation hexadécimale.
Il s'agit du format le plus couramment utilisé pour indiquer les couleurs sur le Web.
Voici une démonstration de cette nomenclature.
h1 { color: #FF0000 ; }
Ce code rendra vos titres rouges.
Je ne comprends pas ! Ne serait-il pas plus simple d'écrire "rouge" comme nous le faisions avant ?
Cette remarque est vraie pour cet exemple, mais l'hexadécimal permet de spécifier les couleurs de manière beaucoup moins restrictive qu'en tapant leurs noms.
Si vous n'avez jamais vu l'hexadécimal utilisé auparavant, c'est juste un système numérique différent de celui auquel vous êtes habitué (décimal).
Les nombres sont exactement les mêmes que les décimaux, mais au lieu d'avoir des chiffres allant de 0 à 9 (décimal), ils vont de 0 à 15 (hexadécimal).
Vous avez probablement déjà entendu parler d'au moins un autre système numérique : le binaire, qui va de 0 à 1.
La base (ou base, pour les mathématiciens) est donc 16 au lieu de 10.
Comme nous n'avons pas de symboles pour les chiffres supérieurs à 9, nous avons dû les emprunter à notre alphabet latin.
Les nombres "dix" à "quinze" deviennent des nombres à un chiffre représentés par A à F ("dix" est A, "onze" est B... "quinze" est F).
<capturer>
La notation hexadécimale est parfois et plus précisément appelée triplet hexadécimal car elle se compose de trois sections distinctes.
Au total, vous avez le choix entre 2563 = 166 = 224 = 16 777 216 couleurs.
Le nombre dans notre exemple est #FF0000.
Les triplets hexadécimaux commencent toujours par un caractère dièse (#) dans CSS et la plupart des autres applications informatiques.
Après cela, nous avons six caractères du système numérique hexadécimal.
Ils fonctionnent par paires et, de gauche à droite, indiquent les quantités de rouge, de vert et de bleu, également appelées valeur RGB (Red-Green-Blue) de notre couleur de la manière suivante.
- Red : 00 (pas de rouge) à FF (max rouge)
- Green : 00 (pas de vert) à FF (max vert)
- Blue : 00 (pas de bleu) à FF (max bleu)
Comme vous l'aurez deviné, #000000 (pas de couleur) est noir et #FFFFFF (max de tout) est blanc.
<capturer>
La couleur que nous avons utilisée dans notre exemple était #FF0000. Maximum de rouge, pas de vert, pas de bleu.
Le résultat final est évidemment rouge.
Mais que se passe-t-il si je veux une couleur bleu clair, quelque chose à mi-chemin entre le bleu marine et le cyan ?
Du haut de ma tête, je pourrais essayer #00BAFF.
Pas de rouge, environ 75% de vert et un maximum de bleu.
Voici le résultat comme montré dans Photoshop.
<capturer>
Les logiciels de dessin comme Photoshop sont pratiques car ils vous permettent de choisir la couleur que vous voulez directement à partir d'une roue chromatique et de simplement copier et coller le résultat dans votre fichier CSS.
Si vous ne disposez pas d'un tel logiciel, vous pouvez également essayer le sélecteur de couleurs d'Adobe directement à partir de leur site Web.
J'ai utilisé des lettres majuscules dans mes couleurs hexadécimales simplement parce qu'elles sont plus faciles à distinguer que les minuscules. Vous pouvez utiliser la forme que vous voulez, il n'y a pas de règles ou de conventions. #FFFFFF est exactement le même que #ffffff.
La forme hexadécimale abrégée
Il existe une forme abrégée des couleurs hexadécimales appelée la notation abrégée.
Cette méthode raccourcit les six chiffres des codes de couleur hexadécimaux en trois caractères.
Cela ne fonctionne que si tous les deux chiffres d'une paire sont identiques.
Par exemple, #FF77AA devient #F7A et #33CCEE peut s'écrire #3CE.
Pour que cette méthode fonctionne, tous les deux chiffres qui composent une paire doivent être identiques. En tant que tel, #FF8811 peut être raccourci mais pas #F7C63D.
Couleurs par valeur RGB
La deuxième méthode utilisée pour indiquer une couleur est l'échelle RVB.
Pour être juste, ce n'est pas tant une méthode différente qu'une notation alternative de la forme hexadécimale.
Les deux utilisent le modèle de couleur RGB (red-green-blue), bien que cette fois nous ne nous soucions pas des hexadécimaux.
La méthode RGB utilise simplement des décimales régulières pour désigner une couleur spécifique.
Voici un exemple de sa syntaxe.
h1 { color: rgb(255, 0, 0); }
Cela rendra vos titres rouges.
Le nombre 255 est simplement la forme décimale de FF.
On peut écrire red, #FF0000, #F00 ou rgb(255, 0, 0) pour le même effet.
De même, tout triplet hexadécimal peut facilement être converti en RGB avec des calculs simples.
La couleur #FFBA00 devient rgb(0, 186, 255). Comme B (11) x 16 + A (10) = 186.
Essayez-le vous-même.
p { color : #00BAFF ; }
em { color : rgb (0, 186, 255); }
Syntaxe différente, même couleur.
Mais à quoi sert la notation RGB si elle est identique à la forme hexadécimale ?
C'est une question de préférence.
Le format hexadécimal est souvent privilégié car il est facilement lisible et plus compact.
Il est toujours bon de connaître les deux, et il existe un cas particulier où il est plus pratique d'utiliser la représentation RGB.
Nous en apprendrons plus sur ce cas un peu plus loin dans ce chapitre.
De plus, vous pouvez également trouver la valeur RGB de n'importe quelle couleur en utilisant simplement un éditeur graphique tel que Photoshop.
<capturer>
Couleur de l'arrière plan
Nous avons vu comment changer la couleur du texte sur notre page web en CSS.
Mais comment modifier la couleur de fond ?
Pour indiquer une couleur de fond, il suffit d'utiliser la propriété background-color.
Cela fonctionne exactement de la même manière que la couleur, ce qui signifie que vous pouvez spécifier une couleur en tapant son nom, sa valeur RVB ou en utilisant la notation hexadécimale.
Essayons.
body
{
background-color : noir ;
color: white;
}
Ce qui devrait vous donner le résultat suivant.
<capturer>
Il n'y a rien de très compliqué dans ce code, il transforme simplement le fond en noir et le texte en blanc.
Mais pourquoi le titre et le texte sont-ils également blancs ? La propriété color n'est modifiée que sur la balise <body> !
Bon point.
C'est ce qu'on appelle l'héritage et c'est une caractéristique principale de CSS.
L'héritage est le processus par lequel les propriétés sont transmises des éléments parents aux éléments enfants.
Dans le cas des balises imbriquées, une fois qu'un style est appliqué à un élément, tous les autres éléments qu'il contient héritent du même style.
Dans notre exemple, puisque l'en-tête <h1> et les paragraphes <p> sont à l'intérieur de la balise body <body>, ils sont tous deux rendus avec les mêmes propriétés.
Si vous souhaitez appliquer un style à chaque élément de votre page Web comme dans notre démonstration, vous pouvez l'appliquer à la racine <html> ou à la balise <body>. C'est une question de préférence.
Donc à partir de maintenant chaque texte que j'écris sur ma page web sera blanc ?
Pas nécessairement.
Si vous appliquez un nouveau style à l'un des éléments enfants, les nouvelles propriétés prévaudront sur le style hérité.
Pour des raisons de démonstration, ajoutons quelques propriétés à notre exemple.
body
{
background-color : black;
color: white;
}
h1, strong
{
text-decoration: underline;
color: orangered;
}
Ce qui nous donne.
<capturer>
La définition la plus spécifique a priorité, donc les balises <strong> et <h1> seront orange tandis que tout autre texte restera blanc.
Cela est vrai pour chaque propriété CSS, pas seulement pour les couleurs de texte et d'arrière-plan.
Dégradés CSS3
D'accord... changer la couleur d'arrière-plan était plutôt cool.
Mais qu'en est-il de l'ajout d'un dégradé ?
Avant CSS3, vous deviez utiliser des images pour obtenir une transition entre deux ou plusieurs couleurs, un effet que vous pouvez maintenant obtenir simplement avec la propriété background-image.
Dégradés linéaires
Un dégradé de couleur linéaire ou axial est le type de dégradé le plus courant que vous rencontrerez.
Comme son nom l'indique, il fournit une transition entre deux ou plusieurs couleurs à travers un axe linéaire.
Voici le plan CSS de base pour un dégradé linéaire d'arrière-plan.
background-image: linear-gradient(direction, color1, color2);
La direction par défaut est de haut en bas.
Par exemple.
background-image: linear-gradient(yellow, orange);
Ce qui vous donnera le résultat suivant.
<capturer>
Comme mentionné ci-dessus, les dégradés linéaires sont par défaut verticaux et de haut en bas.
Si vous souhaitez modifier cela, vous pouvez très facilement ajouter une valeur de direction soit en la tapant, soit en fournissant un angle en degrés géométriques standard.
background-image: linear-gradient(to right, deepskyblue, lightskyblue);
background-image: linear-gradient(90deg, deepskyblue, lightskyblue);
Ces deux lignes restituent exactement le même dégradé, illustré ci-dessous.
<capturer>
Vous pouvez également indiquer une direction diagonale comme suit.
background-image: linear-gradient(to bottom right, orange, yellow);
Ce qui vous donnera naturellement un dégradé en diagonale.
<capturer>
Cela couvre à peu près tous les types de dégradé linéaire bicolore que vous rencontrerez.
Mais que faire si vous voulez avoir plus de deux couleurs ?
Il suffit d'ajouter les couleurs supplémentaires à la fin du code.
background-image: linear-gradient(skyblue, yellow, red);
Cela vous donnera un dégradé linéaire de trois couleurs de haut en bas (par défaut, non spécifié).
Le résultat est illustré ci-dessous.
<capturer>
Vous pouvez bien sûr utiliser autant de couleurs que vous le souhaitez et modifier le sens du dégradé comme nous l'avons vu précédemment.
Dégradés radiaux
Un dégradé radial est très similaire à un dégradé linéaire car ils produisent tous deux une transition dynamique entre deux couleurs ou plus.
En termes simples, un dégradé radial est une ellipse ou un cercle qui possède une couleur au bord et une autre au centre. Les couleurs sont calculées par interpolation linéaire en fonction de la distance au centre.
La syntaxe est très proche de celle du dégradé linéaire car la même propriété background-image est utilisée.
background-image: radial-gradient(shape, color1, color2);
La forme par défaut est l'ellipse.
La première couleur est la couleur au centre et la dernière couleur est celle la plus proche des bords.
Essayons.
background-image: radial-gradient(yellow, orangered);
Ce code devrait vous donner le résultat suivant.
<capturer>
Comme je l'ai dit, la forme par défaut est une ellipse.
Mais vous pouvez aussi en faire un cercle si vous le souhaitez.
La différence entre l'ellipse et le cercle est que le centre de ce dernier est équidistant de tout point.
Cela signifie que pour un cercle donné, le rayon sera toujours le même et l'excentricité sera de 0.
Voici comment créer un dégradé radial circulaire en CSS.
background-image: radial-gradient(circle, yellow, orangered);
Cela couvre tout ce que vous devez savoir sur les dégradés en CSS.
Image de fond
Tout comme nous pouvons changer la couleur de fond d'une page, ou d'un élément de celle-ci, nous pouvons également ajouter une image de fond.
Vous pouvez soit ajouter une image d'arrière-plan à l'ensemble de votre page, soit à un élément spécifique, tel qu'un titre ou un lien texte.
Nous verrons également comment répéter l'arrière-plan en mosaïque ou le faire "suivre" l'utilisateur lorsqu'il fait défiler la page.
Ajout d'une image de fond
Sans surprise, la propriété CSS dont vous avez besoin pour appliquer une image de fond n'est autre que background-image.
Nous avons déjà vu cette propriété lorsqu'il s'agit de dégradés et son utilisation avec des images est assez similaire.
La seule vraie différence est dans la valeur de cette propriété.
Au lieu d'être la fonction CSS linear-gradient ou radial-gradient, nous utiliserons la fonction url avec le chemin vers l'image que vous voulez comme arrière-plan.
Par exemple.
body { background-image: url("sagprofprog.png"); }
N'oubliez pas que pour que ce code fonctionne, l'image siteraw.png doit se trouver dans le même dossier que votre fichier CSS.
Ce code vous donnera quelque chose de proche de la figure ci-dessous.
<capturer>
L'image d'arrière-plan ne doit pas nécessairement être au format PNG, il peut également s'agir d'une image JPG ou GIF, comme nous l'avons appris dans notre chapitre Insertion d'images.
Une erreur courante consiste à écrire le chemin d'accès à l'image par rapport au fichier .html. Si votre image ne se charge pas, assurez-vous que le chemin est relatif au fichier .css. Dans notre exemple, puisque les fichiers .html et .css sont dans le même dossier, le chemin de l'image est identique dans les deux cas.
Propriétés de l'image d'arrière-plan
La propriété background-image est en elle-même très polyvalente : vous pouvez l'utiliser à la fois pour les dégradés et les images d'arrière-plan.
Mais il existe également plusieurs autres fonctionnalités CSS qui peuvent le compléter et vous permettre de modifier encore plus le comportement de votre image de fond.
Voici quelques-unes de ces fonctionnalités.
Pièce jointe d'arrière-plan
La première propriété que nous allons découvrir est l'attachement à l'arrière-plan.
Comme son nom l'indique, il sert à "attacher" le fond à la page ou à l'élément auquel il s'applique.
Voici les deux valeurs qu'il peut prendre :
- scroll : le fond défilera avec le reste de la page (par défaut)
- fixed : le fond restera fixe par rapport au viewport
Essayons avec notre exemple.
body
{
background-image: url("sagprofprog.png");
background-attachment: fixed;
}
Pour voir l'effet, vous avez besoin d'une quantité suffisante de contenu pour que les barres de défilement verticales apparaissent sur votre navigateur.
Si vous ne les avez pas, essayez d'ajouter du texte ou de réduire la taille de la fenêtre.
Répétition du fond
Par défaut, si l'image d'arrière-plan est plus petite que la fenêtre d'affichage, elle sera répétée en mosaïque horizontalement, verticalement ou les deux selon la taille de l'image et la résolution de l'écran de l'utilisateur.
Par exemple.
<capturer>
Ce comportement peut être modifié avec la propriété background-repeat.
Voici les valeurs qu'il peut prendre.
- repeat: l'image sera répétée à la fois horizontalement et verticalement (par défaut)
- repeat-x : l'image sera répétée horizontalement
- repeat-y : l'image sera répétée verticalement
- no-repeat : l'arrière-plan ne sera pas répété
Exemple d'utilisation.
body
{
background-image: url("sagprofprog.png");
background-repeat: no-repeat;
}
Taille d'arrière-plan
Par défaut, le fond prendra la taille exacte de votre image.
Mais vous pouvez également spécifier une valeur avec la propriété background-size.
Vous pouvez soit définir une valeur identique pour la hauteur et la largeur, soit les lister séparément en commençant par la largeur.
background-size : 50 % ;
/* La hauteur et la largeur seront réduites de moitié par rapport à leurs valeurs d'origine */
background-size : 300px 450px ;
/* Largeur : 300px, Hauteur : 450px */
Pour indiquer une valeur de longueur, vous pouvez utiliser des pouces, des pixels, des pourcentages ou toute autre unité que nous avons vue dans le chapitre Formatage du texte.
Si vous souhaitez que la hauteur ou la largeur s'adaptent automatiquement à la taille de l'image, utilisez simplement la valeur auto.
Il s'agit de la valeur par défaut de la propriété background-size.
background-size : auto auto ;
Position d'arrière-plan
La dernière propriété que nous aborderons concerne la position de l'image de fond.
Vous pouvez spécifier comment l'image d'arrière-plan doit être positionnée avec background-position.
Cette propriété n'est intéressante que si vous définissez background-repeat sur no-repeat (un arrière-plan non répétitif).
Voici les valeurs qu'il peut prendre.
- top: au sommet
- bottom : en bas
- left : à gauche
- right : à droite
- center : centered
Ces valeurs peuvent être combinées.
Pour aligner votre image d'arrière-plan avec le coin supérieur droit, vous écririez.
background-position: top right;Au lieu des valeurs prédéfinies répertoriées ci-dessus, vous pouvez également spécifier une paire de longueurs pour représenter la position de l'image d'arrière-plan par rapport au coin supérieur gauche de la page ou de l'élément auquel elle est appliquée, en commençant par la gauche.
background-position: 35px 50px;Le code ci-dessus positionnera votre image d'arrière-plan en haut à gauche, avec un décalage de 35 pixels par rapport à la gauche et un décalage de 50 pixels par rapport au haut.
La super-propriété d'arrière-plan
Nous avons découvert pas mal de façons de modifier notre arrière-plan, que ce soit en le remplissant d'une couleur, en ajoutant une image ou même en tempérant avec sa taille, son attache et sa position.
Le seul problème est que tout cela peut devenir assez gênant à écrire chaque fois que nous décidons d'ajuster notre arrière-plan.
Considérez le code suivant.
body
{
background-color: #f00; /* Si l'image ne se charge pas */
background-image: url("sagprofprog.png"); /* Notre image de fond */
background-repeat: no-repeat; /* L'arrière-plan ne sera pas répété */
background-attachment: fixed; /* L'arrière-plan restera fixe */
background-position: top right; /* Le fond sera aligné en haut à droite */
}
Plutôt long.
Et si je vous disais qu'il y avait un moyen de raccourcir tout ce que je viens d'écrire en une seule propriété CSS ?
C'est tout à fait faisable avec la super-propriété background.
Les propriétés abrégées ou "super-propriétés" sont utilisées pour minimiser la syntaxe en combinant les valeurs de plusieurs propriétés liées.
Voici comment cela fonctionne.
background: <color> <image> <repeat> <attachment>
L'ordre dans lequel les valeurs sont placées est important.
Pour en revenir à notre exemple, l'utilisation de la super-propriété background transforme notre code en ce qui suit.
background: #f00 url("sagprofprog.png") no-repeat fixed top right;
Vous n'êtes pas obligé d'utiliser toutes les propriétés. Ceux qui ne sont pas spécifiés prendront simplement leur valeur par défaut.
Par exemple, si vous ne vouliez qu'une couleur d'arrière-plan et une image d'arrière-plan, vous écririez.
background : #f00 url("sagprofprog.png");
Si pour une raison quelconque l'image d'arrière-plan ne peut pas être chargée, la couleur d'arrière-plan sera affichée à la place. Il s'agit d'une pratique CSS courante.
Les propriétés raccourcies ou super-propriétés sont très utiles pour condenser et simplifier votre code CSS.
Pour l'instant nous n'avons appris que le background, mais nous en verrons bien d'autres dans ce tutoriel.
Transparence
Alors maintenant que nous avons appris à coloriser notre texte, à changer les couleurs d'arrière-plan et même à insérer une image d'arrière-plan... que peut-il bien rester dans ce chapitre ?
Si vous avez deviné la transparence, cela prouve seulement que vous savez lire les titres. Toutes nos félicitations.
Il existe deux manières de gérer la transparence dans CSS : la méthode d'opacité et la notation RGBa.
Bien qu'ils soient très similaires en théorie, ils ont tous deux des utilisations pratiques distinctes.
La méthode de l'opacité
La méthode d'opacité utilise la propriété opacity.
Sa valeur est un nombre décimal compris entre 0 et 1 :
- une valeur de 1 rendra l'élément complètement opaque (par défaut)
- une valeur de 0 rendra l'élément complètement transparent
Tout ce qui se trouve entre les deux sera ajusté en conséquence.
Ainsi, une opacité de 0,7 produira un élément opaque à 70 % (et transparent à 30 %).
Voici comment il peut être utilisé.
p { opacity: 0.7 ; }
Pour un exemple plus révélateur visuellement, regardez le code suivant.
body
{
background: #000;
color: #fff;
}
p
{
background: orangered;
opacity: 0.5;
}
Et le résultat.
<capturer>
L'élément <body> a un fond noir et du texte blanc.
La décimale d'opacité n'est pas spécifiée, elle prendra donc la valeur par défaut, 100 % d'opacité.
D'autre part, nous avons défini l'opacité de la balise <p> à 50 %.
Vous pouvez voir le résultat ci-dessus : les paragraphes sont à moitié transparents.
Mais pourquoi le texte est-il transparent ? Et si je veux seulement que l'arrière-plan se fonde dans le reste de la page ?
Bon point.
L'application de la propriété opacity à un élément affectera chaque élément contenu dans l'élément, y compris le texte, les images et même d'autres blocs de contenu.
Si vous souhaitez que seule la couleur de fond soit transparente, vous devez utiliser la notation RGBa que nous allons découvrir.
La notation RGBa
Au début de ce chapitre, lorsque nous introduisions les différentes méthodes pour spécifier les couleurs, j'ai précisé que le format hexadécimal était généralement préféré sauf pour un cas où la notation RVB était plus pratique.
C'est de cela que je parlais : la notation RGBa.
C'est la même chose que la notation RVB avec un paramètre supplémentaire appelé canal alpha, qui gère la transparence.
Ce quatrième composant contrôle le niveau de transparence de la même manière que la propriété d'opacité que nous avons vue plus haut : une valeur de 1 rendra la couleur opaque, une valeur de 0 la rendra complètement transparente (invisible).
Essayons.
p
{
background-color: rgb(255, 0, 0);
/* Un fond rouge */
background-color: rgba(255, 0, 0, 0.5);
/* Un rouge semi-transparent */
}
Contrairement à l'opacité, seule la couleur de fond sera affectée par les niveaux de transparence.
Ceci conclut le chapitre sur les couleurs et les arrière-plans.
Aucun commentaire