Filtres

Pas beaucoup d'idées alors, je reviens sur un attribut, les filtres, qui permettent certains décorations que nous faisons, en général, par un logiciel de traitement d'image.

Survol de chaque bouton pour appliquer un filtre différent.

A

B

C

D

E

F

G

H

J

K

L'écriture la plus simple est:

<p><img style="filter:grayscale(1);" src="http://ekladata.com/nYy1ocLMhUaOZztPpqi0GCJEdB0@1152x648.jpg"></p>

Différents filtres sont disponibles dont le bouton B blur (flou) qui, à mon avis, donnerait un meilleur effet en publiant l'image en flou puis en la rendant nette au survol.

J'utilise des unités viewport (vw) mais vous pouvez utiliser d'autres unités, selon le filtre.

A: filter:grayscale(1); noir et blanc

B: filter:blur(1vw); flou

C: filter:saturate(200%); saturation

D: filter:sepia(1); sepia

E: filter:invert(1); inversion des couleurs

F:filter: brightness(150%); luminosité

G:filter:contrast(2); contraste

H:filter:hue-rotate(120deg); rotation des couleurs par 120deg

J:filter:hue-rotate(240deg); rotation des couleurs par 240deg

K:filter:filter:contrast(1.5) sepia(1); 2 filtres appliqués.