🎨 Semaine 2 - Jour 4 : Backgrounds & Pseudo-classes

📚 Objectifs du jour

Aujourd'hui, nous allons explorer les arrière-plans CSS en profondeur (couleurs, gradients, images, motifs) et maîtriser les pseudo-classes pour créer des interactions riches.

🌈 Backgrounds avancés

Couleur solide

.element {
  background-color: #3498db;
}
Background couleur unie

Gradient linéaire

background: linear-gradient(
  to right,
  #667eea,
  #764ba2
);
Gradient horizontal

Gradient radial

background: radial-gradient(
  circle,
  #f093fb 0%,
  #f5576c 100%
);
Gradient circulaire

Gradient multi-couleurs

background: linear-gradient(
  135deg,
  #667eea 0%,
  #764ba2 50%,
  #f093fb 100%
);
3 couleurs en dégradé

Image de fond

.hero {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

Hero Section

Image en arrière-plan

Motif répétitif

background-image: repeating-linear-gradient(
  45deg,
  transparent,
  transparent 35px,
  rgba(255,255,255,.1) 35px,
  rgba(255,255,255,.1) 70px
);
Motif rayé

Backgrounds multiples (overlay)

.element {
  background-image:
    linear-gradient(rgba(52, 152, 219, 0.8), rgba(52, 152, 219, 0.8)),
    url('image.jpg');
  background-size: cover;
}

Overlay coloré sur image

Technique très utilisée pour améliorer la lisibilité du texte

🎯 Pseudo-classes d'interaction

:hover (survol)

.element:hover {
  background: #e74c3c;
  transform: scale(1.05);
}
Survolez-moi ! 🎯

✅ Usage : Feedback visuel au survol

:focus (focus input)

input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

♿ Accessibilité : Essentiel pour la navigation clavier

États des liens

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
Lien non visité Survolez pour voir :hover

:active (au clic)

État actif pendant le clic

button:active {
  transform: scale(0.95);
}

🔢 Pseudo-classes structurelles

:nth-child() - Cibler des enfants spécifiques

li:first-child { background: #e74c3c; }
li:last-child { background: #1abc9c; }
li:nth-child(odd) { border-left: 4px solid #3498db; }
li:nth-child(even) { border-left: 4px solid #f39c12; }
li:hover { background: #3498db; color: white; }
  • Premier élément (first-child)
  • Élément pair (even)
  • Élément impair (odd)
  • Élément pair (even)
  • Élément impair (odd)
  • Dernier élément (last-child)

💡 Astuce : Survolez les items pour voir l'effet hover !

📝 Pseudo-classes de formulaire

États des inputs

input:focus { border-color: #3498db; }
input:valid { border-color: #1abc9c; }
input:invalid { border-color: #e74c3c; }
input:disabled { opacity: 0.6; cursor: not-allowed; }

✅ :checked (checkbox/radio)

Checkbox personnalisée

input[type="checkbox"]:checked + label {
  color: #1abc9c;
  font-weight: bold;
}


Exemple pratique : Card interactive

Survole-moi !

Cette carte utilise :hover pour créer un effet d'élévation.

.card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: translateY(-5px);
}

🎓 Récapitulatif

Backgrounds

  • background-color : couleur unie
  • linear-gradient : dégradé linéaire
  • radial-gradient : dégradé circulaire
  • background-image : image
  • background-size: cover : remplit l'élément
  • Multiples backgrounds : superposition

Pseudo-classes essentielles

  • :hover : survol souris
  • :focus : élément actif (accessibilité)
  • :active : au moment du clic
  • :nth-child() : enfants spécifiques
  • :first-child / :last-child
  • :valid / :invalid : validation formulaires
  • :checked : checkbox/radio cochés
Froggiesplaining :


🎯 Objectifs :
✅ Créer des gradients linéaires et radiaux
✅ Gérer les images de fond (cover, position)
✅ Utiliser :hover, :focus, :active pour l'interactivité
✅ Styliser avec :nth-child() et pseudo-classes structurelles
✅ Gérer les états de formulaire (:valid, :invalid, :checked)

📖 Points clés :
• linear-gradient : to right, 135deg, etc.
• background-size: cover : remplit tout l'espace
• :hover : feedback visuel essentiel
• :focus : crucial pour l'accessibilité
• :nth-child(odd/even) : zébrage automatique

🏋️ Exercice :
Créez une galerie de cards avec :
• Gradient en background
• Effet hover (élévation + ombre)
• Liste avec :nth-child pour alterner les couleurs

Froggie

GitHub - eCrea