LEÇON 2

Les noms de couleur prédéfinis sont des mots-clés simples qui représentent des couleurs spécifiques. Voici quelques exemples :

Conteneur Flex : L'élément parent qui contient les éléments flexibles. Vous définissez un conteneur flex en ajoutant display: flex; ou display: inline-flex; à son style CSS.

• red : rouge
• blue : bleu
• green : vert
• yellow : jaune
• black : noir
• white : blanc

Le code hexadécimal (0 à F) est une représentation numérique des couleurs en utilisant une combinaison de six chiffres hexadécimaux. Chaque paire de chiffres représente les valeurs de rouge, vert et bleu (RVB) communément RGB en anglais respectivement. Par exemple :

• #FF0000 : rouge pur
• #00FF00 : vert pur
• #0000FF : bleu pur

On peut aussi utiliser une version courte du code hexadécimal avec trois chiffres. Par exemple :

• #F00 : rouge pur
• #0F0 : vert pur
• #00F : bleu pur

Dans ce cas, chaque chiffre est répété pour représenter les valeurs RVB.

La fonction rgb() permet de spécifier une couleur en utilisant les valeurs de rouge, vert et bleu dans une plage de 0 à 255. Par exemple :

• rgb(255, 0, 0) : rouge pur
• rgb(0, 255, 0) : vert pur
• rgb(0, 0, 255) : bleu pur

4. Utilisation de la fonction rgba()

La fonction rgba() est similaire à rgb(), mais elle permet également de spécifier une valeur d'opacité (alpha) pour la couleur. L'opacité est définie par un nombre compris entre 0 (complètement transparent) et 1 (complètement opaque). Par exemple :

• rgba(255, 0, 0, 0.5) : rouge pur avec une opacité de 50%

5. Utilisation de la fonction hsl()

La fonction hsl() permet de spécifier une couleur en utilisant les composantes teinte, saturation et luminosité. Les valeurs sont définies comme suit :

• Teinte (H) : une valeur entre 0 et 360 degrés représentant la couleur elle-même
• Saturation (S) : une valeur entre 0% (gris) et 100% (pleinement saturé)
• Luminosité (L) : une valeur entre 0% (noir) et 100% (blanc)

Par exemple :

• hsl(0, 100%, 50%) : rouge pur
• hsl(120, 100%, 50%) : vert pur
• hsl(240, 100%, 50%) : bleu pur

En CSS, vous pouvez créer des dégradés de couleur avec les propriétés linear-gradient() et radial-gradient(). Ces dégradés permettent de passer en douceur d'une couleur à une autre selon un angle ou un rayon spécifié.

Les filtres CSS, tels que brightness(), contrast(), blur(), sepia() et bien d'autres, permettent d'appliquer des effets spéciaux aux couleurs. Par exemple, brightness(200%) augmente la luminosité de la couleur, tandis que blur(5px) ajoute un flou à la couleur.

.image-floue {
                                filter: blur(5px);
                            }

Dégradé linéaire linear-gradient()

La fonction linear-gradient() en CSS permet de créer un dégradé de couleur linéaire entre deux ou plusieurs couleurs, suivant une direction spécifiée. Voici comment elle fonctionne en détail :

Syntaxe de base :

linear-gradient(direction, color1, color2, ...);

• direction : Spécifie la direction du dégradé. Cela peut être défini en utilisant des valeurs d'angle (deg), des mots-clés (to top, to bottom, to left, to right, etc.) ou des pourcentages (par rapport à l'axe horizontal ou vertical).
• color1, color2, ... : Les couleurs entre lesquelles le dégradé sera créé. Vous pouvez spécifier autant de couleurs que vous le souhaitez.

Exemples :

• Dégradé de haut en bas (du rouge au bleu) :

linear-gradient(to bottom, red, blue);

• Dégradé de gauche à droite (du vert au jaune) :

linear-gradient(to right, green, yellow);

• Dégradé en diagonale (du violet au cyan) :

linear-gradient(45deg, violet, cyan);

• Dégradé horizontal répété (du rouge au jaune) :

linear-gradient(to right, red, yellow 50%, red);

Dans cet exemple, le dégradé va du rouge au jaune sur la première moitié, puis revient au rouge. Le dégradé va du rouge à partir du début de l'élément jusqu'à atteindre 50% de sa largeur, puis commence à se mélanger au jaune jusqu'à la fin de l'élément où il redevient rouge.

Fonctionnement

La fonction linear-gradient() crée une image de dégradé qui peut être utilisée comme valeur de propriété CSS. Cette image est ensuite appliquée comme arrière-plan à l'élément spécifié. Les couleurs spécifiées dans la fonction sont mélangées les unes aux autres le long de la ligne ou de l'axe défini par la direction, créant ainsi une transition en douceur d'une couleur à l'autre.

Vous pouvez ajuster la répartition des couleurs en utilisant des pourcentages pour définir les points d'arrêt le long de l'axe. Cela permet de contrôler précisément où chaque couleur commence et se termine dans le dégradé.

La fonction linear-gradient() est utile pour créer des arrière-plans et des effets visuels intéressants sur les éléments HTML, comme des boutons, des bannières et des barres de navigation. Avec ses nombreuses options de personnalisation, elle offre une grande flexibilité pour réaliser des designs uniques et attrayants.

La fonction radial-gradient() en CSS permet de créer un dégradé de couleur radial qui rayonne à partir d'un point central vers l'extérieur. Voici comment elle fonctionne en détail :

Syntaxe de base :

radial-gradient(shape size at position, color1, color2, ...);

• shape : Spécifie la forme du dégradé radial, comme circle (cercle) ou ellipse (ellipse).
• size : Détermine la taille du dégradé radial, par exemple, closest-side, farthest-corner, etc.
• position : Définit le point central du dégradé, en utilisant des valeurs de pourcentage ou en mots-clés (comme center, top, left, etc.).
• Couleurs du dégradé : Vous spécifiez les couleurs qui composent le dégradé. Vous pouvez indiquer plusieurs couleurs et leurs positions dans le dégradé. Chaque position définit à quel point du rayonnement radial la couleur doit commencer à apparaître.
• Positions de couleur : Les positions de couleur indiquent à quel point du rayonnement radial une couleur donnée commence à apparaître. Elles sont généralement exprimées en pourcentage de la distance radiale depuis le centre du dégradé.
• Combinaison : En combinant la forme, la position centrale et les couleurs du dégradé, vous créez un effet visuel où les couleurs se mélangent à partir du point central et se propagent radialement vers l'extérieur.

Voici un exemple de syntaxe CSS pour un dégradé radial simple :

radial-gradient(circle at 50% 50%, red, yellow, green);

Dans cet exemple :

• circle indique une forme de cercle pour le dégradé.
• at 50% 50% définit le point central du dégradé au centre de l'élément.
• red, yellow et green sont les couleurs utilisées dans le dégradé, sans positions spécifiques, ce qui signifie qu'elles se fondent progressivement les unes dans les autres à partir du centre vers l'extérieur.

Propriétés CSS liées à la couleur

En plus des méthodes de spécification de couleur, voici quelques propriétés CSS importantes qui peuvent être utilisées pour manipuler les couleurs :

• color : spécifie la couleur du texte
• background-color : spécifie la couleur de fond d'un élément
• border-color : spécifie la couleur des bordures
• box-shadow : spécifie la couleur de l'ombre d'une boîte
• text-shadow : spécifie la couleur de l'ombre du texte

En combinant ces différentes méthodes et propriétés, vous pouvez créer une variété de styles et d'effets visuels pour vos éléments HTML. Amusez-vous à expérimenter avec les couleurs pour obtenir le look parfait pour votre site web.