Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 3 : Couleurs, fonds et dégradés Aperçu gratuit

3.1 — Maîtriser les couleurs CSS

📋 Objectifs d'apprentissage

  • Utiliser les notations hex, rgb, rgba, hsl
  • Appliquer des fonds (background-color, image, gradient)
  • Créer des dégradés linéaires et radiaux
🌈 Formats de couleurs CSS #3498DB (hex) rgb(231,76,60) rgba(46,204,113,0.5) /linearGradientlinear-gradient()

Les 4 formats de couleur

color: #3498DB;              /* Hexadécimal (le plus utilisé) */
color: rgb(52, 152, 219);    /* RGB 0-255 */
color: rgba(52,152,219,0.5); /* RGB + transparence */
color: hsl(207, 70%, 53%);   /* Teinte, saturation, luminosité */

Dégradés CSS

background: linear-gradient(to right, #e74c3c, #f1c40f);
background: radial-gradient(circle, #3498db, #2c3e50);

Les dégradés sont des images générées par le navigateur. Pas besoin de fichier image.

🔑 À retenir

Utilisez rgba() pour la transparence : le 4e paramètre (0 à 1) contrôle l'opacité. Très utile pour les superpositions et les effets de verre (glassmorphism).

Ceci est un aperçu gratuit.
Voir la formation complète