Le filtre CSS et les modes de fusion sont des outils puissants pour appliquer facilement des effets visuels époustouflants à votre page Web sans avoir besoin de code complexe.

Le filtre 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. Alors que les modes de fusion déterminent comment un élément doit se fondre avec son arrière-plan ou les éléments voisins.

Utilisation des filtres CSS

Vous appliquez des filtres CSS à l'aide de filtre propriété 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 variable CSS fonction. Il accepte un paramètre pour spécifier dans quelle mesure le filtre doit affecter l'élément stylé.

Il existe 10 fonctions de filtre CSS disponibles pour styliser votre élément HTML :

  • se brouiller()
  • luminosité()
  • contraste()
  • ombre portée()
  • niveaux de gris()
  • teinte-rotation()
  • inverser()
  • opacité()
  • saturer()
  • sépia()

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

Le niveaux de gris() filtre 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 étant l'effet de niveaux de gris complet.

Le sépia() filtre applique un effet sépia à une image ou un élément de texte. Le filtre prend également une valeur comprise entre 0 et 1.

Par exemple:

image {
filtre: niveaux de gris(14%) sépia(30%);
}

Combiner niveaux de gris() à 14% et sépia() à 30% peut créer un effet vintage ou rétro sur votre image.

2. Inverser et saturer

Le saturer() filtre augmente ou diminue la saturation d'une image ou d'un élément de texte. Le filtre prend une valeur comprise entre 0 et l'infini, 1 étant la couleur d'origine et des valeurs plus élevées augmentant la saturation.

Le inverser() filter inversera les couleurs d'une image ou d'un élément de texte en inversant la teinte de chaque couleur présente de 180 degrés sur la roue chromatique. Cela signifie que le filtre modifie les niveaux de luminosité et de saturation de l'élément tout en conservant la teinte.

Par exemple:

image {
filtre: inverser(30%) saturer(75%);
}

Ce code inverse les couleurs de l'image et augmente la saturation de 75%.

3. Teinte-Rotation et Contraste

Le teinte-rotation() Le filtre 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. La quantité de rotation peut être spécifiée en degrés, 0 représentant la couleur d'origine et 360 représentant une rotation complète vers la couleur d'origine.

Combinant le teinte-rotation() et contraste() Les filtres peuvent créer un effet vibrant et coloré sur vos images.

Par exemple:

image {
filtre: teinte-rotation(10degré) contraste(150%);
}

Hue-rotate peut accepter une valeur de degré, diplômé, super, ou tourner. 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églant la luminosité de votre image, et le second contrôlant le niveau de flou appliqué.

Combinant le luminosité() et se brouiller() les filtres peuvent créer un effet rêveur et doux sur vos images.

Par exemple:

image {
filtre: luminosité(0.8) se brouiller(5pixels);
}

Le code ci-dessus diminue la luminosité de 0.8 (80%) et applique une 5px effet de flou sur 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 au texte ou aux images pour créer une impression de séparation entre l'élément et l'arrière-plan.

Pendant ce temps, le filtre d'opacité contrôle la transparence d'un élément.

Combinant le ombre portée() et opacité() les filtres peuvent créer un effet subtil sur vos éléments de texte.

Par exemple:

.effet de texte {
transformer: traduire(-50%, -50%);
couleur: noir;
ombre portée: 10pixels 9pixels 9pixelsbeige;
opacité: 70%;
}

Dans cet exemple, l'ombre portée est positionnée 10 pixels vers la droite et 9 pixels vers le bas, avec un rayon de flou de 9 pixels. La couleur de l'ombre est spécifiée comme beige. Une opacité de 70% est également spécifiée.

Utilisation des modes de fusion CSS

Les modes de fusion CSS contrôlent la façon dont le contenu d'un élément se mélange avec l'arrière-plan ou d'autres éléments, permettant des effets de composition créatifs.

Certains des cas d'utilisation les plus populaires pour les modes de fusion CSS incluent :

  • Créer des dégradés: Les modes de fusion peuvent être utilisés pour créer plusieurs dégradés de fond CSS cette transition entre les couleurs, vous offrant un moyen simple et efficace d'ajouter de la profondeur et de la dimension à vos conceptions.
  • 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. Cela peut être un excellent moyen de créer un look unique et d'ajouter un intérêt visuel à des éléments autrement simples.
  • Réglage des couleurs: Avec les modes de fusion, vous pouvez ajuster les couleurs des éléments sur une page, y compris réglage des 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 d'arrière-plan et mode mix-blend. Les deux propriétés partagent les mêmes 15 valeurs: normal, multiplier, écran, superposition, assombrir, éclaircir, color-dodge, saturation, color-burn, luminosité, différence, hard-light, soft-light, exclusion et hue.

Tu devrais utiliser mode de fusion d'arrière-plan lorsque vous avez plusieurs mises en page d'arrière-plan, comme des images d'arrière-plan sur un élément, et que vous souhaitez qu'elles se fondent toutes les unes dans les autres.

Vous pouvez également utiliser le mode mix-blend pour fusionner le contenu d'un élément donné avec le contenu de son parent direct. Le mode mix-blend est généralement utilisé pour mélanger du contenu de premier plan tel que du texte, des formes ou des images.

Voici un exemple d'utilisation mode mix-blend pour mélanger texte et image.

HTML :

<divclasse="récipient">
<image
src=" https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compresser&cs=tinysrgb&w=1260&h=750&dpr=2 https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg? auto=compresser&cs=tinysrgb&w=1260&h=750&dpr=2"
classe="image de fond"
/>
<divclasse="contenu">
<h1>Accueillirh1>
<p>Bonjour utilisateur !p>
div>
div>

CSS :

.récipient {
position: absolu;
largeur: 100%;
hauteur: 100%;
}

.image de fond {
largeur: 100%;
hauteur: 100%;
ajustement à l'objet: couverture;
}

.contenu {
position: absolu;
haut: 50%;
gauche: 50%;
transformer: traduire(-50%, -50%);
aligner le texte: centre;
mode mix-blend: différence;
}

h1 {
taille de police: 60pixels;
couleur: blanc;
}

p {
taille de police: 40pixels;
couleur: blanc;
}

Le différence le mode de fusion calcule la différence absolue entre les valeurs de couleur du texte et l'image sombre sous-jacente.

Dans ce scénario, la couleur du texte interagirait avec l'arrière-plan sombre, ce qui entraînerait un effet de contraste élevé.

Combinaison de filtres et de modes de fusion

Vous pouvez combiner des filtres et des modes de fusion pour créer des effets encore plus intéressants visuellement. En utilisant les deux propriétés ensemble, vous pouvez obtenir des résultats uniques et créatifs 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 :

.mon-élément {
filtre: luminosité(150%) teinte-rotation(180degré) ombre portée(0pixels 0pixels 10pixelsRVB(0, 0, 0, 0.5));
mode mix-blend: filtrer;
}

Ce code combine les filtres; luminosité, teinte-rotation, ombre portée, et un mode mix-blend de valeur filtrer à l'image. Il augmente la luminosité de 150 %, tandis que hue-rotation inversera les couleurs de l'image de 180 degrés.

Ensuite, une ombre portée est également appliquée. Enfin, le filtrer la valeur du mode de fusion combinera les couleurs de l'image avec l'arrière-plan sous-jacent, résultant en un effet où les couleurs plus claires sont intensifiées et les couleurs plus foncées sont mélangées avec le arrière-plan.

Maîtriser les filtres et les modes de fusion

Vous avez découvert les différents types de filtres CSS et comment 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 conceptions uniques.

Si vous expérimentez davantage ces techniques, vous pouvez ajouter un niveau supplémentaire d'intérêt visuel à vos conceptions.