✨ Semaine 2 - Jour 5 : Pseudo-éléments & Transitions

📚 Objectifs du jour

Découverte des pseudo-éléments (::before, ::after) pour ajouter du contenu décoratif, et des transitions CSS pour créer des animations fluides et professionnelles.

🎭 Pseudo-éléments

::before et ::after

Injectent du contenu avant ou après un élément

.element::before {
  content: '📌 ';
}

.element::after {
  content: ' ✨';
}
Contenu avec décorations

Citation stylisée

.quote::before {
  content: '"';
  position: absolute;
  font-size: 5em;
  color: #3498db;
  opacity: 0.3;
}
Les pseudo-éléments sont des outils puissants pour enrichir le design sans toucher au HTML.

Badge de notification

.button::after {
  content: '5';
  position: absolute;
  top: -10px;
  right: -10px;
  background: #e74c3c;
  border-radius: 50%;
}
Messages

Tooltip (info-bulle)

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  opacity: 0;
}

.tooltip:hover::after {
  opacity: 1;
}
Survolez-moi

🎬 Transitions CSS

Transition simple

.button {
  transition: all 0.3s ease;
}

.button:hover {
  background: #e74c3c;
  transform: scale(1.1);
}
Survolez-moi pour voir la transition

Propriétés multiples

transition:
  background-color 0.5s,
  transform 0.3s,
  box-shadow 0.4s;
Chaque propriété a sa propre durée

⏱️ Timing Functions

Courbes d'accélération (Survolez chaque box)

ease (défaut) | linear | ease-in | ease-out | ease-in-out
ease
linear
ease-in
ease-out
ease-in-out

💡 Recommandation : ease-out pour la plupart des interactions

🎨 Exemples avancés

Bouton avec effet ripple

.button::before {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: width 0.6s, height 0.6s;
}

.button:hover::before {
  width: 300px;
  height: 300px;
}
Survolez-moi ! 🎯

Card Flip (retournement)

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(180deg);
}
FACE AVANT
FACE ARRIÈRE 🎉

Survolez la carte pour la retourner

Barre de progression animée

.progress-fill {
  width: 0%;
  transition: width 2s ease-out;
}

.progress-bar:hover .progress-fill {
  width: 75%;
}
75%

Survolez la barre pour l'animer

📊 Propriétés transition

Syntaxe complète

transition:
  [property] /* Propriété à animer */
  [duration] /* Durée (ex: 0.3s) */
  [timing-function] /* Courbe (ease, linear...) */
  [delay]; /* Délai (ex: 0.1s) */
/* Exemple */
transition: transform 0.3s ease-in-out 0.1s;

Propriétés animables

  • ✅ color, background-color
  • ✅ width, height
  • ✅ margin, padding
  • ✅ transform (scale, rotate, translate)
  • ✅ opacity
  • ✅ box-shadow, border
  • ❌ display (non animable)

🎯 Best Practices

✅ Bonnes pratiques

  • Utiliser transform plutôt que left/top (meilleures perfs)
  • Durées : 0.2s-0.4s pour les interactions
  • Préférer ease-out pour les hovers
  • Tester sur appareils mobiles
  • Ne pas animer trop de propriétés à la fois
  • ::before/::after pour décorations seulement

❌ À éviter

  • Transitions trop longues (> 0.6s)
  • Animer width/height (utiliser scale)
  • Trop d'animations simultanées
  • Pseudo-éléments avec contenu important
  • Oublier les préfixes navigateurs si besoin
  • content: '' sans display ou position
Froggiesplaining :


🎯 Objectifs :
✅ Utiliser ::before et ::after pour du contenu décoratif
✅ Créer des transitions fluides avec transition
✅ Comprendre les timing functions (ease, linear, etc.)
✅ Combiner pseudo-éléments et transitions
✅ Créer des effets avancés (ripple, flip, tooltip)

📖 Points clés :
• ::before/::after nécessitent content
• transition: all 0.3s ease = syntaxe rapide
• transform est plus performant que left/top
• ease-out : démarrage rapide, fin lente
• Durée idéale : 0.2s-0.4s pour interactions

🏋️ Exercice :
Créez des boutons call-to-action avec :
• Transition au hover (couleur + élévation)
• Badge de notification avec ::after
• Effet ripple avec ::before
• Tooltip informatif

Froggie

GitHub - eCrea