Propriétés CSS3

CSS3 est la dernière évolution du langage des feuilles de style en cascade. Plutôt qu'une version monolithique unique, CSS3 est divisé en modules indépendants — Animations, Flexbox, CSS Grid, Arrière-plans et Bordures, Transformations, Filtres, et bien d'autres — que les navigateurs peuvent implémenter et livrer séparément. Chaque module a ajouté de nouvelles propriétés à l'ensemble original de CSS2, vous offrant des coins arrondis, des dégradés, des ombres, des animations, des mises en page flexibles et en grille, ainsi que des filtres visuels sans images ni JavaScript.

Cette page est un index de référence rapide des propriétés introduites ou considérablement étendues dans CSS3, organisées par le module auquel elles appartiennent. Chaque ligne renvoie à un chapitre complet avec la syntaxe, les valeurs et des exemples interactifs.

Si vous débutez avec ce langage, commencez par les chapitres Introduction au CSS et Syntaxe CSS avant de vous plonger dans les propriétés individuelles.

Comment utiliser cette référence

• Trouvez une propriété par groupe. Les titres ci-dessous reflètent les modules CSS3 : si vous avez besoin d'une propriété de mise en page, cherchez sous Flexible Box Layout ou Grid Layout ; pour le mouvement, cherchez sous Animation ou Transitions ; pour les effets visuels, cherchez sous Effets de filtre ou Propriétés de transformation.
• Cliquez pour les détails. Chaque propriété renvoie à son propre chapitre avec la liste complète des valeurs, les valeurs par défaut et des démonstrations interactives.
• Vérifiez la compatibilité navigateur. Les modules CSS3 ont atteint une prise en charge stable et sans préfixe à des moments différents. La plupart des propriétés ci-dessous fonctionnent dans tous les navigateurs modernes, mais vérifiez toujours la compatibilité des ajouts plus récents (par exemple, certaines propriétés column-*) avant de les utiliser en production.

Note sur les préfixes vendeurs

Pendant que les modules CSS3 étaient encore expérimentaux, les navigateurs livraient les propriétés avec des préfixes vendeurs tels que -webkit-, -moz-, -ms-, et -o-. Vous pouvez encore les rencontrer dans des bases de code plus anciennes :

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

Pour les propriétés listées ci-dessous, vous n'avez presque jamais besoin de préfixes aujourd'hui — écrivez le nom standard sans préfixe. Utilisez les préfixes uniquement lorsque vous devez prendre en charge un navigateur obsolète, et listez toujours la propriété standard en dernier afin qu'elle remplace les autres.

CSS3 vs CSS2 — Qu'est-ce qui a changé ?

CSS2 couvrait le modèle de boîte fondamental, les couleurs, les polices et le positionnement. CSS3 a construit sur cette base avec les capacités suivantes qui étaient absentes ou très limitées auparavant :

• Coins arrondis et images de bordure — border-radius, border-image
• Ombres — box-shadow, text-shadow
• Dégradés et arrière-plans multiples — background-size, background-clip
• Mises en page flexibles et en grille — Flexbox (flex, align-items, …), Grid (grid, grid-template-columns, …)
• Transformations 2D et 3D — transform, perspective
• Changements d'état fluides — transition
• Animations par images-clés — animation, @keyframes
• Texte multi-colonnes — column-count, column-gap
• Filtres visuels — filter (flou, luminosité, contraste, …)
• Transparence personnalisée — opacity

Liste des propriétés CSS3

Propriétés d'animation

Les animations par images-clés vous permettent de décrire comment un élément passe par une série d'instantanés de style. La règle @keyframes définit ces instantanés ; les propriétés animation-* les attachent et les contrôlent sur un élément.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Propriétés d'arrière-plan

CSS3 a étendu les arrière-plans pour prendre en charge le dimensionnement, les régions de rognage et plusieurs images superposées sur un seul élément.

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Propriétés de bordure

CSS3 a ajouté les coins arrondis et les bordures basées sur des images — des fonctionnalités qui nécessitaient auparavant des astuces avec des images.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Couleur et transparence

Effets de filtre

La propriété filter applique des effets graphiques (flou, luminosité, contraste, ombre portée, etc.) directement en CSS — sans éditeur d'image.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox est un modèle de mise en page unidimensionnel — il distribue les éléments le long d'un seul axe (ligne ou colonne) et gère automatiquement l'alignement, l'espacement et le retour à la ligne.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

Pour un guide complet, consultez Le guide ultime de Flexbox.

Propriétés de police

CSS Grid

CSS Grid est un système de mise en page bidimensionnel — il place les éléments dans des lignes et des colonnes simultanément, ce qui le rend idéal pour les mises en page de niveau page et les grilles de composants complexes.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Propriétés de mise en page multi-colonnes

La mise en page multi-colonnes fait circuler le contenu automatiquement sur un nombre ou une largeur définis de colonnes — similaire à une mise en page de journal.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Propriétés de contour

Propriétés de texte

CSS3 a ajouté le contrôle du débordement de texte, du retour à la ligne, des ombres et d'un style de décoration affiné.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Propriétés de transformation

Les transformations déplacent, font pivoter, redimensionnent ou inclinent les éléments dans l'espace 2D ou 3D sans affecter le flux du document.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Propriétés de transition

Les transitions animent les changements de propriété d'une valeur à une autre sur une durée spécifiée lorsqu'une propriété CSS change (ex. : au survol :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Transitions vs. animations : utilisez transition pour les changements pilotés par l'état (survol, focus, actif) — elles sont plus simples à écrire. Utilisez animation avec @keyframes pour un mouvement indépendant, en boucle ou en plusieurs étapes qui se déclenche sans interaction de l'utilisateur.

Propriétés de mise en forme visuelle

Références connexes

Une fois que vous savez quelle propriété vous avez besoin, ces chapitres couvrent en profondeur les fonctionnalités CSS3 les plus utilisées :

• CSS Animation et @keyframes pour les animations basées sur des images-clés.
• Le guide ultime de Flexbox pour la mise en page unidimensionnelle.
• grid et grid-template-columns pour la mise en page bidimensionnelle.
• filter pour le flou, la luminosité, le contraste, les ombres portées et d'autres effets graphiques.
• transform et transition pour les effets visuels et les changements d'état fluides.
• border-radius et box-shadow pour le style décoratif moderne.

Pratique