Filtres

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

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)

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