Comment ajouter des filtres et des réflexions aux images dans CSS?

L'apparition d'un site Web est très cruciale si vous avez l'intention d'attirer de plus en plus de publics sur votre site Web. Par conséquent, pour améliorer l'apparence globale d'un site Web, l'ajout d'effets graphiques aux images ou les images réfléchissantes est grandement recommandé. CSS fournit diverses propriétés qui vous permettent d'accomplir ces tâches avec facilité. Nous avons discuté de ces propriétés en détail dans cet article. Dans cet article, nous avons discuté de ce qui suit.

1. Filtres d'image dans CSS
2. Réflexions d'images dans CSS

Filtres d'image dans CSS

Dans le but d'ajouter divers effets spéciaux à une image telle que l'opacité, le flou, la saturation, etc., la propriété du filtre CSS est utilisée.

Syntaxe

Filtre: valeur;

Les différentes méthodes associées à la propriété du filtre sont expliquées ci-dessous.

Valeur	Description
aucun	Cette valeur ne ajoute aucun effet et est une valeur par défaut.
se brouiller	Il ajoute un flou à l'image et rend la valeur des pixels.
luminosité	Il est utilisé pour augmenter ou diminuer la luminosité d'une image et présenter des valeurs en pourcentage.
contraste	Cette valeur accorde le contraste d'une image et des valeurs sont définies en pourcentage.
niveaux de gris	Il transforme une image en une image en niveaux de gris et présente également des valeurs en pourcentage.
rotation	Cette valeur est utilisée pour faire pivoter une image et rend les valeurs en degrés.
inverser	Il inverse les échantillons qui existent dans l'image et les valeurs sont définies en pourcentage.
opacité	Cette valeur ajuste la transparence d'une image et prend des valeurs de 0 à 1.
saturer	Il sature une image en prenant des valeurs en pourcentage.
sépia	Cette valeur est utilisée pour convertir une image en sépia et présenter des valeurs en pourcentage.
secouer drop	Il est utilisé pour appliquer un effet d'ombre sur l'image.
URL ()	Il s'agit d'une fonction qui nécessite l'emplacement d'un document XML contenant un filtre SVG et peut rendre un lien vers un élément de filtre particulier.
initial	Cette valeur donne à la propriété sa valeur initiale.
hériter	Cette valeur hérite de la propriété filtrante de l'élément ancêtre.

Maintenant que vous connaissez toutes les valeurs qu'une propriété filtrante peut présenter, ci-dessous, nous avons démontré ces valeurs pour une meilleure compréhension.

D'abord et avant tout, ajoutons une image à notre page Web en utilisant HTML de base.

Html

Ici, nous avons simplement ajouté une image en utilisant la balise.

CSS

img
Largeur: 30%;
Hauteur: Auto;

Maintenant, nous utilisons CSS de base pour donner une certaine largeur et hauteur à l'image.

Sortir

L'image a été ajoutée à la page Web.

Appliquons maintenant des filtres à cette image et explorons les différentes valeurs que la propriété filtrante peut présenter.

Se brouiller

Nous avons réglé l'effet flou sur 2px. La plus valeur de la méthode Blur augmentera le flou.

.se brouiller
Filtre: Blur (2px);

Sortir

Ceci est une image floue.

Luminosité

La luminosité de l'image a été définie à 0.50. Une réduction de la valeur entraînera une baisse de la luminosité et vice versa.

.luminosité
Filtre: luminosité (0.50);

Sortir

La luminosité de l'image a été ajustée avec succès.

Contraste

Nous avons réglé le contraste de l'image à 160%. Si vous voulez augmenter le contraste, augmentez la valeur autant que vous le souhaitez.

.contraste
Filtre: contraste (160%);

Sortir

Un effet de contraste ajouté avec une grande facilité.

Niveaux de gris

Donnons à la méthode Grayscale () une certaine valeur et voyons les changements dans l'image.

.niveaux de gris
Filtre: niveaux de gris (100%);

Sortir

Une image colorée a été convertie en une image en noir et blanc en utilisant la méthode de gris () de la propriété filtrante.

Rotation

Nous attribuons la méthode Hue-Rotate () 270 degrés. Cette méthode modifie essentiellement les images par image tournante autour du cercle de couleur.

.Hue-rotate
Filtre: Hue-Rotate (270DEG);

Sortir

Ceci est une image avec une rotation de teinte de 270 degrés.

Inverser

La valeur inverse ajoute un effet spécial à l'image en l'inversant. Ici, nous inversons l'image 80%.

.inverter
Filtre: Invert (80%);

Sortir

Les échantillons de l'image ont été inversés.

Opacité

Pour faire une valeur d'opacité transparente d'image est utilisée. Ci-dessous, nous ajustez l'opacité de l'image à 0.4. Moins la valeur de l'opacité, plus l'image deviendra transparente.

.Opacité
Filtre: opacité (0.4);

Sortir

Ceci est une image avec une transparence de 40%.

Saturer

Pour ajouter de la saturation, la méthode saturé () de propriété de filtre est utilisée. Plus la valeur sera, plus la saturation de l'image.

.Saturer
Filtre: saturer (4);

Sortir

L'effet de saturation a été ajouté avec succès à l'image.

Sépia

Dans le but d'ajouter un effet sépia à l'image, donnez-lui une certaine valeur comme nous l'avons attribué à 50% dans l'extrait de code ci-dessous.

.sépia
Filtre: sépia (50%);

Sortir

L'effet sépia fonctionne correctement.

Secouer drop

Pour ajouter une ombre, nous utilisons la méthode Drop-Shadow. La longueur de l'ombre a été affectée de chaque côté de l'image.

.ombre
Filtre: Drop-Shadow (8px 8px 10px rouge);

Sortir

L'effet Drop-Shadow a été ajouté avec succès.

Maintenant que nous avons appris en détail la propriété du filtre, avançons et voyons ce qu'est la propriété reflétante.

Réflexions d'images dans CSS

Dans le but de refléter les images, la propriété CSS Box-reflect est utilisée.

Syntaxe

-webkit-box-reflect: ci-dessous | Ci-dessus | à droite | gauche;

Pour que cette propriété fonctionne pleinement sur divers navigateurs, il est utilisé avec un préfixe «-webkit-».

Note: Le navigateur Firefox ne prend pas en charge la propriété de réflexion sur boîte.

Ci-dessous, nous avons démontré certaines de ces valeurs à l'aide d'exemples pertinents afin que vous puissiez saisir le concept de réflexion d'image.

Ajoutons d'abord une image à notre page Web.

Html

Ici, nous avons ajouté une image et lui avons donné une certaine largeur et hauteur.

Sortir

Une image a été insérée dans la page Web.

Dessous

Attribuez simplement la valeur «ci-dessous» de la propriété Box-reflect pour refléter une image sous l'image d'origine.

img
-webkit-box-reflect: ci-dessous;

Sortir

L'image a été reflétée ci-dessous.

Droite

Explorons la «bonne» valeur de la propriété reflétante.

img
-webkit-box-reflect: à droite;

Sortir

L'image a été reflétée avec succès à droite.

Conclusion

Dans le but d'ajouter des effets spéciaux aux images apparaissant sur les sites Web, la propriété du filtre CSS est utilisée. Diverses méthodes que cette propriété peuvent présenter sont; Grayscale (), saturote (), opacity (), blur (), luminosité (), hue-rotate (), etc. En plus d'ajouter des effets spéciaux, vous pouvez également refléter des images en utilisant la propriété CSS Box-reflect à droite, à gauche, ci-dessus ou ci-dessous. Ce message couvre toutes les profondeurs de l'ajout de filtres ou de réflexions aux images à l'aide d'exemples pertinents.