Couleurs et Backgrounds

Maîtriser les couleurs en CSS

Le CSS offre de nombreuses façons de définir des couleurs.

Formats de couleurs

Noms de couleurs

h1 {
    color: red;
    background-color: lightblue;
}

147 noms disponibles (red, blue, green, yellow, etc.)

Hexadécimal

/* Format long */
h1 {
    color: #ff0000; /* Rouge */
}

/* Format court */
h1 {
    color: #f00; /* Rouge */
}

/* Exemples courants */
color: #000000; /* Noir */
color: #ffffff; /* Blanc */
color: #333333; /* Gris foncé */
color: #ff5733; /* Orange */

RGB

h1 {
    color: rgb(255, 0, 0); /* Rouge */
    color: rgb(0, 128, 255); /* Bleu clair */
}

RGBA (avec transparence)

div {
    background-color: rgba(255, 0, 0, 0.5); /* Rouge 50% transparent */
    color: rgba(0, 0, 0, 0.8); /* Noir 80% opaque */
}

HSL (Teinte, Saturation, Luminosité)

h1 {
    color: hsl(0, 100%, 50%); /* Rouge */
    color: hsl(120, 100%, 50%); /* Vert */
    color: hsl(240, 100%, 50%); /* Bleu */
}

/* HSLA avec transparence */
div {
    background: hsla(200, 70%, 50%, 0.5);
}

Propriétés de couleur

/* Couleur du texte */
p {
    color: #333;
}

/* Couleur de fond */
div {
    background-color: #f5f5f5;
}

/* Couleur de bordure */
div {
    border: 2px solid #007bff;
}

/* Opacité */
div {
    opacity: 0.8; /* 0 = invisible, 1 = opaque */
}

Images de fond

/* Image simple */
div {
    background-image: url('image.jpg');
}

/* Ne pas répéter */
div {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
}

/* Répéter horizontalement */
div {
    background-repeat: repeat-x;
}

/* Position */
div {
    background-position: center;
    background-position: top right;
    background-position: 50% 50%;
}

/* Taille */
div {
    background-size: cover; /* Couvre tout */
    background-size: contain; /* Contient tout */
    background-size: 200px 100px; /* Taille fixe */
}

/* Notation courte */
div {
    background: url('image.jpg') no-repeat center/cover;
}

Dégradés linéaires

/* Dégradé vertical */
div {
    background: linear-gradient(to bottom, #ff0000, #00ff00);
}

/* Dégradé horizontal */
div {
    background: linear-gradient(to right, #ff0000, #00ff00);
}

/* Dégradé diagonal */
div {
    background: linear-gradient(45deg, #ff0000, #00ff00);
}

/* Plusieurs couleurs */
div {
    background: linear-gradient(
        to bottom,
        #ff0000 0%,
        #ffff00 50%,
        #00ff00 100%
    );
}

/* Dégradé moderne */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Dégradés radiaux

div {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

/* Ellipse */
div {
    background: radial-gradient(ellipse, #ff0000, #00ff00);
}

/* Position personnalisée */
div {
    background: radial-gradient(circle at top left, #ff0000, #00ff00);
}

Multiples backgrounds

div {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('image.jpg') no-repeat center/cover;
}

Exemples pratiques

/* Bouton avec dégradé */
.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Hero section */
.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
        url('hero-bg.jpg') no-repeat center/cover;
    height: 500px;
    color: white;
}

/* Carte avec ombre */
.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

Variables CSS (Custom Properties)

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.alert-success {
    background-color: var(--success-color);
    color: white;
}

Points clés

• Hex (#ff0000), RGB, RGBA, HSL pour les couleurs
• background-image pour les images de fond
• linear-gradient pour les dégradés
• rgba() pour la transparence
• Variables CSS (--nom) pour réutiliser

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !