Blog

May 11, 2023

Comment utiliser les filtres CSS et les modes de fusion pour créer des effets visuels

Le filtre CSS et les modes de fusion sont des outils puissants pour appliquer facilement de superbes

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.

Vous appliquez des filtres CSS à l'aide defiltre 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 fonction de variable CSS. 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 :

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.

Leniveaux 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.

Lesé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:

Combinerniveaux de gris()à 14% etsépia()à 30% peut créer un effet vintage ou rétro sur votre image.

Lesaturer() 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.

Leinverser() 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:

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

Leteinte-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 leteinte-rotation()etcontraste()Les filtres peuvent créer un effet vibrant et coloré sur vos images.

Par exemple:

Hue-rotate peut accepter une valeur dedegré,diplômé,super, outourner . Le code ci-dessus fait pivoter la teinte de l'image de 10 degrés et augmente le contraste.

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 leluminosité()etse brouiller()les filtres peuvent créer un effet rêveur et doux sur vos images.

Par exemple:

Le code ci-dessus diminue la luminosité de0,8 (80 %)et applique une5pxeffet de flou sur l'image.

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 leombre portée()etopacité()les filtres peuvent créer un effet subtil sur vos éléments de texte.

Par exemple:

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.

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 :

Les deux modes de fusion les plus courants sontmode de fusion d'arrière-planetmode 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 utilisermode de fusion d'arrière-planlorsque 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 lemode mix-blend pour fusionner le contenu d'un élément donné avec le contenu de son parent direct. Lemode mix-blendest 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'utilisationmode mix-blendpour mélanger texte et image.

HTML :

CSS :

Ledifférencele 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é.

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 :

Ce code combine les filtres ;luminosité,teinte-rotation,ombre portée, et unmode mix-blendde valeurfiltrer à l'image. Il augmente la luminosité de 150 %, tandis que hue-rotationinversera les couleurs de l'image de 180 degrés.

Ensuite, une ombre portée est également appliquée. Enfin, lefiltrerLa valeur du mode de fusion combinera les couleurs de l'image avec l'arrière-plan sous-jacent, ce qui donnera un effet où les couleurs plus claires sont intensifiées et les couleurs plus sombres sont mélangées avec l'arrière-plan.

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.

Noble Okafor est un ingénieur logiciel qualifié avec plus de 3 ans d'expérience dans le domaine de la programmation. Il est passionné par la création de solutions logicielles JavaScript, natives et multiplateformes mobiles et Web optimisées. Il s'efforce de documenter ses connaissances et ses leçons à travers ses articles techniques avec plus d'un an d'expérience dans l'écriture. L'objectif principal de ces articles est de simplifier les complexités autour des sujets de génie logiciel.