Filtres

Par Kalyna dans Codages & Tutos le 19 Septembre 2017 à 18:59

Filtres sur image

Voici 6 filtres à mettre sur des images. (grayscale, sepia, blur, saturate, invert, bridhtness)

Pour cet exemple je vais mettre les filtres sur mes derniers visiteurs.

Avant de commencer, voici à quoi ressemble mon module "Derniers visiteurs" sans filtre.

Filtres sur image

I- LE CODE DE BASE

#sélecteur img  { 
    filter: FILTRE(1);         
    -webkit-filter: FILTRE (1);         
    -moz-filter: FILTRE (1);         
    -o-filter: FILTRE (1);         
    -ms-filter: FILTRE (1);}

En orange: Le sélecteur. Pour mon exemple ce sera ".module_menu_type_lastvisitors" et ne surtout pas oublier "img" pour "image". Sinon c'est tout votre module qui aura le filtre.

En bleu: Le nom du filtre.

En rose: Les valeurs. (Généralement 0 ou 1)

Rappel: Pour ajouter du CSS allez dans: Apparence > Modifier le thème > Ajouter du CSS

II- LES FILTRES

♦ grayscale (noir et blanc)

.module_menu_type_lastvisitors img { 
    filter: grayscale(1);         
    -webkit-filter: grayscale(1);         
    -moz-filter: grayscale(1);         
    -o-filter: grayscale(1);         
    -ms-filter: grayscale(1);}

Nom du filtre: grayscale
Valeur: mettre "1" pour activer le filtre et "0" pour le désactiver.

♦ sepia (ancien)

Filtres sur image

.module_menu_type_lastvisitors img { 
    filter: sepia(1);         
    -webkit-filter: sepia(1);         
    -moz-filter: sepia(1);         
    -o-filter: sepia(1);         
    -ms-filter: sepia(1);}

Nom du filtre: sepia
Valeur: mettre 1 pour activer le filtre et 0 pour le désactiver.

♦ blur (flou)

.module_menu_type_lastvisitors img { 
    filter: blur(2px);         
    -webkit-filter: blur(2px);         
    -moz-filter: blur(2px);         
    -o-filter: blur(2px);         
    -ms-filter: blur(2px); }

Nom du filtre : blur
Valeur : cette fois-ci c'est en px, plus le nombre de px sera élevé plus les images seront floues.

♦ saturate

.module_menu_type_lastvisitors img { 
    filter: saturate(400%);         
    -webkit-filter: saturate(400%);         
    -moz-filter: saturate(400%);         
    -o-filter: saturate(400%);         
    -ms-filter: saturate(400%);}

Nom du filtre: saturate
Valeur: Par défaut la saturation des images est à 100% donc pour ajouter de la saturation il faut mettre une valeur supérieure à 100%.

♦ invert

.module_menu_type_lastvisitors img { 
    filter: invert(1);       
    -webkit-filter: invert(1);        
    -moz-filter: invert(1);       
    -o-filter: invert(1);        
    -ms-filter: invert(1);

Nom du filtre: invert
Valeur: 1 pour activer le filtre (effet négatif) et 0 pour le désactiver.

♦ brightness

.module_menu_type_lastvisitors img { 
    filter: brightness(50%);         
    -webkit-filter: brightness(50%);         
    -moz-filter: brightness(50%);         
    -o-filter: brightness(50%);         
    -ms-filter: brightness(50%);}

Nom du filtre: brightness
Valeur: À ne pas confondre avec l'opacité, le filtre brightness modifie la clarté des images. 0% = sombre et 100% clair.

Commentaires
1

Nesumi

Samedi 25 Août 2018 à 13:36
C'est super intéressant de savoir que l'on peut faire ça !
Répondre

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Me prévenir par mail en cas de réponse
2

Anotcha

Mercredi 28 Octobre 2020 à 18:18
Kikou uwu

Personnellement j'ai modifié le code pour les avatars de mes commentaires, mais j'aimerais savoir si on pourrait faire redevenir l'avatar normal quand la souris passe dessus avec une transition lente on vas dire ça comme ça ?

Répondre

Voir les réponses

Kalyna

Mercredi 28 Octobre 2020 à 19:45

Salut :)

Pour les transitions je te recommande le blog Phantasy graph', tout est expliqué dans ce tuto. ;)

Pour le survol. Tu reprends le même sélecteur (celui pour les avatars des commentaires) et tu ajoutes :hover et tu changes les valeurs des propriétés: exemple :

.commentavatar img {
filter: invert(1);
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1); }

.commentavatar img:hover {
filter: invert(0);
-webkit-filter: invert(0);
-moz-filter: invert(0);
-o-filter: invert(0);
-ms-filter: invert(0); }

Anotcha

Mercredi 28 Octobre 2020 à 19:56

huum

j'ai mit hover mais sa reste pareil entre les deux transition et on ne voit pas le filtre ;-; j'ai essayé en changeant les valeur des propriété : 0, 2, 3, et à 2 et 3 c'est l'inverse qui se passe : c'est en faisant la transition que le filtre apparraît

je sais pas si c'est claire ;-;

Kalyna

Mercredi 28 Octobre 2020 à 20:23

Tu peux coller ton code ici en commentaire, si tu veux, je vais y jeter un œil.

Anotcha

Mercredi 28 Octobre 2020 à 20:35

.commentavatar img:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0 );
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);}

Kalyna

Mercredi 28 Octobre 2020 à 20:49

J'ai testé sur mon blog. Pour moi ça fonctionne. (mais pas sûre que ce soit ce que tu veux ^^)

.commentavatar img { filter: grayscale(1);
  -webkit-filter: grayscale(1 );
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
  }

.commentavatar img:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0 );
  -moz-filter: grayscale(0);
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);}

Anotcha

Jeudi 29 Octobre 2020 à 14:09

c'est bien ça ui, je vai tester du coup uwu

Anotcha

Jeudi 29 Octobre 2020 à 14:13

sa marche OWO merchii

Kalyna

Jeudi 29 Octobre 2020 à 15:15

De rien ;-)
Suivre le flux RSS des commentaires

Vous devez être connecté pour commenter

Filtres

I- LE CODE DE BASE

II- LES FILTRES

Commentaires