Propriétés CSS essentielles

Afficher un élément comme un bloc

HTML

<div class="box">A</div>

CSS

.box { display: block; }

Afficher plusieurs éléments en flex

HTML

<div class="flex">
    <div class="box">A</div>
</div>

CSS

.flex { display: flex; }

Variantes possibles : block, inline, flex, grid, contents.

Aligner des éléments horizontalement

HTML

<div class="row">
    <div>A</div>
    <div>B</div>
</div>

CSS

.row {
    display: flex;
    justify-content: space-between;
}

Aligner des éléments verticalement

HTML

<div class="row-center">
    <div>A</div>
    <div>B</div>
</div>

CSS

.row-center {
    display: flex;
    align-items: center;
}

Variantes possibles : center, start, end, space-between.

Créer une grille simple

HTML

<div class="grid">
    <div>A</div>
    <div>B</div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Créer une grille responsive automatique

HTML

<div class="grid-auto">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

CSS

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

Variantes possibles : auto-fit, auto-fill.

Créer une grille avec colonnes fluides

HTML

<div class="grid-fluid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

CSS

% .fr et rem">.grid-fluid {
    display: grid;
    grid-template-columns: 20% 1fr 15rem;
}

Mix possible : %, fr, rem, vw.

Créer une grille avec minmax() fluide

HTML

<div class="grid-minmax">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.grid-minmax {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
}

minmax() permet une largeur minimale + expansion fluide.

Créer une grille avec clamp()

HTML

<div class="grid-clamp">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

CSS

.grid-clamp {
    display: grid;
    grid-template-columns: repeat(3, clamp(8rem, 20vw, 20rem));
}

clamp(min, idéal, max) = contrôle total.

Créer une grille avec colonnes de largeur différente

HTML

<div class="grid-ratio">
    <div>Sidebar</div>
    <div>Contenu</div>
</div>

CSS

.grid-ratio {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Créer une grille avec auto-flow horizontal

HTML

<div class="grid-flow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS

.grid-flow {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10rem, 1fr);
}

column = empile horizontalement, row = verticalement.

Créer une grille avec auto-flow dense

HTML

<div class="grid-dense">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

CSS

.grid-dense {
    display: grid;
    grid-auto-flow: dense;
}

dense = comble les trous automatiquement.

Créer une grille avec zones nommées

HTML

<div class="grid-areas">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Contenu</main>
    <footer class="footer">Footer</footer>
</div>

CSS

.grid-areas {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Créer une grille stretch universelle

HTML

<div class="grid-stretch">
    <div>A</div>
    <div>B</div>
</div>

CSS

.grid-stretch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    justify-items: stretch;
}

stretch = comportement par défaut mais utile à rappeler.

Créer une grille sans retour à la ligne

HTML

<div class="grid-nowrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS

.grid-nowrap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
}

Simule un “carrousel” horizontal sans wrap.

Créer un header sticky

HTML

<header class="sticky">Header</header>

CSS

.sticky {
    position: sticky;
    top: 0;
}

Variantes possibles : relative, absolute, fixed, sticky.

Positionner un élément en absolute dans un parent

HTML

<div class="relative-box">
    Parent
    <div class="absolute-box">Badge</div>
</div>

CSS

.relative-box { position: relative; }
.absolute-box {
    position: absolute;
    top: 0;
    right: 0;
}

Le parent doit être en position:relative pour que absolute fonctionne correctement.

Étendre un élément en absolute sur tout son parent

HTML

<div class="relative-stretch">
    <div class="absolute-stretch"></div>
</div>

CSS

.relative-stretch { position: relative; }
.absolute-stretch {
    position: absolute;
    inset: 0;
}

inset:0 = top:0 + right:0 + bottom:0 + left:0.

Centrer un élément en absolute avec transform

HTML

<div class="relative-center">
    <div class="absolute-center">X</div>
</div>

CSS

.relative-center { position: relative; }
.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Centrer un élément en absolute sans transform

HTML

<div class="relative-center-modern">
    <div class="absolute-center-modern">X</div>
</div>

CSS

.relative-center-modern { position: relative; }
.absolute-center-modern {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5rem;
    height: 5rem;
}

Fonctionne si width + height sont définis.

Créer un overlay plein écran

HTML

<div class="overlay"></div>

CSS

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

Pattern universel pour modales, lightbox, menus.

Ajouter un badge en absolute sur un bouton

HTML

<button class="btn-badge">Messages</button>

CSS

.btn-badge { position: relative; }
.btn-badge::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.6rem;
    height: 0.6rem;
    background: red;
    border-radius: 50%;
}

Créer un bouton fixed en bas de page

HTML

<a href="#main" class="btn-fixed" aria-label="Remonter en haut">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
        <path d="
            M297.4 169.4C309.9 156.9 330.2 156.9 342.7 169.4L534.7 361.4C547.2 
            373.9 547.2 394.2 534.7 406.7C522.2 419.2 501.9 419.2 489.4 
            406.7L320 237.3L150.6 406.6C138.1 419.1 117.8 419.1 105.3 
            406.6C92.8 394.1 92.8 373.8 105.3 361.3L297.3 169.3z"/>
    </svg>
</a>

CSS

.btn-fixed {
    padding: 1vh 1vw;
    cursor: pointer;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-fixed svg {
    width: 2vw;
    height: auto;
    fill: var(--color-dark);
}

Utilisé pour les boutons “remonter en haut”.

Déplacer un élément sans sortir du flux

HTML

<div class="relative-move">Bloc</div>

CSS

.relative-move {
    position: relative;
    top: 1rem;
    left: 1rem;
}

Déplace l’élément sans changer son espace réservé.

Créer un sticky avec décalage

HTML

<div class="sticky-offset">Barre</div>

CSS

.sticky-offset {
    position: sticky;
    top: 2rem;
}

Reste collé après un certain décalage.

Créer une modale centrée en fixed

HTML

<div class="fixed-center">Modale</div>

CSS

.fixed-center {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 10rem;
    height: 10rem;
}

Idéal pour les modales centrées.

Appliquer une couleur de fond

HTML

<div class="bg">A</div>

CSS

.bg {
    background: #111;
}

Afficher une image de fond

HTML

<div class="bg-img"></div>

CSS

.bg-img {
    background: url(img.jpg) center/cover no-repeat;
}

Variantes possibles : cover, contain, repeat.

Créer un dégradé linéaire

HTML

<div class="bg-linear"></div>

CSS

.bg-linear {
    background: linear-gradient(90deg, #ff0080, #00e0ff);
}

Créer un dégradé radial

HTML

<div class="bg-radial"></div>

CSS

.bg-radial {
    background: radial-gradient(circle, #ff0080, #111);
}

Créer un dégradé conique

HTML

<div class="bg-conic"></div>

CSS

.bg-conic {
    background: conic-gradient(from 0deg, #ff0080, #00e0ff, #ff0080);
}

Créer un motif répétitif

HTML

<div class="bg-repeat-pattern"></div>

CSS

.bg-repeat-pattern {
    background: repeating-linear-gradient(
        45deg,
        #000 0 5px,
        #fff 5px 10px
    );
}

Contrôler la taille et la position du fond

HTML

<div class="bg-size"></div>

CSS

.bg-size {
    background-image: url(img.jpg);
    background-size: contain;
    background-position: top left;
}

Superposer plusieurs backgrounds

HTML

<div class="bg-multi"></div>

CSS

.bg-multi {
    background:
        linear-gradient(90deg, #ff0080, transparent),
        url(img.jpg) center/cover no-repeat;
}

Créer un effet parallax simple

HTML

<div class="bg-fixed"></div>

CSS

.bg-fixed {
    background: url(img.jpg) center/cover no-repeat;
    background-attachment: fixed;
}

Définir une largeur fluide

HTML

<div class="w">A</div>

CSS

.w { width: 100%; }

Définir une hauteur minimale

HTML

<div class="min-h">Bloc</div>

CSS

.min-h { min-height: 200px; }

Variantes possibles : width, height, min/max.

Utiliser une largeur automatique

HTML

<div class="w-auto">Texte</div>

CSS

.w-auto { width: auto; }

Limiter la largeur maximale

HTML

<div class="max-w">Bloc</div>

CSS

.max-w { max-width: 60rem; }

Définir une hauteur fluide

HTML

<div class="h-fluid">Bloc</div>

CSS

.h-fluid { height: 100%; }

Utiliser la hauteur du viewport

HTML

<div class="vh">Bloc</div>

CSS

.vh { height: 100dvh; }

Définir des dimensions avec clamp()

HTML

<div class="box-clamp">Bloc</div>

CSS

.box-clamp {
    width: clamp(10rem, 50vw, 40rem);
    height: clamp(5rem, 20vw, 15rem);
}

Définir des dimensions avec calc()

HTML

<div class="box-calc">Bloc</div>

CSS

.box-calc {
    width: calc(100% - 2rem);
    height: calc(50vh - 4rem);
}

Ajuster la largeur au contenu

HTML

<div class="fit">Texte long</div>

CSS

.fit { width: fit-content; }

Combiner min-width et max-width

HTML

<div class="minmax">Bloc</div>

CSS

.minmax {
    min-width: 10rem;
    max-width: 40rem;
}

Flouter un élément

HTML

<img src="img.jpg" class="blur">

CSS

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

Augmenter la luminosité

HTML

<div class="bright">Texte</div>

CSS

.bright {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
}

Variantes possibles : blur, brightness, contrast, saturate.

Augmenter le contraste

HTML

<div class="contrast">Texte</div>

CSS

.contrast {
    -webkit-filter: contrast(1.4);
    filter: contrast(1.4);
}

Passer en noir et blanc

HTML

<div class="desaturate">Texte</div>

CSS

.desaturate {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

Combiner plusieurs filtres

HTML

<div class="combo">Texte</div>

CSS

.combo {
    -webkit-filter: blur(2px) brightness(1.1) contrast(1.2);
    filter: blur(2px) brightness(1.1) contrast(1.2);
}

Les filtres se cumulent dans l'ordre d'écriture.

Créer un effet glassmorphism

HTML

<div class="glass">Contenu</div>

CSS

.glass {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border-radius: 1rem;
}

Le glassmorphism nécessite backdrop-filter et son préfixe.

Appliquer un flou d’arrière‑plan uniquement

HTML

<div class="backdrop-blur">Texte</div>

CSS

.backdrop-blur {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

Le flou s’applique derrière l’élément, pas dessus.

Créer un effet “frosted glass”

HTML

<div class="frosted">Texte</div>

CSS

.frosted {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(20px) brightness(1.3);
    backdrop-filter: blur(20px) brightness(1.3);
}

Très utilisé pour les panneaux translucides modernes.

Définir une taille de police fluide

HTML

<p class="txt">Texte</p>

CSS

.txt { font-size: clamp(1rem, 2vw, 1.5rem); }
.txt { font-size: min(5vw, 2rem); }
.txt { font-size: max(2vw, 1rem); }
.txt { font-size: calc(1rem + 1vw); }

Ajuster la graisse de police

HTML

<p class="bold">Texte</p>

CSS

.bold { font-weight: 700; }

Variantes possibles : 100 → 900.

Définir l’interlignage

HTML

<p class="lh">Texte</p>

CSS

.lh { line-height: 1.5; }

Valeur sans unité = comportement idéal.

Ajuster l’espacement des lettres

HTML

<p class="ls">Texte</p>
<p class="ls-tight">Texte</p>

CSS

.ls { letter-spacing: 0.05em; }
.ls-tight { letter-spacing: -0.02em; }

Utiliser une police variable

HTML

<p class="varfont">Texte</p>

CSS

.varfont { font-variation-settings: "wght" 600, "wdth" 90; }

Définir le style de police

HTML

<p class="italic">Texte</p>
<p class="oblique">Texte</p>

CSS

.italic { font-style: italic; }
.oblique { font-style: oblique 10deg; }

Transformer le texte

HTML

<p class="upper">Texte</p>
<p class="cap">Texte</p>

CSS

.upper { text-transform: uppercase; }
.cap { text-transform: capitalize; }

Ajouter une décoration de texte

HTML

<p class="underline">Texte</p>
<p class="wavy">Texte</p>

CSS

.underline { text-decoration: underline; }
.wavy { text-decoration: underline wavy; }

Gérer le retour à la ligne

HTML

<p class="nowrap">Texte</p>
<p class="prewrap">Texte</p>

CSS

.nowrap { white-space: nowrap; }

.prewrap {
    white-space: pre-wrap;
}

Tronquer un texte avec ellipsis

HTML

<p class="ellipsis">Texte très long tronqué…</p>

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Ajouter une bordure simple

HTML

<div class="b">A</div>

CSS

.b { border: 1px solid #ddd; }

Arrondir les coins

HTML

<div class="r">Bloc</div>

CSS

.r { border-radius: 8px; }

Variantes possibles : radius variable.

Ajuster l’épaisseur de la bordure

HTML

<div class="bw">Bloc</div>

CSS

.bw { border-width: 4px; }

Changer le style de bordure

HTML

<div class="bs">Bloc</div>

CSS

.bs { border-style: dashed; }

Changer la couleur de bordure

HTML

<div class="bc">Bloc</div>

CSS

.bc { border-color: #ff0080; }

Appliquer des bordures indépendantes

HTML

<div class="bt">Top</div>
<div class="br">Right</div>
<div class="bb">Bottom</div>
<div class="bl">Left</div>

CSS

.bt { border-top: 3px solid #000; }
.br { border-right: 3px solid #000; }
.bb { border-bottom: 3px solid #000; }
.bl { border-left: 3px solid #000; }

Créer des border-radius avancés

HTML

<div class="radius-full">Rond</div>
<div class="radius-pill">Pill</div>
<div class="radius-asym">Asym</div>

CSS

.radius-full { border-radius: 50%; }
.radius-pill { border-radius: 9999px; }
.radius-asym { border-radius: 20px 0 40px 0; }

Utiliser une border-image

HTML

<div class="border-img">Bloc</div>

CSS

.border-img {
    border: 10px solid transparent;
    border-image: url(pattern.png) 30 round;
}

Ajouter un outline

HTML

<div class="outline">Bloc</div>

CSS

.outline { outline: 3px solid #000; }

Créer un cadre pixel brutaliste

HTML

<div class="pixel-frame">A</div>

CSS

.pixel-frame {
    box-shadow:
        10px 0 0 #F0F0F0, 20px 0 0 #000, 30px 0 0 #F0F0F0,
        0 10px 0 #F0F0F0, 10px 10px 0 #000, 20px 10px 0 #F0F0F0, 30px 10px 0 #000,
        0 20px 0 #000, 10px 20px 0 #F0F0F0, 20px 20px 0 #000, 30px 20px 0 #F0F0F0,
        0 30px 0 #F0F0F0, 10px 30px 0 #000, 20px 30px 0 #F0F0F0, 30px 30px 0 #000,
        5px 5px 15px 5px rgba(0,0,0,0);
}

Appliquer une rotation simple

HTML

<div class="rot">A</div>

CSS

.rot {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}

Agrandir un élément avec scale()

HTML

<div class="scale">A</div>

CSS

.scale {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

Variantes possibles : rotate, scale, translate.

Combiner plusieurs transformations classiques

HTML

<div class="transform-classic">Bloc</div>

CSS

.transform-classic {
    transform:
        perspective(600px)
        translate(1rem, 1rem)
        rotate(15deg)
        skew(5deg, 2deg)
        scale(1.2);
}

Appliquer des transformations sur X et Y

HTML

<div class="transform-xy">Bloc</div>

CSS

.transform-xy {
    transform:
        translateX(2rem)
        translateY(1rem)
        rotateX(20deg)
        rotateY(15deg)
        skewX(10deg)
        skewY(5deg)
        scaleX(1.2)
        scaleY(1.1);
}

Appliquer des transformations Z et 3D

HTML

<div class="transform-3d">Bloc</div>

CSS

.transform-3d {
    transform:
        translateZ(30px)
        translate3d(1rem, 0.5rem, 20px)
        rotateZ(10deg)
        rotate3d(1, 1, 0, 25deg)
        scaleZ(1.1)
        scale3d(1.1, 1.05, 1);
}

Utiliser toutes les valeurs transform dans l’ordre officiel

HTML

<div class="full-transform">Bloc</div>

CSS

.full-transform {
    transform:
        perspective(600px)
        translate(1rem, 1rem)
        translateX(1rem)
        translateY(0.5rem)
        translateZ(20px)
        translate3d(1rem, 0.5rem, 10px)
        rotate(12deg)
        rotateX(20deg)
        rotateY(10deg)
        rotateZ(5deg)
        rotate3d(1, 1, 0, 25deg)
        skew(4deg, 2deg)
        skewX(6deg)
        skewY(3deg)
        scale(1.1)
        scaleX(1.2)
        scaleY(1.1)
        scaleZ(1.1)
        scale3d(1.1, 1.05, 1);
}

Créer une transition simple

HTML

<button class="btn">OK</button>

CSS

.btn {
    transition: 0.2s;
}

Créer une transition ciblée

HTML

<button class="btn-color">OK</button>

CSS

.btn-color {
    transition: color 0.3s;
}

Variantes possibles : all, color, background.

Utiliser des transitions avec easing

CSS

.ease { transition: all 0.3s ease; }
.ease-in { transition: all 0.3s ease-in; }
.ease-out { transition: all 0.3s ease-out; }
.ease-in-out { transition: all 0.3s ease-in-out; }

Créer une transition avec steps()

CSS

.steps {
    transition: all 0.4s steps(5);
}

Utiliser des steps avancés

CSS

.steps-start { transition: all 0.4s steps(5, start); }
.steps-end { transition: all 0.4s steps(5, end); }
.steps-jump-none { transition: all 0.4s steps(5, jump-none); }
.steps-jump-both { transition: all 0.4s steps(5, jump-both); }

Créer une transition cubic-bezier

CSS

.bezier {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

Ajouter un délai à une transition

CSS

.delay {
    transition: all 0.3s 0.2s;
}

Créer plusieurs transitions en même temps

CSS

.multi {
    transition:
        opacity 0.3s,
        transform 0.4s ease-out,
        background-color 0.2s;
}

Créer une transition sur transform

CSS

.t {
    transition: transform 0.3s;
}

.t:hover {
    transform: scale(1.1);
}

Créer une transition sur opacity

CSS

.fade {
    transition: opacity 0.3s;
}

.fade:hover {
    opacity: 0.5;
}

Créer une transition sur un pseudo‑élément

CSS

.pseudo {
    position: relative;
}

.pseudo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.3s;
}

.pseudo:hover::after {
    opacity: 0.2;
}

Créer un effet spring

CSS

.spring {
    transition: all 0.5s cubic-bezier(0.25, 1.5, 0.5, 1);
}

Créer un effet rebond

CSS

.bounce {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Créer une transition à forte accélération

CSS

.fast-in {
    transition: all 0.4s cubic-bezier(0.9, 0, 1, 0.5);
}

Créer une transition à forte décélération

CSS

.fast-out {
    transition: all 0.4s cubic-bezier(0, 0.5, 0.1, 1);
}

Créer un effet snap instantané

CSS

.snap {
    transition: all 0.25s steps(1, end);
}

Créer un effet glitch

CSS

.glitch {
    transition: all 0.12s steps(3, jump-both);
}

Créer une transition lente puis rapide

CSS

.slow-fast {
    transition: all 0.5s cubic-bezier(0.2, 0, 0.8, 1);
}

Créer une transition rapide puis lente

CSS

.fast-slow {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

Créer une transition multi‑vitesse

CSS

.multi-speed {
    transition:
        opacity 0.2s ease-out,
        transform 0.6s cubic-bezier(0.3, 1.4, 0.3, 1),
        filter 0.4s ease-in;
}

Créer une transition sur un dégradé de fond

CSS

.bg-gradient {
    transition: background 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

Créer une transition sur le flou

CSS

.blur {
    transition: filter 0.4s ease-in-out;
}

Créer une animation simple

HTML

<div class="pulse">A</div>

CSS

@keyframes pulse {
    to { transform: scale(1.1); }
}
.pulse { animation: pulse 1s infinite alternate; }

Créer une animation d’opacité

HTML

<div class="fade">A</div>

CSS

@keyframes fade {
    to { opacity: 0; }
}

.fade { animation: fade 1s infinite alternate; }

Variantes possibles : scale, opacity, translate.

Créer une animation avec easing

CSS

@keyframes move {
    to { transform: translateX(20px); }
}

.ease {
    animation: move 0.5s ease infinite alternate;
}

Créer une animation avec steps()

CSS

@keyframes jump {
    to { transform: translateY(-10px); }
}

.steps {
    animation: jump 0.6s steps(5) infinite;
}

Utiliser des steps avancés

CSS

@keyframes blink {
    to { opacity: 0; }
}

.steps-start { animation: blink 0.6s steps(4, start) infinite; }
.steps-end { animation: blink 0.6s steps(4, end) infinite; }
.steps-jump-none { animation: blink 0.6s steps(4, jump-none) infinite; }
.steps-jump-both { animation: blink 0.6s steps(4, jump-both) infinite; }

Créer une animation cubic-bezier

CSS

@keyframes slide {
    to { transform: translateX(30px); }
}

.bezier {
    animation: slide 0.5s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

Créer une animation avec délai

CSS

@keyframes pop {
    to { transform: scale(1.2); }
}

.delay {
    animation: pop 0.4s ease 0.3s infinite alternate;
}

Changer la direction d’une animation

CSS

@keyframes rotate {
    to { transform: rotate(360deg); }
}

.reverse { animation: rotate 2s linear infinite reverse; }
.alternate { animation: rotate 2s linear infinite alternate; }

Utiliser animation-fill-mode

CSS

@keyframes grow {
    to { width: 200px; }
}

.fill {
    animation: grow 1s forwards;
}

Mettre une animation en pause

CSS

@keyframes spin {
    to { transform: rotate(360deg); }
}

.pause {
    animation: spin 2s linear infinite;
    animation-play-state: paused;
}

Combiner plusieurs animations

CSS

@keyframes up {
    to { transform: translateY(-10px); }
}

@keyframes fade2 {
    to { opacity: 0.5; }
}

.multi {
    animation:
        up 0.5s ease-in-out infinite alternate,
        fade2 1s linear infinite alternate;
}

Animer un pseudo‑élément

CSS

@keyframes glow {
    to { opacity: 1; }
}

.pseudo {
    position: relative;
}

.pseudo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    animation: glow 1s infinite alternate;
}

Animer une transformation

CSS

@keyframes tilt {
    to { transform: rotate(10deg); }
}

.tilt {
    animation: tilt 0.4s ease-in-out infinite alternate;
}

Animer un clip‑path

CSS

@keyframes reveal {
    to { clip-path: inset(0 0 0 0); }
}

.clip {
    clip-path: inset(0 100% 0 0);
    animation: reveal 0.6s ease forwards;
}

Animer la position d’un background

CSS

@keyframes slide-bg {
    to { background-position: 100% 0; }
}

.bg-anim {
    background: linear-gradient(90deg, #ff0080, #00e0ff);
    background-size: 200% 100%;
    animation: slide-bg 2s linear infinite;
}

Créer une animation en cascade

CSS

@keyframes cascade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.cascade {
    opacity: 0;
    animation: cascade 0.6s ease forwards;
}

.cascade:nth-child(1) { animation-delay: 0.1s; }
.cascade:nth-child(2) { animation-delay: 0.2s; }
.cascade:nth-child(3) { animation-delay: 0.3s; }
.cascade:nth-child(4) { animation-delay: 0.4s; }
.cascade:nth-child(5) { animation-delay: 0.5s; }

Créer une cascade automatique avec CSS variables

HTML

<div class="stagger" style="--i:1">A</div>
<div class="stagger" style="--i:2">B</div>
<div class="stagger" style="--i:3">C</div>
<div class="stagger" style="--i:4">D</div>

CSS

@keyframes stagger {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stagger {
    opacity: 0;
    animation: stagger 0.6s ease forwards;
    animation-delay: calc(var(--i) * 0.1s);
}

Appliquer un dégradé sur le texte

HTML

<h2 class="txt-clip">Titre</h2>

CSS

.txt-clip {
    background: linear-gradient(90deg, #ff0080, #00e0ff);
    -webkit-background-clip: text;
    color: transparent;
}

Le texte prend le dégradé du fond.

Utiliser une image comme texture de texte

HTML

<h2 class="txt-img">Texte</h2>

CSS

.txt-img {
    background: url("img.jpg") center/cover;
    -webkit-background-clip: text;
    color: transparent;
}

Le texte utilise une image comme texture.

Appliquer un motif répétitif au texte

HTML

<h2 class="txt-pattern">Pattern</h2>

CSS

.txt-pattern {
    background: repeating-linear-gradient(45deg, #000 0 5px, #fff 5px 10px);
    -webkit-background-clip: text;
    color: transparent;
}

Idéal pour effets brutaux ou glitch.

Créer un texte opaque sur fond transparent

HTML

<h2 class="txt-solid">Titre</h2>

CSS

.txt-solid {
    background: #000;
    -webkit-background-clip: text;
    color: transparent;
    opacity: 0.8;
}

Effet “ink” ou brutaliste simple.

Appliquer un style typographique complet

HTML

<p class="txt-style">Un texte</p>

CSS

.txt-style {
    font-family: "Arial Black", Gadget, sans-serif;
    letter-spacing: -2px;
    word-spacing: 2.4px;
    color: #000000;
    font-weight: 400;
    text-decoration: overline;
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
}

Créer un texte avec dégradé animé

HTML

<h2 class="txt-clip-anim">Titre</h2>

CSS

@keyframes clip-move {
    to { background-position: 200% 0; }
}

.txt-clip-anim {
    background: linear-gradient(90deg, #ff0080, #00e0ff, #ff0080);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    color: transparent;
    animation: clip-move 3s linear infinite;
}

Cacher le dépassement (overflow hidden)

CSS

.of-hidden { overflow: hidden; }

Activer le scroll forcé

CSS

.of-scroll { overflow: scroll; }

Activer le scroll automatique

CSS

.of-auto { overflow: auto; }

Scroll horizontal uniquement

CSS

.of-x {
    overflow-x: scroll;
    overflow-y: hidden;
}

Scroll vertical uniquement

CSS

.of-y {
    overflow-y: scroll;
    overflow-x: hidden;
}

Activer le scroll fluide

CSS

.smooth { scroll-behavior: smooth; }

Créer un scroll snap horizontal

CSS

.snap-x { scroll-snap-type: x mandatory; }
.snap-item { scroll-snap-align: start; }

Créer un scroll snap vertical

CSS

.snap-y { scroll-snap-type: y mandatory; }
.snap-item-y { scroll-snap-align: center; }

Désactiver l’overscroll (no bounce)

CSS

.no-bounce { overscroll-behavior: none; }

Créer un masque avec overflow

CSS

.mask {
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
    overflow: hidden;
}

Personnaliser une scrollbar minimale

CSS

.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #000 #e5e5e5;
}

.scrollbar::-webkit-scrollbar { width: 6px; }
.scrollbar::-webkit-scrollbar-thumb {  background: #000; }
.scrollbar::-webkit-scrollbar-track { background: #e5e5e5; }

Curseur par défaut

CSS

.cur-default { cursor: default; }

Curseur pointer

CSS

.cur-pointer { cursor: pointer; }

Curseur texte

CSS

.cur-text { cursor: text; }

Curseur interdit

CSS

.cur-block { cursor: not-allowed; }

Curseur grab

CSS

.cur-grab { cursor: grab; }

Curseur grabbing

CSS

.cur-grabbing { cursor: grabbing; }

Curseur zoom

CSS

.cur-zoom { cursor: zoom-in; }

Curseur personnalisé

CSS

.cur-custom { cursor: url(cursor.svg) 0 0, auto; }

Mix-blend normal

CSS

.mix-normal { mix-blend-mode: normal; }

Mix-blend multiply

CSS

.mix-multiply { mix-blend-mode: multiply; }

Mix-blend screen

CSS

.mix-screen { mix-blend-mode: screen; }

Mix-blend overlay

CSS

.mix-overlay { mix-blend-mode: overlay; }

Mix-blend difference

CSS

.mix-diff { mix-blend-mode: difference; }

Mix-blend exclusion

CSS

.mix-excl { mix-blend-mode: exclusion; }

Mix-blend lighten

CSS

.mix-lighten { mix-blend-mode: lighten; }

Mix-blend darken

CSS

.mix-darken { mix-blend-mode: darken; }

Background-blend mode

CSS

.bg-blend { background-blend-mode: multiply; }