Apprends Filtres & Modes de Fusion

Filtres CSS

La propriété filter te permet d'appliquer des effets graphiques à n'importe quel élément — similaire aux outils de retouche photo, mais directement en CSS.

Fonctions de filtre disponibles

Filtre	Ce qu'il fait	Exemple
`blur(px)`	Applique un flou gaussien	`filter: blur(4px)`
`brightness(%)`	Ajuste la luminosité (100% = normal)	`filter: brightness(150%)`
`contrast(%)`	Ajuste le contraste (100% = normal)	`filter: contrast(200%)`
`grayscale(%)`	Convertit en niveaux de gris (100% = complètement gris)	`filter: grayscale(100%)`
`sepia(%)`	Applique une teinte sépia (100% = sépia complet)	`filter: sepia(80%)`
`hue-rotate(deg)`	Fait pivoter la teinte de toutes les couleurs	`filter: hue-rotate(90deg)`
`invert(%)`	Inverse les couleurs (100% = complètement inversé)	`filter: invert(100%)`
`opacity(%)`	Ajuste la transparence (similaire à la propriété opacity)	`filter: opacity(50%)`
`saturate(%)`	Ajuste la saturation des couleurs (100% = normal)	`filter: saturate(200%)`
`drop-shadow()`	Ajoute une ombre portée (suit le canal alpha)	`filter: drop-shadow(2px 2px 4px black)`

Tu peux enchaîner plusieurs filtres ensemble :

css

filter: grayscale(50%) brightness(120%) contrast(110%);

Filtres et Backdrop-Filter

html

<style>
  .container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .box {
    width: 120px;
    height: 80px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
  }

  .blur { filter: blur(2px); }
  .bright { filter: brightness(150%); }
  .gray { filter: grayscale(100%); }
  .sepia { filter: sepia(100%); }
  .hue { filter: hue-rotate(90deg); }

  /* Backdrop-filter: floute ce qui est DERRIÈRE l'élément */
  .frosted {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
  }
</style>

<div class="container">
  <div class="box blur">blur(2px)</div>
  <div class="box bright">bright(150%)</div>
  <div class="box gray">grayscale</div>
  <div class="box sepia">sepia</div>
  <div class="box hue">hue-rotate</div>
</div>

<div class="frosted">Effet de verre givré avec backdrop-filter</div>

Modes de Fusion

Les modes de fusion contrôlent comment les couleurs d'un élément interagissent avec ce qui se trouve derrière lui, similaire aux modes de fusion dans Photoshop.

mix-blend-mode

Appliqué à un élément, il fusionne l'élément avec son arrière-plan :

css

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

background-blend-mode

Fusionne les calques d'arrière-plan d'un élément (background-color et background-image) ensemble :

css

.hero {
  background-image: url(photo.jpg);
  background-color: #3498db;
  background-blend-mode: overlay;
}

Valeurs courantes des modes de fusion

normal — Pas de fusion (par défaut).
multiply — Assombrit en multipliant les couleurs. Le blanc disparaît.
screen — Éclaircit. Le noir disparaît.
overlay — Combine multiply et screen. Préserve les hautes lumières et les ombres.
darken / lighten — Conserve le pixel le plus sombre/clair de chaque calque.
color-dodge / color-burn — Éclaircit/assombrit de manière dramatique.
difference — Montre la différence entre les calques. Les mêmes couleurs deviennent noires.

Les modes de fusion sont puissants pour créer des effets artistiques, des traitements de texte sur images et des superpositions d'interface utilisateur.

Filtres & Modes de Fusion