CSS avancé

Plongez dans les techniques CSS les plus sophistiquées. Custom properties, container queries, animations 3D, et bien plus — pour créer un dashboard futuriste digne de Tony Stark.

Variables CSS avancées
Container queries
Animations 3D

Concepts CSS de haut niveau

Voici la différence entre du CSS basique et du CSS de niveau expert. Nous allons créer un dashboard STARK Industries avec les techniques les plus avancées.

CSS traditionnel

css

.card {
  width: 300px;
  height: 200px;
  background: #333;
  border: 1px solid #666;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card:hover {
  background: #444;
  transform: scale(1.05);
}

Fonctionnel mais limité

CSS expert

css

.smart-card {
  --card-hue: 200;
  --card-size: clamp(250px, 40vw, 350px);
  
  container-type: inline-size;
  width: var(--card-size);
  aspect-ratio: 1.6;
  background: hsl(var(--card-hue), 70%, 15%);
  border: 1px solid hsl(var(--card-hue), 50%, 30%);
  border-radius: calc(var(--card-size) * 0.06);
  backdrop-filter: blur(20px);
  
  transform: perspective(1000px) rotateX(0deg);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@container (min-width: 300px) {
  .smart-card__content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: calc(var(--card-size) * 0.06);
  }
}

Adaptatif, moderne et puissant

Techniques CSS de pointe

Six familles de propriétés que le CSS moderne a apportées, et que les cours de base ne couvrent pas.

Custom properties

--primary-hue: 200;

Variables CSS intelligentes

hsl(var(--hue), 70%, 50%)

Manipulation de couleurs

calc(var(--size) * 1.5)

Calculs mathématiques

Le cours dédié aux variables CSS
Container queries

container-type: inline-size

Conteneur intelligent

@container (min-width: 400px)

Responsivité par conteneur

container-name: card-container

Conteneurs nommés

L’introduction aux container queries
Fonctions modernes

clamp(1rem, 5vw, 3rem)

Valeurs dynamiques

min(50vw, 400px)

Minimum adaptatif

max(1rem, 4vmin)

Maximum intelligent
Transforms 3D

perspective(1000px)

Perspective 3D

rotateX(45deg) rotateY(30deg)

Rotations 3D

transform-style: preserve-3d

Préservation 3D

Le cours dédié aux animations
Clip & masking

clip-path: polygon(0 0, 100% 0, 90% 100%, 0 90%)

Formes complexes

mask-image: radial-gradient(...)

Masques dégradés

mask-composite: subtract

Composition masques
Propriétés logiques

margin-inline-start: 1rem

Marges logiques

border-block-end: 2px solid

Bordures directionnelles

inset-inline: 0

Positionnement logique

Exercices pratiques avancés

Mettez en pratique vos nouvelles compétences avec ces trois exercices progressifs. Chacun utilise des techniques CSS de pointe pour créer des interfaces modernes.

Exercice 1 : carte adaptive intelligente

Container queries + custom properties + fonctions modernes

Objectif

Créez une carte qui s’adapte à la taille de son conteneur, utilise des variables CSS pour les couleurs thématiques et des effets 3D au survol.

La carte change de disposition selon la largeur de son CONTENEUR, pas de la fenêtre.

Code à implémenter

CSS à compléter

css

.adaptive-card {
  --card-hue: 200;
  --card-size: clamp(200px, 30vw, 300px);
  
  /* TODO: Ajouter container-type */
  /* TODO: Définir les dimensions avec aspect-ratio */
  /* TODO: Background avec hsl() et variables */
  /* TODO: Perspective 3D */
}

@container (min-width: 250px) {
  /* TODO: Layout grid pour grand format */
}

.adaptive-card:hover {
  /* TODO: Transform 3D au survol */
}

HTML

html

<div class="adaptive-card">
  <div class="adaptive-card__content">
    <div class="adaptive-card__icon">🦾</div>
    <div class="adaptive-card__info">
      <h4>MARK 85</h4>
      <p>Armure adaptative</p>
    </div>
  </div>
</div>

css

.adaptive-card {
  --card-hue: 200;
  --card-size: clamp(200px, 30vw, 300px);
  
  container-type: inline-size;
  width: var(--card-size);
  aspect-ratio: 1.4;
  background: linear-gradient(135deg, 
    hsl(var(--card-hue), 60%, 20%), 
    hsl(var(--card-hue), 40%, 10%)
  );
  border: 1px solid hsl(var(--card-hue), 50%, 30%);
  border-radius: calc(var(--card-size) * 0.08);
  padding: calc(var(--card-size) * 0.06);
  
  perspective: 1000px;
  transform: perspective(1000px) rotateX(0deg);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

@container (min-width: 250px) {
  .adaptive-card__content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--card-size) * 0.06);
    align-items: center;
    height: 100%;
  }
}

.adaptive-card:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(-5deg) scale(1.05);
}

Exercice 2 : animation holographique

Keyframes avancées + clip-path + filters + variables

Objectif

Créez un avatar holographique avec des animations en couches : rotation, pulsation, balayage de lumière et effets de filtre. L’animation doit être fluide et cyclique.

Trois animations superposées — pulsation, balayage, rotation de l’anneau.

Code à implémenter

CSS à compléter

css

@keyframes hologram-rotate {
  /* TODO: Rotation 360° en 4s */
}

@keyframes hologram-pulse {
  /* TODO: Pulsation d'opacité et scale */
}

@keyframes hologram-scan {
  /* TODO: Balayage avec clip-path */
}

.hologram-avatar {
  --holo-color: 120;
  /* TODO: Position relative pour les couches */
  /* TODO: Dimensions avec aspect-ratio */
  /* TODO: Border avec hsl() */
  /* TODO: Effets de filtre */
}

.hologram-avatar::before {
  /* TODO: Pseudo-élément pour le scan */
}

css

@keyframes hologram-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hologram-pulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1); 
    filter: hue-rotate(0deg);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05); 
    filter: hue-rotate(90deg);
  }
}

@keyframes hologram-scan {
  0% { clip-path: circle(0% at 50% 50%); }
  50% { clip-path: circle(60% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

.hologram-avatar {
  --holo-color: 200;
  position: relative;
  width: 120px;
  aspect-ratio: 1;
  border: 2px solid hsl(var(--holo-color), 70%, 50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hologram-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px hsl(var(--holo-color), 70%, 50%));
}

.hologram-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, 
    transparent, 
    hsl(var(--holo-color), 70%, 70%),
    transparent
  );
  border-radius: 50%;
  animation: hologram-scan 2s ease-in-out infinite;
}

.hologram-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid hsl(calc(var(--holo-color) + 60), 70%, 50%);
  border-radius: 50%;
  animation: hologram-rotate 4s linear infinite;
}

Exercice 3 : dashboard futuriste

CSS Grid avancé + subgrid + fonctions CSS + propriétés logiques

Objectif

Créez un dashboard complexe qui s’adapte à différentes tailles d’écran avec des zones définies par CSS Grid, utilisant des fonctions modernes et des propriétés logiques.

Six zones nommées, réagencées par une media query à 768 px.

Code à implémenter

CSS à compléter

css

.dashboard {
  --grid-gap: clamp(0.5rem, 2vw, 1rem);
  --min-column: clamp(150px, 20vw, 300px);
  
  /* TODO: Grid avec auto-fit et minmax */
  /* TODO: Grid-template-areas pour les zones */
  /* TODO: Gap avec variable */
  /* TODO: Padding avec propriétés logiques */
}

@media (min-width: 768px) {
  .dashboard {
    /* TODO: Layout desktop complexe */
    grid-template-areas:
      "header header header sidebar"
      "main main chart sidebar"
      "main main status sidebar"
      "footer footer footer sidebar";
  }
}

css

.dashboard {
  --grid-gap: clamp(0.5rem, 2vw, 1rem);
  --min-column: clamp(150px, 20vw, 300px);
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column), 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: var(--grid-gap);
  padding-block: var(--grid-gap);
  padding-inline: var(--grid-gap);
  min-height: 100vh;
}

.dashboard > * {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--grid-gap) * 0.8);
  padding-block: var(--grid-gap);
  padding-inline: var(--grid-gap);
}

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 2fr 1fr 1fr 200px;
    grid-template-rows: auto 2fr 1fr auto;
    grid-template-areas:
      "header header header sidebar"
      "main main chart sidebar"
      "main main status sidebar"
      "footer footer footer sidebar";
  }
  
  .dashboard__header { grid-area: header; }
  .dashboard__main { grid-area: main; }
  .dashboard__chart { grid-area: chart; }
  .dashboard__status { grid-area: status; }
  .dashboard__sidebar { grid-area: sidebar; }
  .dashboard__footer { grid-area: footer; }
}

Dashboard STARK Industries

Voici le résultat final : un dashboard futuriste utilisant toutes les techniques CSS avancées. Interface digne du laboratoire de Tony Stark, avec des animations, des effets 3D et une adaptabilité parfaite.

Grid à zones nommées, custom properties pour la teinte, propriétés logiques pour les espacements.

Custom properties

Variables CSS intelligentes pour les couleurs, espacements et animations
CSS Grid avancé

Layout complexe avec grid-template-areas et auto-placement
Animations 3D

Keyframes complexes, transforms 3D et transitions fluides
Effets modernes

Backdrop-filter, clip-path, masks et filtres avancés

Le CSS avancé est acquis

Vous venez de découvrir les techniques CSS les plus sophistiquées. Continuez votre apprentissage pour devenir un expert en développement web moderne.

Maîtriser les animations CSS Grid expert

Votre parcours expert CSS

Custom properties
Container queries
Animations 3D
Effets avancés
Expert CSS

Les autres pages CSS

Les bases du CSS

Syntaxe, sélecteurs, modèle de boîte
Ouvrir le cours
Variables CSS

Custom properties et theming
Ouvrir le cours
Responsive

S’adapter à chaque écran
Ouvrir le cours
Animations

Mettre en mouvement
Ouvrir le cours

CSS avancé

Concepts CSS de haut niveau

🔧 CSS traditionnel

🚀 CSS expert

Techniques CSS de pointe

🎛️ Custom properties

📐 Container queries

🧮 Fonctions modernes

🎲 Transforms 3D

✂️ Clip & masking

🧭 Propriétés logiques

Exercices pratiques avancés

Exercice 1 : carte adaptive intelligente

Objectif

Code à implémenter

Exercice 2 : animation holographique

Objectif

Code à implémenter

Exercice 3 : dashboard futuriste

Objectif

Code à implémenter

Dashboard STARK Industries

🎛️ Custom properties

📐 CSS Grid avancé

✨ Animations 3D

🔮 Effets modernes

Le CSS avancé est acquis

Votre parcours expert CSS

Les autres pages CSS

Les bases du CSS

Variables CSS

Responsive

Animations

CSS traditionnel

CSS expert

Custom properties

Container queries

Fonctions modernes

Transforms 3D

Clip & masking

Propriétés logiques

Custom properties

CSS Grid avancé

Animations 3D

Effets modernes