• Filtres

    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)

    Filtres sur image

     

    .module_menu_type_lastvisitors img {
        filtergrayscale(1);         
        -webkit-filtergrayscale(1);         
        -moz-filtergrayscale(1);         
        -o-filtergrayscale(1);         
        -ms-filtergrayscale(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
        filtersepia(1);         
        -webkit-filtersepia(1);         
        -moz-filtersepia(1);         
        -o-filtersepia(1);         
        -ms-filtersepia(1);}

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

     

      ♦ blur (flou)

    Filtres sur image

    .module_menu_type_lastvisitors img
        filterblur(2px);         
        -webkit-filterblur(2px);         
        -moz-filterblur(2px);         
        -o-filterblur(2px);         
        -ms-filterblur(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

    Filtres sur image

    .module_menu_type_lastvisitors img {
        filtersaturate(400%);         
        -webkit-filtersaturate(400%);         
        -moz-filtersaturate(400%);         
        -o-filtersaturate(400%);         
        -ms-filtersaturate(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

    Filtres sur image

    .module_menu_type_lastvisitors img {
        filterinvert(1);       
        -webkit-filterinvert(1);        
        -moz-filterinvert(1);       
        -o-filterinvert(1);        
        -ms-filterinvert(1)

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

     

     ♦ brightness

    Filtres sur image

    .module_menu_type_lastvisitors img {
        filterbrightness(50%);         
        -webkit-filterbrightness(50%);         
        -moz-filterbrightness(50%);         
        -o-filterbrightness(50%);         
        -ms-filterbrightness(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
    Samedi 25 Août à 13:36

    C'est super intéressant de savoir que l'on peut faire ça !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :