Plongez dans les techniques CSS les plus sophistiquées ! Custom Properties, Container Queries, Animations 3D, et bien plus. Créez un dashboard futuriste digne de Tony Stark.
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.
.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é
.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);
}
}🤯 Adaptif, moderne et puissant !
--primary-hue: 200;
Variables CSS intelligentes
hsl(var(--hue), 70%, 50%)
Manipulation de couleurs
calc(var(--size) * 1.5)
Calculs mathématiques
container-type: inline-size
Conteneur intelligent
@container (min-width: 400px)
Responsivité par conteneur
container-name: card-container
Conteneurs nommés
clamp(1rem, 5vw, 3rem)
Valeurs dynamiques
min(50vw, 400px)
Minimum adaptatif
max(1rem, 4vmin)
Maximum intelligent
perspective(1000px)
Perspective 3D
rotateX(45deg) rotateY(30deg)
Rotations 3D
transform-style: preserve-3d
Préservation 3D
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
margin-inline-start: 1rem
Marges logiques
border-block-end: 2px solid
Bordures directionnelles
inset-inline: 0
Positionnement logique
Mettez en pratique vos nouvelles compétences avec ces 3 exercices progressifs. Chacun utilise des techniques CSS de pointe pour créer des interfaces modernes.
Container Queries + Custom Properties + Fonctions modernes
Armure adaptative
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.
CSS (à compléter) :
.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 :
<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>.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);
}Keyframes avancées + Clip-path + Filters + Variables
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.
CSS (à compléter) :
@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 */
}@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;
}CSS Grid avancé + Subgrid + CSS Functions + Logical Properties
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.
CSS (à compléter) :
.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";
}
}.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; }
}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.
R&D Division • Status: Operational
Variables CSS intelligentes pour les couleurs, espacements et animations
Layout complexe avec grid-template-areas et auto-placement
Keyframes complexes, transforms 3D et transitions fluides
Backdrop-filter, clip-path, masks et filtres avancés
Vous venez de découvrir les techniques CSS les plus sophistiquées ! Continuez votre apprentissage pour devenir un expert en développement web moderne.