Réglage de l'image avec des effets de filtre CSS
Réglage de l'image Luminosité et Contraste, ou en transformant l'image en Niveaux de gris ou Sephia est une fonctionnalité courante que vous pouvez trouver dans une application de retouche d'image, comme Photoshop. Mais, il est maintenant possible d'ajouter les mêmes effets aux images Web en utilisant CSS.
Cette fonctionnalité provient des effets de filtre qui en sont encore au stade de l’étape de travail. Cependant, le navigateur Webkit semble être une étape dans la mise en œuvre de cette fonctionnalité.
Alors essayons et nous allons utiliser cette image de Mehdi Kh pour démontrer les effets.
Les effets
Appliquer les effets est très facile. Jetez un coup d’œil à l’extrait ci-dessous pour convertir les images en niveaux de gris;
img -webkit-filter: niveaux de gris (100%);
… Et ceci est pour sépia ala Instagram.
img -webkit-filter: sépia (100%);
Les deux sépia et le niveaux de gris les valeurs sont exprimées en pourcentage où 100% est le maximum et application 0% gardera l’image immuable, mais quand la valeur n’est pas explicitement spécifiée, le 100% sera pris comme valeur par défaut.
Il est également possible d’éclairer l’image, et nous pouvons le faire en utilisant le luminosité fonction, comme suit;
img -webkit-filter: luminosité (50%);
L’effet de luminosité fonctionne comme l’effet de contraste et sépia ci-dessus où la valeur de 0% gardera l'image telle qu'elle est et en appliquant 100% éclaircira totalement l’image, ce qui ne montrera éventuellement qu’une page blanche et non blanche au lieu d’une image.
L'effet de luminosité aussi permet des valeurs négatives, dans lequel il sera assombrir l'image.
img -webkit-filter: luminosité (-50%);
… Et nous pouvons ajuster le contraste de l'image de cette façon.
img -webkit-filter: contraste (200%);
Il y a aussi une petite différence sur le fonctionnement de la valeur, comme vous pouvez le voir ci-dessus, nous définissons la contraste() par 200%, c'est parce que la valeur de 100% est le point de départ où l'image restera inchangée. Quand la valeur est en dessous 100%, Disons que 50%, l'image sera moins contrastée.
De plus, nous pouvons également combiner l’effet dans un bloc de déclaration, comme dans l’exemple ci-dessous. Nous transformons l'image en niveaux de gris et augmenter le contraste de 50% en même temps.
img -webkit-filter: contraste en niveaux de gris (100%) (150%);
En combinant le filtre avec la transition CSS3, nous pouvons créer une flotter effet.
img: hover -webkit-filter: niveaux de gris (0%); img: hover -webkit-filter: sépia (0%); img: hover -webkit-filter: luminosité (0%); img: hover -webkit-filter: contraste (100%);
Enfin, nous pouvons essayer un autre effet. la Flou gaussien, qui va brouiller l'élément ciblé.
img: hover -webkit-filter: blur (5px);
Comme dans Photoshop, la valeur du flou est exprimée en rayon de pixel et si la valeur n'est pas explicitement indiquée, le 0 sera pris par défaut et l'image restera telle quelle..
Pensée finale
Il y a en réalité beaucoup plus d'effets dans la spécification. tel que teinte-rotation, inverser et saturer, mais je pense qu'ils sont moins appliqués dans les cas réels Web. Ainsi, la discussion a été limitée à quatre effets.
Et, malgré la discussion appliquée aux images dans ce tutoriel, la propriété peut également s'appliquer à n'importe quel élément du DOM..
Enfin, vous pouvez voir la démonstration en direct à partir de ces liens ci-dessous. Veuillez prendre note que le filtre est actuellement uniquement pris en charge dans Chrome 19 et ci-dessus.
- Démo
- Source de téléchargement
