Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

COULEUR ET OPACITE D’UN TEXTE EN CSS

La couleur en CSS

Nous allons changer la couleur d’un texte avec la propriété color, que nous avons déjà vue auparavant dans ce cours.

Jusqu’à présent, nous n’avons donné que des noms de couleurs (en anglais) comme valeurs à cette propriété.

Cependant, color accepte différents types de valeurs :

  • Un nom de couleur (red, blue, etc.) ;
  • Une valeur hexadécimale (#AA8811, etc.) ;
  • Une valeur RGB ou RGBa.

Nous allons voir ce que signifie et comment utiliser chaque type de valeurs.

Les noms de couleurs

La façon la plus simple de changer la couleur d’un texte est de donner le nom d’une couleur (en anglais) en valeur de la propriété color.

Le problème avec cette manière de procéder est que nous sommes très limités dans le choix de nos couleurs.

En effet, bien que les versions récentes des grands navigateurs supportent jusqu’à 160 couleurs et nuances différentes (ce qui est déjà peu), il n’y a que 16 qui soient réellement, universellement supportées.

Pour information, vous pouvez trouver ci-dessous ces 16 noms de couleurs avec leur équivalent en notation hexadécimale (que nous allons étudier juste après).

Noms de couleur propriété CSS color

Comme je vous l’ai dit, il est très simple de modifier la couleur d’un texte en indiquant le nom d’une couleur :

Création de page HTML pour tester la propriété CSS color

Utilisation de la propriété CSS color avec nom de couleur

Nos textes ont changé de couleur grâce à CSS color

Essayer ce code

Les valeurs hexadécimales

Le mot « hexadécimal » signifie « qui fonctionne en base 16 ». Généralement, dans la vie de tous les jours, nous comptons en base 10 : dès que nous arrivons à 10, nous avons une première dizaine et nous recommençons avec les unités à partir de 0 : 10, 11, 12, etc.

Le système hexadécimal va lui compter non pas par dizaines mais par seizaines. Les « unités » de 10 à 15 vont être représentées par les lettres A, B, C, D, E et F.

Par exemple, l’équivalent de « 12 » en base hexadécimale est « 0C ».

Dès qu’on arrive à 16, on a un première seizaine et un recommence avec les unités à partir de zéro, tout comme on le ferait avec les dizaines.

Voyez plutôt le tableau suivant afin de bien comprendre comment ça fonctionne :

Equivalent base 10 Equivalent base 16
00 00
01 01
02 02
03 03
04 04
05 05
06 06
07 07
08 08
09 09
10 0A
11 0B
12 0C
13 0D
14 0E
15 0F
16 10
17 11
32 20
42 2A

Comme vous pouvez le voir, c’est juste une autre façon de compter à laquelle nous ne sommes pas habitués. Ne vous formalisez pas trop là dessus.

Si je vous parle de tout cela, c’est parce que la propriété CSS color va accepter justement des valeurs hexadécimales qui vont représenter une couleur.

Le grand intérêt de ces valeurs est que nous allons cette fois-ci pouvoir choisir parmi 16 millions de nuances de couleurs !

Pour construire une valeur hexadécimale pour la propriété color, vous devez tout d’abord commencer par un dièse (#) afin de dire à la propriété que vous allez utiliser une valeur hexadécimale.

Ensuite, vous allez devoir indiquer trois suites de valeurs représentant respectivement les intensités de rouge, de vert et de bleu dont va être composée votre couleur.

Chacune de ces trois intensités va devoir être comprise entre 0 et 255 en base 10, c’est-à-dire entre 00 et FF en notation hexadécimale.

Si vous êtes un peu perdu à ce stade, pas de panique, ne lâchez pas : nous allons voir différents exemples afin que vous compreniez plus facilement.

Regardez plutôt les couleurs suivantes. La notation correspond à la valeur hexadécimale de chaque couleur.

Explication de la notation hexadécimale des couleurs

Notre première couleur est un rouge pur. Comme vous pouvez le voir, la notation hexadécimale qui a permis de la créer contient une intensité maximale de rouge (les deux premiers chiffres : FF), une intensité minimale de vert (les deux chiffres du milieu : 00) et une intensité également minimale de bleu (les deux derniers chiffres : 00).

Notre deuxième couleur est un jaune pur. On l’obtient en mixant une intensité maximale de rouge (les deux premiers chiffre : FF), une intensité maximale de vert (les deux chiffres du milieu : FF) et une intensité minimale de bleu (les deux derniers chiffres : 00).

De même, on obtient les couleurs « lime » (vert pur), « aqua » (vert-bleu) et « blue » (bleu pur) en réglant différemment les intensités de chacune de nos trois couleurs de base.

Vous devez bien retenir surtout que l’on crée une couleur en utilisant une valeur hexadécimale en mixant trois couleurs de base qui sont le rouge, le vert et le bleu avec des intensités différentes.

Comme je vous l’ai dit précédemment, on peut choisir l’intensité de chaque couleur de base entre 00 et FF, c’est-à-dire en base 10 entre 0 et 255. Ainsi, nous pouvons créer 255 * 255 * 255 couleurs différentes, c’est-à-dire plus de 16 millions !

Si vous comprenez bien ce principe de mélange d’intensité, vous pourrez créer simplement n’importe quelle couleur. Pour créer du orange, par exemple, vous savez que la bonne notation va se situer entre #FF0000 (rouge pur) et #FFFF00 (jaune pur).

Vous pouvez alors tenter quelque chose comme #FF8800 par exemple, et vous obtiendrez à coup sûr une nuance d’orange. Vous n’aurez ensuite plus qu’à affiner les intensités jusqu’à arriver à la couleur voulue.

Notez que la couleur noire correspond à une intensité minimale de rouge, vert et bleu (donc #000000) tandis que la couleur blanche correspond à une intensité maximale de rouge, vert et bleu (donc #FFFFFF).

Notez également que lorsque chacune de vos intensités possède le même chiffre des seizaines et des unités, vous pouvez ne préciser qu’un chiffre. Par exemple, écrire #FFFFFF ou plus simplement #FFF revient au même, tout comme écrire #AA8800 et #A80.

Page HTML notation hexadécimale color CSS

Utilisation de la propriété CSS color avec des valeurs hexadécimales

Nos textes ont changé de couleur grâce à CSS color et aux valeurs hexadécimales

Essayer ce code

Les valeurs RGB

RGB signifie « Red Green Blue » (rouge, vert, bleu). Ce type de valeur utilise le même système de nuances que les valeurs hexadécimales, à part que cette fois-ci nous allons de nouveau compter « normalement ».

Pour créer une couleur RGB, nous allons à nouveau devoir indiquer trois intensités de rouge, de vert et de bleu qui vont être mixées pour créer une couleur. La différence est que cette fois-ci nous indiquons bien l’intensité entre 0 et 255, et non pas entre 00 et FF.

Voici comment on va créer nos couleurs en utilisant les valeurs de type RGB :

Démonstration des valeurs RGB de color

Utilisation de la propriété CSS color avec des valeurs RGB

Nos textes ont changé de couleur grâce à CSS color et aux valeurs RGB

Essayer ce code

Le grand intérêt des valeurs de type RGB, en plus de la création possible de plus de 16 millions de couleurs différentes, est que cette notation va également nous permettre de gérer l’opacité de nos textes.

L’opacité des textes

Il y a deux manières de gérer l’opacité (le fait d’être plus ou moins transparent) des textes.

La première est en utilisant la propriété CSS opacity. Cette propriété va prendre une valeur entre 0 (texte totalement transparent) et 1 (texte totalement opaque).

La deuxième façon est d’indiquer une quatrième valeur définissant l’opacité dans nos notations RGB. Dans ce cas là, la notation devient RGBa.

Cette quatrième valeur, tout comme pour opacity, doit être comprise entre 0 (texte transparent) et 1 (texte opaque).

Voyons immédiatement en pratique comment tout cela fonctionne.

Gestion de l’opacité d’un texte

On peut gérer l’opacité avec la propriété CSS opacity ou avec les notations RGBa

Nos textes sont plus ou moins transparents

Essayer ce code

Chapitre précédent

Chapitre suivant