Les filtres CSS et les modes de fusion vous permettent d’appliquer facilement des effets visuels à votre page web. Les filtres sont un ensemble de fonctions CSS prédéfinies utilisées pour ajuster le rendu des images ou d’autres éléments HTML. Les modes de fusion, quant à eux, déterminent la manière dont un élément doit se fondre dans son arrière-plan ou dans les éléments voisins.
Utilisation des filtres CSS
Vous appliquez des filtres CSS à l’aide de la fonction filtre et une propriété spécifiant le type d’effet appliqué. Chaque propriété de filtre est une fonction CSS, qui fonctionne de la même manière qu’une fonction variable CSS. Elle accepte un paramètre pour spécifier dans quelle mesure le filtre doit affecter l’élément stylisé.
Il existe 10 fonctions de filtre CSS disponibles pour styliser votre élément HTML :
- blur()
- brightness()
- contraste()
- ombre portée()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
Vous pouvez utiliser ces filtres individuellement ou en combinaison pour créer des styles uniques et améliorer l’apparence de vos éléments HTML.
Certains de ces filtres fonctionnent beaucoup mieux avec d’autres lorsqu’ils sont utilisés correctement.
Voici des exemples de combinaison de filtres CSS pour obtenir différents effets visuels sur un élément d’image.
1. Niveaux de gris et sépia
Les grayscale() supprime toutes les informations de couleur d’une image ou d’un élément de texte. Le filtre prend une valeur comprise entre 0 et 1, 0 signifiant la couleur d’origine et 1 l’effet d’échelle de gris complet.
Le filtre sépia() applique un effet de tonalité sépia à une image ou à un élément de texte. Le filtre prend également une valeur comprise entre 0 et 1.
Par exemple :
img {
filter: grayscale(14%) sepia(30%);
}
Combinaison grayscale() à 14% et sepia() à 30% permet de créer un effet vintage ou rétro sur votre image.
2. Inverser et saturer
Le saturer() augmente ou diminue la saturation d’une image ou d’un élément de texte. Le filtre prend une valeur entre 0 et l’infini, 1 étant la couleur d’origine et les valeurs supérieures augmentant la saturation.
Le filtre invert() inverse les couleurs d’une image ou d’un texte en inversant la teinte de chaque couleur présente de 180 degrés sur la roue des couleurs. Cela signifie que le filtre modifie les niveaux de luminosité et de saturation de l’élément tout en conservant la teinte.
Par exemple :
img {
filter: invert(30%) saturate(75%);
}
Ce code inverse les couleurs de l’image et augmente la saturation de 75%.
3. Teinte, rotation et contraste
Le hue-rotate() fait pivoter les teintes d’une image ou d’un élément de texte, ce qui signifie qu’il modifie la couleur globale de l’élément tout en conservant les niveaux de luminosité et de saturation. Le degré de rotation peut être spécifié en degrés, 0 représentant la couleur d’origine et 360 représentant une rotation complète vers la couleur d’origine.
Combinaison de la fonction hue-rotate() et contraste() permettent de créer un effet vibrant et coloré sur vos images.
Par exemple :
img {
filter: hue-rotate(10deg) contrast(150%);
}
Hue-rotate peut accepter une valeur de deg, grad, radou tour. Le code ci-dessus fait pivoter la teinte de l’image de 10 degrés et augmente le contraste.
4. Luminosité et flou
Les filtres de luminosité et de flou sont très explicites. Le premier règle la luminosité de votre image et le second contrôle le niveau de flou appliqué.
Combiner les filtres de luminosité et de flou luminosité() et blur() permettent de créer un effet de rêve et de douceur sur vos images.
Par exemple :
img {
filter: brightness(0.8) blur(5px);
}
Le code ci-dessus diminue la luminosité de 0.8 (80%) et applique un 5px L’effet de flou est appliqué à l’image.
5. Ombre portée et opacité
Un effet d’ombre portée est un effet visuel dans lequel un élément semble projeter une ombre sur la surface derrière lui, donnant l’illusion de profondeur et de dimensionnalité. Les ombres portées sont souvent appliquées à du texte ou à des images pour créer un sentiment de séparation entre l’élément et l’arrière-plan.
Le filtre d’opacité permet quant à lui de contrôler la transparence d’un élément.
Combiner les filtres ombre portée() et opacity() Les filtres d’opacité peuvent créer un effet subtil sur vos éléments de texte.
Par exemple :
.text-effect {
transform: translate(-50%, -50%);
color: black;
drop-shadow: 10px 9px 9px beige;
opacity: 70%;
}
Dans cet exemple, l’ombre portée est positionnée à 10 pixels à droite et à 9 pixels en bas, avec un rayon de flou de 9 pixels. La couleur de l’ombre est beige. Une opacité de 70 % est également spécifiée.
Utilisation des modes de mélange CSS
Les modes de fusion CSS contrôlent la façon dont le contenu d’un élément se fond avec l’arrière-plan ou d’autres éléments, ce qui permet d’obtenir des effets de composition créatifs.
Voici quelques-uns des cas d’utilisation les plus populaires des modes de fusion CSS :
- Création de dégradés: Les modes de fusion peuvent être utilisés pour créer plusieurs dégradés d’arrière-plan CSS qui passent d’une couleur à l’autre, ce qui vous permet d’ajouter facilement et efficacement de la profondeur et de la dimension à vos créations.
- Ajouter de la texture: Vous pouvez également utiliser les modes de fusion pour ajouter de la texture aux arrière-plans, aux images et à d’autres éléments d’une page. C’est un excellent moyen de créer un aspect unique et d’ajouter un intérêt visuel à des éléments qui ne le sont pas.
- Ajuster les couleurs: Les modes de fusion permettent d’ajuster les couleurs des éléments d’une page, y compris les couleurs d’arrière-plan. Cela vous permettra de créer facilement des effets tels que des superpositions de couleurs ou des images teintées.
Les deux modes de fusion les plus courants sont mode de fusion de l’arrière-plan et mode-mélange. Les deux propriétés partagent les mêmes 15 valeurs : normal, multiplier, écran, superposition, assombrir, éclaircir, dédoublement des couleurs, saturation, brûlure des couleurs, luminosité, différence, lumière dure, lumière douce, exclusion et teinte.
Vous devez utiliser mode fond d’écran lorsque vous avez plusieurs dispositions d’arrière-plan, comme des images d’arrière-plan sur un élément, et que vous souhaitez qu’elles se fondent les unes dans les autres.
Vous pouvez également utiliser la fonction mode-mélange pour mélanger le contenu d’un élément donné avec le contenu de son parent direct. Le mode mode-mélange est généralement utilisé pour mélanger des contenus de premier plan tels que du texte, des formes ou des images.
Voici un exemple d’utilisation de mode-mélange pour mélanger le texte et l’image.
HTML :
<div class="container">
<img
src="https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
class="background-image"
/>
<div class="content">
<h1>Welcome</h1>
<p>Hello User!</p>
</div>
</div>
CSS :
.container {
position: absolute;
width: 100%;
height: 100%;
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
mix-blend-mode: difference;
}
h1 {
font-size: 60px;
color: white;
}
p {
font-size: 40px;
color: white;
}
Le différence Le mode de fusion calcule la différence absolue entre les valeurs de couleur du texte et de l’image sombre sous-jacente.
Dans ce scénario, la couleur du texte interagit avec l’arrière-plan sombre, ce qui produit un effet de contraste élevé.
Combiner les filtres et les modes de fusion
Vous pouvez combiner les filtres et les modes de fusion pour créer des effets encore plus intéressants sur le plan visuel. En utilisant ces deux propriétés ensemble, vous pouvez obtenir des résultats uniques et créatifs qui sont difficiles à reproduire avec d’autres propriétés CSS.
Voici un exemple qui combine le filtre et le mode de fusion pour créer un effet plus complexe :
.my-element {
filter: brightness(150%) hue-rotate(180deg) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
mix-blend-mode: screen;
}
Ce code combine les filtres ; luminosité, teinte-rotation, ombre portéeet un mode mélange de valeur écran à l’image. Il augmente la luminosité de 150%, tandis que hue-rotate inverse les couleurs de l’image de 180 degrés.
Ensuite, une ombre portée est appliquée. Enfin, le écran pour le mode de fusion combinera les couleurs de l’image avec l’arrière-plan sous-jacent, ce qui produira un effet où les couleurs plus claires seront intensifiées et les couleurs plus foncées se fondront avec l’arrière-plan.
Maîtriser les filtres et les modes de fusion
Vous avez appris à connaître les différents types de filtres CSS et à les appliquer à vos éléments HTML. En utilisant diverses fonctions de filtre telles que le flou, le contraste et la rotation de la teinte, vous pouvez modifier l’apparence de vos images. Vous avez également vu des exemples de modes de fusion en action et comment ils peuvent être utilisés pour créer des designs uniques.
Si vous expérimentez davantage ces techniques, vous pourrez ajouter un niveau supplémentaire d’intérêt visuel à vos dessins.
