• Les filtres CSS3

    La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet

    Les filtres CSS3

    sélecteur{
          -webkit-filter: blur(Xpx);
          -moz-filter: blur(Xpx);
          -o-filter: blur(Xpx);
          filter: blur(Xpx);
    }

    Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.

    Les filtres CSS3

    Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)

    sélecteur{
          -webkit-filter: grayscale(1);
          -moz-filter: grayscale(1);
          -o-filter: grayscale(1);
          filter: grayscale(1);
    }

    Les filtres CSS3

    Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.

    sélecteur{
          -webkit-filter: sepia(1);
          -moz-filter: sepia(1);
          -o-filter: sepia(1);
          filter: sepia(1);
    }​

    Les filtres CSS3

    Brightness vous permet d'augmenter la luminosité d'un élément.
    0 represente le noir
    1 l'élément normal
    Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminosité

    sélecteur{
          -webkit-filter: contrast(5);
          -moz-filter: contrast(5);
          -o-filter: contrast(5);
          filter: contrast(5);
    }

    Les filtres CSS3

    Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
    0 n'a aucun contraste, ce qui affiche un élément gris
    1 ne modifie rien
    Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.

    sélecteur{
          -webkit-filter: brightness(5);
          -moz-filter: brightness(5);
          -o-filter: brightness(5);
          filter: brightness(5);
    }

    Les filtres CSS3

    Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
    Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.

    sélecteur{
          -webkit-filter: hue-rotate(180deg);
          -moz-filter: hue-rotate(180deg);
          -o-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
    }

    Les filtres CSS3

    Invert inverse les couleurs d'un élément.
    0 ne modifie rien
    0.5 rend l'élément d'un gris uni
    1 inverse totalement les couleurs

    sélecteur{
          -webkit-filter: invert(1);
          -moz-filter: invert(1);
          -o-filter: invert(1);
          filter: invert(1);
    }

    Les filtres CSS3

    Saturate permet de modifer la saturation des couleurs.
    0 met l'élément en nuance de gris
    1 ne modifie rien
    10 sature au maximum

    sélecteur{
          -webkit-filter: saturate(10);
          -moz-filter: saturate(10);
          -o-filter: saturate(10);
          filter: saturate(10);
    }

     

    Vous pouvez bien sûr utiliser plusieurs filtres sur le même élément. N'hésitez pas à bidouiller un peu les valeurs pour trouver ce que vous voulez.


  • Commentaires

    1
    Jeudi 12 Décembre 2013 à 20:48
    Merci du partage!
    2
    Dimanche 22 Décembre 2013 à 11:07

    Super merci c'est vraiment très utiles je ne savais pas qu'on pouvait faire tous ces effets :)

    3
    Dimanche 22 Décembre 2013 à 11:26
    Génial ^^ . Je l'utiliserais sans doute un jours .
    4
    Samedi 11 Janvier 2014 à 13:05

    Vraiment génial merci beaucoup c'est très utile ! ^^

    5
    Dimanche 16 Février 2014 à 19:10

    Je ne vois pas de changements quand je survole les images...

    6
    Dimanche 16 Février 2014 à 21:10

    C'est probablement dû à ton navigateur... Les propriété CSS3 ne sont pas encore reconnues partout ^^'

    De mon côté, j'utilise Chrome

    7
    Mercredi 19 Février 2014 à 13:34

    Merci beaucoup!!! >w<

    8
    Samedi 29 Mars 2014 à 13:26

    C'est super ! Mais quel est le sélecteur pour faire un effet sur une seule image ?

    Désolée si ma question n'est pas très claire :/

    9
    Samedi 29 Mars 2014 à 14:28

    Il faut que tu donne un ID à ton image, pour ensuite ne travailler que sur cet ID (cette image) en CSS :

    HTML

    <img src="URL" id="monImage" />

    CSS

    #monImage { propriété : valeur; }

    10
    Samedi 29 Mars 2014 à 14:36

    Merci :)

    11
    Dimanche 25 Mai 2014 à 13:10

    Salut Nagalia. :)

    Est-ce possible de créer un filtre pour avoir un effet 3D ? (Genre Bleu/Rouge)

    (Si tu veux un exemple pour le titre : ICI

    Merci d'avance. :3

    12
    Dimanche 25 Mai 2014 à 17:27

    Pas avec des filtres, mais avec text-shadow:

    => http://fanstasy-graph.eklablog.net/propriete-les-ombres-a5171564

    13
    Dimanche 25 Mai 2014 à 17:39

    Wouaw merci beaucoup. Et en passant thème très jolie et reposant. :3

    14
    Jeudi 29 Mai 2014 à 19:02

    Sa me dit que le code CSS est incorecte.

    15
    Vendredi 30 Mai 2014 à 12:16

    Quand ce genre de message s'affiche, c'est généralement parce qu'il manque une accolade { ou }

    16
    Vendredi 30 Mai 2014 à 12:33

    Ben sa me dit que c'est incorecte '-'

    17
    Vendredi 30 Mai 2014 à 12:37

    Regarde dans ton code si tu as le même nombre d'accolade ouvrante { et d'accolade fermante }

    Si c'est correcte, ça peut venir d'un commentaire qui n'est pas fermé. Les commentaire commence par /* et finissent par */

    18
    Vendredi 30 Mai 2014 à 12:38
    19
    Vendredi 30 Mai 2014 à 12:46

    Est-ce que ça fonctionne maintenant ?

    20
    Vendredi 30 Mai 2014 à 12:47

    Euh j'ai toujours pas tester

    21
    Samedi 7 Juin 2014 à 20:47

    Il n'existe pas d'autre filtre? Pour que ce ne soit par exemple que bleu, rouge etc..?

    (j'ai bien essayais avec le filtre hue mais quand les couleurs changent elles ne sont pas toutes monochromes)

    22
    Vendredi 11 Juillet 2014 à 22:19

    A la base, en survolant je pensais que ça ne marchait pas, mais en passant sur chrome, je remarque que si en fait... Donc je tiens à préciser que ça ne marche pas sur Mozilla.

    23
    Mercredi 13 Août 2014 à 16:25

    Coucou :3

    J'ai essayé et ce code marche très bien sur Chrome.

    Par contre, sur Mozilla et sur IE, ça n'a pas l'air de marcher...? Est-ce que ça peut se régler ?

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    24
    Mardi 19 Août 2014 à 17:28

    Hellow ~

    J'voulais savoir... comment faire pour que ça fasse une transition ? '-' Parce que par exemple, pour passer l'image en noir et blanc, quand j'ai essayé, c'est passé d'un coup de la couleur au noir et blanc, ça fait donc pas très joli... j'ai essayé de bidouiller avec les codes que je connaissais déjà, mais pas moyen, ça marche pas :') si tu pouvais m'expliquer... merci :3

    25
    Mardi 19 Août 2014 à 20:55
    26
    Mardi 19 Août 2014 à 21:04

    Je sais, j'utilise déjà ces codes pour mes blogs, mais je n'arrive pas à les utiliser avec ces filtres :)

    27
    Mardi 19 Août 2014 à 21:50

    Ah eh bien, pour faire une transition vers le noir et blanc, il faut utiliser un hover, (je ne sais pas si le code est bon, mais faut faire un truc dans le genre x3)

    selecteur :hover {  -webkit-filter: grayscale(1);

          -moz-filter: grayscale(1);
          -o-filter: grayscale(1);

          filter: grayscale(1);

        -webkit-transition-duration: Xs;
                       -moz-transition-duration: Xs;

                       transition-duration: Xs;}

    28
    Mercredi 20 Août 2014 à 09:24

    J'ai déjà testé un arrangement de ce genre, mais ça ne marche pas xD

    29
    Mercredi 20 Août 2014 à 13:28

    Mais euh c'est quoi que tu veux rendre en noir et blanc ?

    30
    Mercredi 20 Août 2014 à 14:24

    Les images au survol ~

    31
    Mercredi 20 Août 2014 à 17:57

    Firefox ne prend pas encore en compte les filtres malheureusement... Bientôt j'espère :)

    32
    Mercredi 20 Août 2014 à 18:00

    Oui, en passant à Chrome ça m'a changé.

    33
    Mardi 25 Novembre 2014 à 11:23

    Je ne comprend pas comment faire .. ou je dois mettre ce code ? Dans les CSS Ou HTML ? Et je comprend pas ce qu'il faut mettre ou il y a les X

    34
    Mardi 12 Avril 2016 à 00:05

    Moi qui cherchais l'effet noir et blanc... merci ^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :