Enrichissez votre boîte à outils CSS avec la propriété mix-blend-mode ! Introduite dans la spécification CSS Fonts 4, elle offre aux développeurs web un pouvoir inédit pour fusionner et personnaliser les arrière-plans et les polices de caractères. Imaginez créer des effets visuels saisissants, des dégradés subtils et des textes qui se fondent harmonieusement dans leur environnement, repoussant les limites du design web traditionnel.
La propriété mix-blend-mode agit comme un chef d’orchestre, harmonisant la superposition de plusieurs éléments. Elle définit le mode de fusion entre le contenu d’un élément et son arrière-plan, produisant des effets spectaculaires qui vont bien au-delà des simples juxtapositions.
La propriété mix-blend-mode
- mix-blend-mode: overlay;
- mix-blend-mode: difference;
- mix-blend-mode: screen;
Valeurs de la propriété mix-blend-mode en CSS
La propriété mix-blend-mode propose une palette de modes de fusion pour des résultats variés :
| Valeur | Description |
|---|---|
normal |
Aucun effet de fusion. Les couleurs de l’élément et de l’arrière-plan sont simplement superposées. |
multiply |
Multiplie les couleurs de l’élément et de l’arrière-plan, assombrissant le résultat. |
screen |
Éclaircit le résultat en divisant les couleurs de l’élément et de l’arrière-plan. |
overlay |
Superpose les couleurs de l’élément sur l’arrière-plan, conservant la luminosité. |
difference |
Soustrait les couleurs de l’arrière-plan de celles de l’élément, créant un contraste élevé. |
exclusion |
Inverse les couleurs de l’élément en fonction des couleurs de l’arrière-plan. |
hard-light |
Produit un effet similaire à overlay, mais avec des zones claires plus prononcées. |
soft-light |
Produit un effet similaire à difference, mais avec des zones sombres plus prononcées. |
color-dodge |
Éclaircit les couleurs de l’élément en fonction des couleurs de l’arrière-plan. |
color-burn |
Assombrit les couleurs de l’élément en fonction des couleurs de l’arrière-plan. |
darken-only |
Conserve uniquement les zones les plus sombres de l’élément et de l’arrière-plan. |
lighten-only |
Conserve uniquement les zones les plus claires de l’élément et de l’arrière-plan. |
saturation |
Sature les couleurs de l’élément en fonction des couleurs de l’arrière-plan. |
luminosity |
Ajuste la luminosité de l’élément en fonction des couleurs de l’arrière-plan. |
Certaines valeurs ne sont pas encore implémentées dans tous les navigateurs.
N’hésitez pas à expérimenter les différents modes pour obtenir des effets originaux et adaptés à votre design.
exemple complet avec mix-blend-mode
Imaginons un scénario où vous souhaitez afficher un texte clair et lisible sur une image avec un fond coloré. La propriété mix-blend-mode nous permet d’obtenir cet effet de manière simple et efficace.
Le code HTML :
<div class="conteneur">
<img class="image" src="image.jpg" alt="Image colorée">
<div class="texte">Texte à afficher</div>
</div>Le code CSS :
.conteneur {
position: relative;
}
.image {
width: 100%;
height: auto;
}
.texte {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white; /* Couleur du texte */
font-size: 32px; /* Taille du texte */
text-align: center; /* Alignement du texte */
mix-blend-mode: difference; /* Mode de fusion */
}Explication du code :
- Structure HTML : Un conteneur
divenglobe l’image et le texte, permettant un positionnement relatif. - Image : L’image est affichée en utilisant la propriété src pour spécifier son chemin d’accès.
- Texte : Le texte est positionné au centre de l’image à l’aide des propriétés position, top, left et transformer. La couleur du texte est définie par Color, la taille par font-size et l’alignement par text-align. Enfin, le mode de fusion mix-blend-mode est défini sur difference, ce qui créera un effet de contraste élevé entre le texte blanc et l’image colorée.
Le texte blanc s’affiche clairement sur l’image colorée, les couleurs de l’image étant soustraites de celles du texte, créant un effet vibrant et lisible.
Cet exemple simple vous offre une base pour explorer les possibilités infinies de la propriété mix-blend-mode. N’hésitez pas à la combiner avec d’autres techniques CSS pour créer des designs web uniques et captivants.
