Mémo CSS3

Unité	Type	Description
`px`	Absolue	Pixels (fixe)
`%`	Relative	% du parent
`em`	Relative	× taille police parent
`rem`	Relative	× taille police racine (html)
`vw/vh`	Viewport	% largeur/hauteur écran
`fr`	Grid	Fraction d'espace disponible

Sélecteurs

Cibler les éléments

La puissance du CSS réside dans sa capacité à cibler précisément les éléments. Des sélecteurs simples aux combinateurs avancés, maîtriser le ciblage est essentiel pour un code propre.

Sélecteurs de base

Les fondations pour attraper vos éléments HTML.

Démo Sélecteurs

Un paragraphe avec class="highlight"

Un paragraphe avec id="unique"

Un paragraphe normal

Une div avec class="highlight"

Code CSS correspondant

/* Cible tous les éléments avec la classe "highlight" */
.highlight {
    border: 2px solid var(--primary);
    color: var(--primary);
}

/* Cible l'élément unique avec l'ID "unique" */
#unique { ... }

/* Cible tous les <p> */
p { ... }

Combinateurs & Relations

Pour cibler des éléments selon leur position par rapport aux autres.

Démo Combinateurs (A > B)

Parent (A)

Enfant direct (B)

Conteneur

Petit-enfant (C)

A > B ne cible que l'enfant direct (le rouge).
A B ciblerait l'enfant ET le petit-enfant.

Combinateurs (Détails)

/* 1. Descendant : cible tous les <span> à l'intérieur de .box */
.box span { color: orange; }

/* 2. Enfant direct : cible uniquement les <li> qui sont directement dans <ul> */
ul > li { list-style: square; }

/* 3. Frère adjacent : cible le <p> qui suit directement un <h2> */
h2 + p { margin-top: 0; font-weight: bold; }

/* 4. Frères généraux : cible TOUS les <img> qui suivent un <h3> */
h3 ~ img { opacity: 0.8; border: 1px solid blue; }

/* 5. Groupement : applique le style à plusieurs sélecteurs */
h1, h2, .title { font-family: 'Outfit'; color: var(--secondary); }

Exemple de structure HTML complexe :

HTML & CSS

<!-- HTML -->
<div class="parent">
    <p>Enfant direct</p>
    <section>
        <p>Petit-enfant</p>
    </section>
</div>

/* CSS */
.parent p { /* Cible les DEUX paragraphes */ }
.parent > p { /* Cible UNIQUEMENT "Enfant direct" */ }

Pseudo-classes (États & Position)

Cibler un état particulier (interaction) ou une position spécifique dans la liste des éléments.

Interactif : Focus & Checked

Tapez ici (:focus)

Cochez-moi (:checked) Super !

Démo Position (Nth-child)

Item 1 (:first-child)

Item 2 (:nth-child(even))

Item 3 (:nth-child(odd))

Item 4 (:nth-child(even))

Interactivité

button:hover {
    transform: scale(1.05);
}
input:focus {
    border-color: blue;
}
a:visited { /* Lien visité */ }
:not(.active) { /* Exclusion */ }

Structure

li:first-child { /* 1er */ }
li:last-child { /* Dernier */ }
li:nth-child(2) { /* 2ème */ }
li:nth-child(odd) { /* Impairs */ }
li:nth-child(3n) { /* Tous les 3 */ }

Pseudo-éléments

Cibler une partie spécifique d'un élément ou insérer du contenu décoratif.

Démo Pseudo-éléments

Cette première lettre est stylisée via ::first-letter. C'est idéal pour créer des lettrines élégantes dans vos articles ou paragraphes d'introduction.

Ce bloc utilise ::before et ::after pour ajouter des guillemets décoratifs sans modifier le HTML.

Sélectionnez ce texte à la souris pour voir l'effet ::selection personnalisé.

Code CSS Pseudo-éléments

/* 1. Générer du contenu (indispensable : content) */
.link::after {
    content: " ↗";
    font-size: 0.8em;
}

/* 2. Créer des formes décoratives */
.title::before {
    content: "";
    display: block;
    width: 50px;
    height: 4px;
    background: var(--primary);
    margin-bottom: 10px;
}

/* 3. Style de texte spécifique */
p::first-line { font-weight: bold; }
input::placeholder { color: #999; font-style: italic; }

Spécificité (priorité)

Sélecteur	Spécificité
`*`	0-0-0
`element`	0-0-1
`.classe`	0-1-0
`#id`	1-0-0
`style=""`	1-0-0-0
`!important`	∞ (éviter)

Box Model

Dimensions et espacements

Chaque élément HTML est une boîte. Comprendre le modèle de boîte (marges, bordures, padding, contenu) est le prérequis absolu pour contrôler la mise en page et les dimensions.

Modèle de boîte

margin

border

padding

content

Box Model

/* Box-sizing (recommandé) */
* { box-sizing: border-box; }

/* Dimensions */
width: 100%;    height: auto;
max-width: 1200px;  min-height: 100vh;

/* Margin (extérieur) */
margin: 20px;              /* 4 côtés */
margin: 10px 20px;         /* vertical | horizontal */
margin: 10px 20px 30px 40px; /* haut droite bas gauche */
margin: 0 auto;            /* Centrer horizontalement */

/* Padding (intérieur) */
padding: 20px;
padding-left: 10px;

/* Border */
border: 1px solid #ccc;
border-radius: 8px;  /* Coins arrondis */
border-radius: 50%;  /* Cercle */

Display (Le comportement des boîtes)

La propriété display définit comment un élément s'insère dans la mise en page et comment il interagit avec ses voisins.

Démo Comparaison Display

display: block (Divs classiques)

Bloc 1

Bloc 2

display: inline (Spans, liens) Inline 1 Inline 2 (Pas de largeur/hauteur possible)

display: inline-block

Box 1

Box 2

(Alignés mais acceptent des dimensions)

Code CSS Display

/* 1. Block (Par défaut pour div, p, h1...) */
.block { 
    display: block; 
    width: 100%; /* Occupe toute la largeur par défaut */
}

/* 2. Inline (Par défaut pour span, a, strong...) */
.inline { 
    display: inline; 
    /* Ignore width/height et margins top/bottom */
}

/* 3. Inline-block (Le meilleur des deux mondes) */
.btn { 
    display: inline-block; 
    width: 150px; 
    padding: 10px;
}

/* 4. Suppression du flux */
.hidden { display: none; } /* L'élément disparaît totalement */
.invisible { visibility: hidden; } /* Caché mais garde sa place */

Position (Le placement dans le flux)

La propriété position permet de sortir un élément du flux normal du document pour le placer précisément.

Démo System Position

Conteneur (position: relative)

Relative (top: 20px, left: 20px)

Absolute (bottom: 10, right: 10)

Centré (Absolute + Transform)

Code CSS Position

/* 1. Relative : Garde sa place dans le flux, décalage visuel seulement */
.relative { 
    position: relative; 
    top: 10px; left: 20px; 
}

/* 2. Absolute : Sort du flux, se place par rapport au premier parent POSITIONNÉ */
.parent { position: relative; } /* Référence pour l'enfant */
.child { 
    position: absolute; 
    top: 0; right: 0; 
}

/* 3. Fixed : Collé au viewport (écran), ne bouge pas au scroll */
.nav { position: fixed; top: 0; width: 100%; }

/* 4. Sticky : Hybride entre relative et fixed selon le scroll */
th { position: sticky; top: 0; background: white; }

💡 Astuce de centrage Absolute
Pour centrer un élément absolu : top: 50%; left: 50%; transform: translate(-50%, -50%);

Texte & Couleurs

Typographie et couleurs

Le design web, c'est avant tout de la typographie et de la couleur. CSS offre des outils puissants pour gérer les polices, l'alignement, et des palettes de couleurs modernes (HSL, RGB).

Typographie

Jouez avec les paramètres pour sentir l'impact de la typographie sur la lisibilité et le ton.

Playground Typographie

Taille: 1.2rem Graisse: 400 Espacement: 0px Interligne: 1.5

Le design web est 95% de typographie. Maîtriser l'espace blanc et la hiérarchie est la clé d'une interface élégante.

Typographie

font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;  /* 100-900, normal=400, bold=700 */
font-style: italic;
line-height: 1.6;
letter-spacing: 0.5px;
text-align: center;  /* left | right | justify */
text-transform: uppercase;
text-decoration: none;  /* underline | line-through */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  /* ... */

Couleurs & Fonds

Au-delà des couleurs unies, le CSS gère la transparence et les dégradés complexes.

Formats & Transparence

RGB / Hex
#264de4

HSL
hsl(227, 80%, 52%)

RGBA (0.5)

Dégradés (Gradients)

Linear (90deg)

Radial Circle

Conic/Multi

Couleurs

color: #fff;                /* Hex */
color: #ffffff;             /* Hex 6 digits */
color: rgb(255, 255, 255);  /* RGB */
color: rgba(255,255,255,0.8); /* RGBA (alpha) */
color: hsl(0, 0%, 100%);    /* HSL */
color: transparent;
color: currentColor;        /* Hérite */

Background (Images & Fonds)

Gérez comment les images de fond remplissent l'espace et se comportent au défilement.

Démo Background Context

size: cover

size: contain

repeat: repeat

Code Background Complet

/* Version détaillée */
.hero {
    background-image: url('assets/bg.jpg');
    background-size: cover;      /* Remplit tout l'espace */
    background-position: center;  /* Centre l'image */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Effet de parallaxe */
}

/* Version raccourcie (shorthand) */
.card {
    background: url('img.png') top right/contain no-repeat #f0f0f0;
}

/* Multiples fonds (le premier est au-dessus) */
.overlay {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('background.webp') center/cover;
}

Flexbox

Mise en page flexible

Flexbox a révolutionné la mise en page unidimensionnelle. Il distribue l'espace et aligne les éléments dans un conteneur (ligne ou colonne) avec une flexibilité incroyable.

Interactive Flexbox Playground

Expérimentez l'axe principal (justify) et l'axe secondaire (align) pour comprendre la puissance de Flexbox.

Playground : Direction & Alignement

flex-direction justify-content (Main Axis) align-items (Cross Axis)

Démo Flex Wrap & Gap

flex-wrap: wrap permet aux éléments de passer à la ligne s'ils manquent de place. gap gère l'espacement.

Item 1

Item 2

Item 3

Item 4

Item 5

Code Flexbox Architecture

.container {
    display: flex;
    flex-direction: row;     /* Axe principal : horizontal */
    justify-content: space-between; /* Espacement Main Axis */
    align-items: center;     /* Alignement Cross Axis */
    flex-wrap: wrap;         /* Passage à la ligne autorisé */
    gap: 20px;               /* Espace entre les items */
}

/* Astuce : Flex + Margin Auto = Magie */
.logo { margin-right: auto; } /* Pousse les autres éléments à droite */

Enfants Flex (Items)

.item {
    /* Shorthand : flex-grow | flex-shrink | flex-basis */
    flex: 1;        /* Équivalent à 1 1 0% (Prend tout l'espace) */
    
    align-self: flex-end; /* S'aligne différemment des autres */
    order: -1;           /* Passe en premier */
}

💡 Centrer parfaitement
display: flex; justify-content: center; align-items: center;

CSS Grid

Grilles bidimensionnelles

CSS Grid est le système de layout le plus complet. Il permet de diviser une page en régions majeures et de définir des relations de positionnement en deux dimensions (lignes et colonnes).

Interactive Grid Playground

Grid excelle pour les mises en page complexes en deux dimensions. Jouez avec les colonnes et l'espacement.

Playground : Colonnes & Gap

grid-template-columns gap (Espacement)

Démo Grid Areas (Layout Type)

Header

Nav

Main Content

Footer

Conteneur Grid

.grid-container {
    display: grid;
    /* Définir les colonnes (repeat, fr, minmax) */
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    
    gap: 20px; /* Espacement lignes et colonnes */
    
    /* Gestion de l'implicite (nouvelles lignes auto) */
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: dense; /* Remplit les trous vides */
    
    /* Distribution dans le conteneur (si espace vide) */
    justify-content: space-around;
    align-content: center;
    place-content: center space-around; /* Shorthand align/justify */
    
    /* Alignement des items dans leurs cellules */
    place-items: center stretch; /* Shorthand align/justify */
}

Sizing Keywords & Auto-flow

Maîtriser la taille intrinsèque du contenu et le flux automatique de la grille.

Démo min-content vs max-content

Min (Serré)

Max (Toute la ligne)

1fr (Reste)

min-content : réduit la cellule au plus petit possible sans débordement.
max-content : étend la cellule pour que le contenu tienne sur une seule ligne.

Auto-flow : dense

Le mode dense permet de combler les espaces vides si un petit élément arrive après un grand.

Large

Petit

Items de Grille

.item-special {
    grid-column: 1 / 3;  /* Début à la ligne 1, fin à 3 */
    grid-row: span 2;     /* S'étend sur 2 lignes */
    
    /* Centrage individuel */
    justify-self: center;
    align-self: center;
}

Template Areas (Le Graal)

.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   main"
        "footer footer footer";
}
.header { grid-area: header; }
.main   { grid-area: main; }

Animations & Transitions

Mouvement et effets

Donnez vie à vos interfaces. Les transitions adoucissent les changements d'état, tandis que les animations @keyframes permettent de scénariser des mouvements complexes.

Transitions & Timing Functions

Les transitions lissent le passage d'un état A à un état B. La "courbe de vitesse" (timing-function) dicte le ressenti.

Interactif : La course des courbes

Survolez (ou touchez) la zone ci-dessous pour lancer la transition.

linear

ease-out (Rapide au début)

ease-in (Lent au début)

cubic-bezier (Custom/Rebond)

Syntaxe Transition

.bouton {
    background: blue;
    /* property | duration | timing-function | delay */
    transition: background 0.3s ease-out;
}

.bouton:hover {
    background: red; /* Déclenche la transition */
}

Animations & Keyframes

Créez des scénarios complexes avec @keyframes. Contrôlez la séquence, la répétition et la direction.

Interactif : Animation Studio

Pause

🚀

Syntaxe @keyframes

@keyframes monAnimation {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); background: red; }
    100% { transform: scale(1); }
}

.element {
    /* name | duration | timing | delay | iteration | direction | fill-mode */
    animation: monAnimation 2s ease-in-out infinite;
    
    animation-play-state: paused; /* running | paused */
}

Transform

transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, -20px);
transform: scale(1.2);
transform: rotate(45deg);
transform: skew(10deg, 5deg);
transform: rotate(45deg) scale(1.2); /* Combiné */
transform-origin: center center;

Variables CSS

Custom Properties

Les Custom Properties (Variables CSS) apportent la dynamique. Stockez des valeurs réutilisables pour faciliter la maintenance et créer des thèmes.

Interactive Variable Playground

Les variables CSS ne sont pas figées : elles peuvent être modifiées à la volée via le thème ou même JavaScript.

Customiseur de Thème Dynamique

Couleur d'accent Arrondi : 12px Opacité fond

Composant Stylé
(Utilise des variables locales)

Déclaration et Portée

/* 1. Portée Globale (accessible partout) */
:root {
    --main-color: #264de4;
    --spacing-unit: 1rem;
}

/* 2. Portée Locale (écrase la globale pour ce bloc) */
.side-panel {
    --main-color: #ff4500;
}

/* 3. Utilisation avec Fallback */
body {
    color: var(--text-color, #1a1a1a);
}

Calculs et JavaScript

/* Calculs dynamiques */
.box {
    padding: calc(var(--spacing-unit) * 2);
    width: calc(100% - var(--side-width));
}

// Pilotage via JavaScript
element.style.setProperty('--accent', '#ff0000');

💡 Pourquoi pas SASS ?
Contrairement aux variables SASS qui sont compilées, les variables CSS sont natives, dynamiques (modifiables post-chargement) et respectent la cascade CSS.

Fonctions de Calcul & Fluidité

Les fonctions de comparaison permettent de créer des designs qui s'adaptent sans media queries complexes.

Visualiseur de Fluidité : clamp()

Redimensionner le parent :

Taille de texte adaptative

Cette ligne utilise clamp(1rem, 4vw, 2.5rem).
Taille actuelle : --

Comparaison & Math

/* clamp(min, pref, max) */
font-size: clamp(1rem, 5vw, 3rem);

/* min() / max() */
width: min(90%, 1200px); /* Ne dépasse jamais 1200px */
padding: max(20px, 5%); /* Toujours au moins 20px */

/* calc() */
height: calc(100vh - 80px);

Filtres & Effets Visuels

Les filtres permettent de modifier le rendu des images ou des fonds directement en CSS.

Studio de Filtres

Aperçu

Graphisme CSS

/* Filtre sur l'élément lui-même */
img { filter: grayscale(100%) blur(2px); }

/* Filtre sur ce qui est DERRIÈRE l'élément */
.glass-morphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
}

Architecture CSS

Méthodologie et Organisation

Organiser son code CSS est essentiel pour la maintenabilité. Une bonne architecture facilite les modifications, réduit les bugs et améliore la collaboration en équipe.

Méthodologies de Nommage (BEM)

BEM (Block Element Modifier) permet de créer des composants robustes et évite les conflits de styles par collision de noms.

Interactif : BEM en action

Titre de la Carte

Ceci est un élément __desc à l'intérieur du bloc card-demo.

Structure BEM

/* Block : Composant autonome */
.btn { padding: 10px; }

/* Element : Partie du bloc (__nom) */
.btn__icon { margin-right: 5px; }

/* Modifier : Variante ou état (--nom) */
.btn--primary { background: blue; }
.btn--large   { font-size: 1.2rem; }

Organisation (Le Pattern 7-1)

Pour les grands projets, on divise le CSS en plusieurs dossiers thématiques :

Architecture de dossiers

base/      /* reset.css, typography.css... */
components//* buttons.css, cards.css... */
layout/    /* header.css, footer.css, grid.css... */
pages/     /* home.css, contact.css... */
themes/    /* dark-theme.css, light-theme.css... */
utils/     /* variables.css, mixins.css... */
main.css   /* Point d'entrée (imports) */

Theming (Dark Mode)

L'architecture moderne utilise des variables pour gérer les thèmes dynamiquement via les media queries ou des classes.

Thème Natif

:root {
    --bg: #ffffff;
    --text: #333333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --text: #ffffff;
    }
}

💡 BEM & Nesting
Avec le nesting natif, vous pouvez maintenant écrire :
.card { &__title { ... } &--dark { ... } }

CSS Moderne

Nouvelles fonctionnalités puissantes

Le CSS ne cesse d'évoluer. Nesting, fonctions logiques, container queries : découvrez les fonctionnalités qui rendent le CSS natif aussi puissant que les préprocesseurs.

Sélecteurs de Parent & Groupement

/* :has() - Le sélecteur parent (ENFIN !) */
.card:has(.featured) { border: 2px solid gold; }
form:has(input:focus) { background: #f0f8ff; }

/* :is() vs :where() */
:is(h1, h2, h3) { color: var(--primary); }
/* :where() a une spécificité de 0 */
:where(.btn) { margin: 0; }

CSS Nesting (Natif)

/* Plus besoin de préprocesseur ! */
.card {
    background: white;
    &__title { font-size: 1.2rem; }
    &:hover { box-shadow: var(--shadow); }
    
    @media (min-width: 768px) {
        padding: 2rem;
    }
}

Démo Interactive : La puissance du `:has()`

:has() permet de changer le style d'un parent en fonction de ce qu'il contient ou de l'état de ses enfants.

Style dynamique du parent

Cochez une option pour voir le conteneur parent réagir :

Alerte (Border Red) Succès (Background Green)

Propriétés Logiques & Internationalisation

Utilisez les axes inline (horizontal) et block (vertical) plutôt que gauche/droite/haut/bas.

Syntaxe Logique

/* Écritures modernes */
margin-block: 20px;  /* Top & Bottom */
margin-inline: auto; /* Left & Right */
inset: 0;           /* Top/Right/Bottom/Left */
size: 100px;         /* Width & Height (prochainement) */

Block Axis (Vertical)

Inline Axis

Contenu

💡 Quick Tip : :is() vs :where()
Utilisez :is() pour regrouper des sélecteurs complexes en gardant leur poids. Utilisez :where() pour des styles de base (reset) que vous voulez écraser facilement plus tard.

Référence rapide

Propriétés essentielles

Une vue d'ensemble synthétique des propriétés indispensables pour le développeur front-end moderne.

Box Model & Layout

Dimensions

widthLargeurDéfinit la largeur de l'élément.width: 100px; heightHauteurDéfinit la hauteur de l'élément.height: 50vh; max-widthLargeur MaxEmpêche l'élément de dépasser une largeur.max-width: 800px; aspect-ratioRatio d'aspectForce un ratio largeur/hauteur.aspect-ratio: 16 / 9;

Spacing

marginMarge externeEspace à l'extérieur de la bordure.margin: 20px auto; paddingMarge interneEspace entre le contenu et la bordure.padding: 15px; gapEspacementEspace entre les items (Flex/Grid).gap: 20px;

Border

borderBordureDessine une ligne autour de l'élément.border: 1px solid red; border-radiusArrondiArrondit les coins de l'élément.border-radius: 8px; outlineContourLigne extérieure, ne prend pas de place.outline: 2px solid blue;

Display

displayType d'affichageComportement de rendu (block, flex...).display: flex; opacityOpacitéNiveau de transparence (0 à 1).opacity: 0.5; overflowDébordementGère le contenu qui dépasse.overflow: hidden; object-fitRemplissage objetComment une image remplit son cadre.object-fit: cover;

Position

positionPositionnementMode de placement (relative, absolute...).position: absolute; z-indexOrdre d'empilementProfondeur sur l'axe Z (couches).z-index: 10; insetDécalageRaccourci top/right/bottom/left.inset: 0;

Flexbox & Grid

Flexbox

display: flexConteneur FlexActive le mode Flexbox sur le parent.display: flex; justify-contentAlignement PrincipalAligne sur l'axe principal (X par défaut).justify-content: center; align-itemsAlignement SecondaireAligne sur l'axe croisé (Y par défaut).align-items: center; flexFlex ShorthandRaccourci grow, shrink et basis.flex: 1;

Grid

display: gridConteneur GridActive le mode Grid sur le parent.display: grid; grid-template-columnsColonnesDéfinit la structure des colonnes.grid-template-columns: 1fr 1fr; grid-areaZone de grillePlace un item dans une zone nommée.grid-area: header; place-itemsAlignement GlobalRaccourci align/justify items.place-items: center;

Typographie & Couleurs

Police

font-familyFamille de policeListe des polices à utiliser.font-family: 'Arial', sans-serif; font-sizeTailleDéfinit la taille du texte.font-size: 1.2rem; line-heightInterligneHauteur de la ligne de texte.line-height: 1.6; clamp()Taille fluideBorne une valeur entre un min et un max.font-size: clamp(1rem, 5vw, 2rem);

Texte

text-alignAlignementAlignement horizontal du texte.text-align: center; text-transformCasseMajuscules, minuscules, etc.text-transform: uppercase; white-spaceEspaces blancsGère le retour à la ligne auto.white-space: nowrap; text-overflowDébordement texteGère la coupure (ex: points de suture).text-overflow: ellipsis;

Couleurs & Fond

colorCouleur texteDéfinit la couleur de la police.color: #264de4; backgroundArrière-planDéfinit le fond (couleur, image...).background: url('img.jpg'); linear-gradientDégradé linéaireTransition entre plusieurs couleurs.linear-gradient(to right, red, blue); accent-colorCouleur accentChange la couleur des inputs natifs.accent-color: var(--primary);

Animations & Interactivité

Transform

transformTransformationModifie l'espace (rotation, scale...).transform: rotate(45deg); translateTranslationDéplace l'élément sans changer le layout.translate: 10px 20px; scaleMise à échelleModifie la taille (zoom).scale: 1.2;

Transition

transitionTransitionAnime le passage d'un état à l'autre.transition: all 0.3s ease; durationDuréeTemps de l'animation.animation-duration: 2s; @keyframesÉtapes d'animDéfinit les étapes d'une animation.@keyframes spin { ... }

Avancé

filterFiltre visuelFlou, contraste, luminosité...filter: blur(5px); backdrop-filterFiltre d'arrière-planEffet vitré (Glassmorphism).backdrop-filter: blur(10px); clip-pathMasquageDéfinit une zone de visibilité précise.clip-path: circle(50%);

Interactivité

cursorCurseurModifie l'apparence de la souris.cursor: pointer; pointer-eventsÉvénements sourisDésactive/active le clic sur un élément.pointer-events: none; user-selectSélectionAutorise ou non la sélection du texte.user-select: none; scroll-behaviorComportement scrollActive le défilement fluide.scroll-behavior: smooth;

Logique & Variables

var()Variable CSSRécupère la valeur d'une custom property.color: var(--primary); calc()CalculEffectue des opérations mathématiques.width: calc(100% - 20px); min-inline-sizeTaille logiqueTaille minimale sur l'axe horizontal.min-inline-size: 300px;

💡 Quick Tip — Survolez n'importe quelle propriété pour voir sa définition et un exemple d'utilisation.

Galerie de Démos Visuelles

50+ effets CSS en action

L'apprentissage par l'exemple. Explorez cette collection de démos interactives pour visualiser concrètement le comportement des propriétés CSS.

Borders & Border-Radius

Variations de border-radius

Styles de bordure

solid

dashed

dotted

double

groove

ridge

Box-Shadow

Variations d'ombres

subtle

elevated

glow

inset

offset

Gradients

Types de dégradés

linear →

135deg

radial

conic

hard stop

Transform

Transformations (survolez)

scale

rotate

skewX

translateY

combo

Filters

Filtres CSS

Animations

Animations variées

bounce

spin

shake

fade

grow

Cursors

Types de curseurs

default

pointer

text

move

not-allowed

wait

crosshair

grab

zoom-in

col-resize

Text Effects

Effets de texte

text-shadow

gradient text

text stroke

letter-spacing

word spacing demo

Text très long avec ellipsis automatique...

Aspect-Ratio

Ratios automatiques

1:1

16:9

4:3

21:9

Overflow & Scroll

Comportement du scroll

overflow: hidden - Le contenu qui dépasse est masqué complètement.

overflow: auto - Scroll automatique si nécessaire.

overflow: scroll - Toujours afficher les scrollbars.

Object-Fit (images)

Recadrage d'images

cover

contain

fill

Mix-Blend-Mode

Modes de fusion

multiply

screen

overlay

difference

Outline

Outline vs Border

border

outline

outline-offset

Clip-Path

Formes CSS

Backdrop-Filter

Effet verre (glassmorphism)

Glassmorphism

Writing-Mode

Direction du texte

horizontal-tb

Texte normal

vertical-rl

Texte vertical

vertical-lr

Texte vertical

💡 50+ démos interactives — Survolez les éléments pour voir les effets en action!

La puissance du CSS moderne

Syntaxe CSS

Intégration CSS

Unités

Sélecteurs

Sélecteurs de base

Combinateurs & Relations

Pseudo-classes (États & Position)

Pseudo-éléments

Spécificité (priorité)

Box Model

Display (Le comportement des boîtes)

Position (Le placement dans le flux)

Texte & Couleurs

Typographie

Couleurs & Fonds

Background (Images & Fonds)

Flexbox

Interactive Flexbox Playground

CSS Grid

Interactive Grid Playground

Sizing Keywords & Auto-flow

Animations & Transitions

Transitions & Timing Functions

Animations & Keyframes

Transform

Responsive Design

Interactive Layout Simulator

Titre Adaptatif

Container Queries (La révolution)

Unités et Fonctions Fluides

Variables CSS

Interactive Variable Playground

Fonctions de Calcul & Fluidité

Taille de texte adaptative

Filtres & Effets Visuels

Architecture CSS

Méthodologies de Nommage (BEM)

Titre de la Carte

Organisation (Le Pattern 7-1)

Theming (Dark Mode)

CSS Moderne

Démo Interactive : La puissance du :has()

Propriétés Logiques & Internationalisation

Référence rapide

Box Model & Layout

Dimensions

Spacing

Border

Display

Position

Flexbox & Grid

Flexbox

Grid

Typographie & Couleurs

Police

Texte

Couleurs & Fond

Animations & Interactivité

Transform

Transition

Avancé

Interactivité

Logique & Variables

Galerie de Démos Visuelles

Borders & Border-Radius

Box-Shadow

Gradients

Transform

Filters

Animations

Cursors

Text Effects

Aspect-Ratio

Overflow & Scroll

Object-Fit (images)

Mix-Blend-Mode

Outline

Clip-Path

Démo Interactive : La puissance du `:has()`