Dégradés et Backgrounds

Dégradés linéaires

/* Dégradé vertical (par défaut) */
.gradient {
  background: linear-gradient(#FF6B6B, #4ECDC4);
}

/* Dégradé horizontal */
.gradient {
  background: linear-gradient(to right, #FF6B6B, #4ECDC4);
}

/* Dégradé diagonal */
.gradient {
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
}

/* Dégradé avec plusieurs couleurs */
.gradient {
  background: linear-gradient(to right, #FF6B6B, #FFE66D, #4ECDC4);
}

/* Dégradé avec points d'arrêt */
.gradient {
  background: linear-gradient(
    to right,
    #FF6B6B 0%,
    #FFE66D 50%,
    #4ECDC4 100%
  );
}

Dégradés radiaux

/* Dégradé radial depuis le centre */
.gradient {
  background: radial-gradient(circle, #FF6B6B, #4ECDC4);
}

/* Dégradé radial avec position */
.gradient {
  background: radial-gradient(circle at top right, #FF6B6B, #4ECDC4);
}

---

Exemple pratique : Hero section avec dégradé

Voici un exemple interactif de hero section avec dégradé sophistiqué :

❌ Exemple introuvable : mm2b/cours-2-typographie/hero-degrade

Points à observer

• Dégradé à plusieurs couleurs avec différents points d’arrêt
• Effets de texture avec pseudo-élément ::before
• Boutons avec différents styles (primary et secondary)
• Cartes avec effets hover en dessous

---

Dégradés avancés

Dégradé avec transparence

.gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

Utile pour superposer un dégradé sur une image :

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}

Dégradé multicolor

.rainbow {
  background: linear-gradient(
    90deg,
    #FF6B6B 0%,
    #FFE66D 20%,
    #4ECDC4 40%,
    #95E1D3 60%,
    #FF6B6B 80%,
    #FFE66D 100%
  );
}

Dégradé diagonal avec angle précis

.diagonal {
  /* 0deg = haut, 90deg = droite, 180deg = bas, 270deg = gauche */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

---

Backgrounds avancés

Image de fond

.hero {
  background-image: url('../images/hero-bg.jpg');
  background-size: cover;        /* Couvre toute la zone */
  background-position: center;   /* Centré */
  background-repeat: no-repeat;  /* Pas de répétition */
}

/* Syntaxe courte */
.hero {
  background: url('../images/hero-bg.jpg') center/cover no-repeat;
}

Propriétés background-size

/* Couvre toute la zone (peut rogner l'image) */
.cover {
  background-size: cover;
}

/* Contient l'image entière (peut laisser des espaces) */
.contain {
  background-size: contain;
}

/* Taille spécifique */
.fixed {
  background-size: 500px 300px;
}

/* Largeur fixe, hauteur auto */
.fixed-width {
  background-size: 100% auto;
}

Propriétés background-position

.hero {
  /* Mots-clés */
  background-position: center; /* ou top, bottom, left, right */

  /* Combinaisons */
  background-position: top right;
  background-position: center bottom;

  /* Valeurs précises */
  background-position: 50% 50%; /* Centre */
  background-position: 0 0; /* Coin supérieur gauche */
  background-position: 20px 40px; /* 20px de la gauche, 40px du haut */
}

---

Superposer dégradé et image

.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url('../images/hero-bg.jpg') center/cover no-repeat;
  color: white;
}

Le dégradé noir semi-transparent assombrit l’image pour améliorer la lisibilité du texte.

Exemple avec couleur :

.hero-colorful {
  background:
    linear-gradient(135deg, rgba(93, 95, 239, 0.8), rgba(255, 101, 132, 0.8)),
    url('../images/hero-bg.jpg') center/cover no-repeat;
  color: white;
}

---

object-fit pour les images

Pour les images dans des balises <img>, utilisez object-fit :

.chapter-thumbnail {
  width: 100%;
  height: 300px;
  object-fit: cover; /* Couvre la zone sans déformation */
  object-position: center;
}

Valeurs de object-fit

/* Couvre la zone (peut rogner l'image) */
.cover {
  object-fit: cover;
}

/* Contient l'image entière (peut laisser des espaces) */
.contain {
  object-fit: contain;
}

/* Étire l'image (peut la déformer) */
.fill {
  object-fit: fill;
}

/* Aucun redimensionnement */
.none {
  object-fit: none;
}

/* Réduit pour s'adapter, comme contain mais plus petit */
.scale-down {
  object-fit: scale-down;
}

Exemple pratique :

<div class="image-grid">
  <img src="image1.jpg" alt="Image 1" class="thumbnail">
  <img src="image2.jpg" alt="Image 2" class="thumbnail">
  <img src="image3.jpg" alt="Image 3" class="thumbnail">
</div>

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.thumbnail {
  width: 100%;
  height: 250px;
  object-fit: cover; /* Toutes les images ont la même taille */
  border-radius: 0.5rem;
}

---

Motifs et textures

Motif répété

.pattern {
  background-image: url('../images/pattern.png');
  background-repeat: repeat; /* ou repeat-x, repeat-y, no-repeat */
  background-size: 50px 50px; /* Taille du motif */
}

Multiples backgrounds

Vous pouvez combiner plusieurs backgrounds :

.multi-background {
  background-image:
    url('../images/pattern.png'),
    linear-gradient(#FF6B6B, #4ECDC4);
  background-repeat:
    repeat,
    no-repeat;
  background-size:
    50px 50px,
    cover;
}

---

Effets visuels

Ombre portée sur texte

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Plusieurs ombres */
h1 {
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.5),
    -2px -2px 4px rgba(255, 255, 255, 0.5);
}

Ombre portée sur boîte

.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Plusieurs ombres */
.card-fancy {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Ombre interne */
.card-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

---

Backgrounds en variables CSS

Organisez vos backgrounds avec des variables :

:root {
  --gradient-primary: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
  --gradient-secondary: linear-gradient(45deg, #667eea 0%, #764ba2 100%);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.hero {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
}