AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal
Le Deal du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Les filtres (CSS3)

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Sep 2014 - 6:21




    Tuto - Les filtres (CSS3)


    Certains auront peut-être vu le tutoriel d'Alzufen sur comment faire passer une image "noir et blanc" à "couleur" ou ce tutoriel de Sparrow-Style sur l'opacité. Les filtres sont une nouveauté du CSS3 qui appliquent un certain filtre sur une image et peuvent être utilisés pour parvenir aux mêmes résultats que dans ces deux tutoriels. Il existe 10 filtres différents et ce tuto vous permettra d'apprendre à les connaître et les utiliser.

    Voici ce que ce tutoriel va contenir :
    • 1. Ce qu'est un filtre et comment s'en servir?
    • 2. Greyscale => Échelle de noir et blanc
    • 3. Blur => Flou
    • 4. Saturate => Saturation
    • 5. Sepia
    • 6. Hue Rotate => Roue des couleurs/teintes
    • 7. Invert => Invertion
    • 8. Brightness => Luminosité
    • 9. Contrast => Contraste
    • 10. Opacity => Opacité
    • 11. Drop Shadow
    • 12. Comment faire pour que l'effet soit progressif?
    • 13. Comment additionner plusieurs filtres

    À noter que les filtres fonctionnent avec Chrome, Opéra et Firefox, sauf l'opacité qui est supporté partout.




    1. Les filtres (Ce que c'est)


    C'est quoi exactement un filtre?
    Dites-moi, si vous mettez une paire de lunettes roses, qu'est-ce que vous verrez? Et bien vous verrez la même chose que normalement, mais en rose. Et plus la teinte de vos lunettes sera forte, plus ce que vous verrez semblera rose.
    Un filtre fonctionne de la même façon! En appliquant un filtre sur une image, c'est comme de mettre un calque invisible avec un effet spécial sur l'image. Plus vous intensifierez le filtre, plus l'image sera affectée par l'effet spécial.

    Mais plus encore, quand on parle de codage, c'est quoi un filtre?
    C'est simplement une propriété CSS à laquelle on donne une valeur pour déterminer l'intensité du filtre.

    Et comment on l'utilise?
    La première des choses est de mettre une image à l'endroit que l'on veut. Après tout, les filtres ne s'appliquent que sur les images. Nous allons donc mettre une image avec une class. Cela donnerait donc :
    Code:
    <img class="nom_de_la_class" src="url_de_l'image" />

    Ensuite, on met le filtre comme une propriété normale dans le CSS. On commence par mettre la propriété "filter" qui indique qu'il y a un filtre. Puis, on détermine un "type" qui nous indique quel effet de filtre est utilisé. Ensuite, entre parenthèses, on indique la valeur qui détermine l'intensité du filtre. Nous aurons donc ceci :
    Code:
    .nom_de_la_class {
      -webkit-filter: type(valeur);
      filter: type(valeur);
    }



    2. Greyscale (Noir et blanc)


    Premièrement, à quoi sert le filtre Greyscale? Eh bien ce filtre va convertir votre image en nuances de gris (noir et blanc). D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image est en "couleurs".
    > La valeur maximale est de "1", à savoir que l'image est complètement en noir et blanc.
    > En choisissant une valeur entre "0" et "1", l'image sera de plus en plus dans des tons de noir et blanc au fur et à mesure qu'on se rapproche du "1".

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: grayscale(1);" pour y mettre le filtre en noir et blanc au maximum.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: grayscale(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse en couleurs.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }

    .nom_de_la_class:hover {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }



    3. Blur (Flou)


    Premièrement, à quoi sert le filtre Blur? Eh bien ce filtre va mettre un flou sur votre image. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image reste nette
    > Plus on choisit une valeur en px élevée, plus le filtre est appliqué fortement.

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: blur(1px);" pour y mettre le filtre qui rend l'image floue de 1px.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: blur(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse sans flou.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: blur(1px);
      filter: blur(1px);
    }

    .nom_de_la_class:hover {
      -webkit-filter: blur(0);
      filter: blur(0);
    }



    4. Saturate (Saturation)


    Premièrement, à quoi sert le filtre Saturate? Eh bien ce filtre va servir à augmenter ou diminuer la saturation de votre image. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "1", à savoir que la saturation est normale.
    > En mettant une valeur de "0", l'image n'aura plus aucune saturation et apparaîtra en noir et blanc.
    > Plus on choisit une valeur élevée au-delà de "1", plus l'image sera saturée.

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: saturate(3);" pour augmenter la saturation à 300%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: saturate(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa saturation normale.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: saturate(3);
      filter: saturate(3);
    }

    .nom_de_la_class:hover {
      -webkit-filter: saturate(1);
      filter: saturate(1);
    }



    5. Sepia


    Premièrement, à quoi sert le filtre Sepia? Eh bien ce filtre va mettre un filtre qui fait ressembler votre image à une vieille photographie. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de sepia de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a ses couleurs normales.
    > La valeur maximale est de "1", à savoir que l'image ressemble complètement à une vieille photographie.
    > En choisissant une valeur entre "0" et "1", l'image sera de plus en plus semblable à une vieille photographie au fur et à mesure qu'on se rapproche du "1".

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: sepia(1);" pour que l'image ressemble à une vieille photographie.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: sepia(1);
      filter: sepia(1);
    }

    .nom_de_la_class:hover {
      -webkit-filter: sepia(0);
      filter: sepia(0);
    }



    6. Hue Rotate (Roue de couleurs)


    Premièrement, à quoi sert le filtre Hue Rotate? C'est un peu plus dur à expliquer... Si on pense à une roue de couleurs, notre image de base est sur un point de cette roue. En changeant la valeur de Hue Rotate, nous allons modifier les couleurs de l'image Voici un exemple pour illustrer un peu mieux :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image est à "0deg" de la roue.
    > Une valeur à "360deg" nous ramène au point de départ sur la roue.
    > Il est possible de mettre une valeur entre "0deg" et "360deg" et les couleurs de l'image sont affectés selon l'angle de la roue. Il est dur de voir avec exactitude quel couleur cela nous donnera, alors il est mieux de fonctionner par essai/erreur.

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: hue-rotate(270deg);" pour mettre mon image au 270ème degré de couleur sur la roue des couleurs.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: rotate(0deg);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: hue-rotate(270deg);
      filter: hue-rotate(270deg);
    }

    .nom_de_la_class:hover {
      -webkit-filter: hue-rotate(0deg);
      filter: hue-rotate(0deg);
    }

    Petit détail relativement important
    Je sais que certains ont tendance à ne pas mettre les "px" ou les "deg" quand la valeur est de 0.
    Or, si vous ne mettez pas le "deg" à 0 pour ce filtre, firefox ne le prend pas en considération.
    Du coup, assurez-vous de mettre "hue-rotate(0deg)" et non "hue-rotate(0)".
    Et en même temps, si vous pouviez essayer de prendre l'habitude de toujours mettre vos "deg" et "px", ce serait parfait puisque c'est la bonne façon de faire ^^



    7. Invert


    Premièrement, à quoi sert le filtre Invert? Eh bien ce filtre va servir mettre un filtre qui inverse les couleurs et teintes de l'image. Le vert devient rouge, le mauve devient jaune, le orange devient bleu, les couleurs foncées deviennent pâles, le blanc devient noir, etc. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a son apparence normale.
    > La valeur maximale est de "1", à savoir que les teintes et couleurs de l'image sont complètement inversées.
    > En choisissant une valeur entre "0" et "1", les couleurs et teintes de l'image seront de plus en plus inversées au fur et à mesure qu'on se rapproche du "1".

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: invert(1);" pour que les teintes et couleurs de l'image soient inversées.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: invert(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son apparence normale.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: invert(1);
      filter: invert(1);
    }

    .nom_de_la_class:hover {
      -webkit-filter: invert(0);
      filter: invert(0);
    }



    8. Brightness (Luminosité)


    Premièrement, à quoi sert le filtre Brightness? Eh bien ce filtre va servir à augmenter ou diminuer la luminosité de votre image. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "1", à savoir que la luminosité est normale.
    > En mettant une valeur de "0", l'image n'aura plus aucune luminosité et sera complètement noire.
    > Plus on choisit une valeur élevée au-delà de "1", plus l'image sera lumineuse.

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2);" pour augmenter ma luminosité à 200%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: brightness(2);
      filter: brightness(2);
    }

    .nom_de_la_class:hover {
      -webkit-filter: brightness(1);
      filter: brightness(1);
    }



    9. Contrast (Contraste)


    Premièrement, à quoi sert le filtre Contrast? Eh bien ce filtre va servir à augmenter ou diminuer le contraste de votre image. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "1", à savoir que le contraste est normal.
    > En mettant une valeur de "0", l'image n'aura plus aucun contraste et sera complètement gris.
    > Plus on choisit une valeur élevée au-delà de "1", plus l'image sera contrastée.

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: contrast(2);" pour augmenter mon contraste à 200%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: contrast(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son contraste normal à 100%.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: contrast(2);
      filter: contrast(2);
    }

    .nom_de_la_class:hover {
      -webkit-filter: contrast(1);
      filter: contrast(1);
    }



    10. Opacity (Opacité)


    Premièrement, à quoi sert le filtre Opacity? Eh bien ce filtre va servir à augmenter ou diminuer l'opacité de votre image. D'ailleurs, voici un exemple :

    L'image n'est plus hébergée, contactez Onyx SVP

    Ce filtre est l'exception qui confirme la règle :
    Il fonctionne sur tous les navigateurs !
    Il peut être utilisé sur d'autres choses que des images (sur des divs par exemple) !
    La propriété qu'on met dans le CSS n'a pas le même format que les autres filtres. Vous en verrez un exemple plus bas.

    Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
    > Par défaut, l'image a une valeur de "1", à savoir que l'image a son opacity normale.
    > En mettant une valeur de "0", l'image n'aura plus aucune opacité et sera transparente.
    > En choisissant une valeur entre "0" et "1", l'image sera de plus en plus transparente au fur et à mesure qu'on se rapproche du "0".

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "opacity: 0.5;" pour rendre mon image transparente à 50%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "opacity: 1;" pour qu'au survol, le filtre se dissipe et que l'image reprenne son opacité normale.

    Exemple :
    Code:
    .nom_de_la_class {
      opacity: 0.5;
    }

    .nom_de_la_class:hover {
      opacity: 1;
    }

    Hé, mais c'est différent des autres! Pourquoi c'est différent?
    Oui oui, j'y venais ^^
    Comme ce filtre s'applique ailleurs que sur des images et est plutôt assez utilisé, tous les navigateurs l'ont intégré, sans passer par un filtre normal.
    Du coup, à la place du format habituel qui est "filter: type(valeur)", on a simplement "type : valeur".
    Cela fonctionne pour Firefox, Safari, Internet Explorer, Chrome et Opéra.




    11. Drop-Shadow


    Premièrement, à quoi sert le filtre Drop-Shadow? Eh bien, est-ce que vous êtes familiers avec le Box-Shadow? Là où on peut mettre une ombre autour d'une image (ou div)? Eh bien quand on utilise le Box-Shadow sur une image png, cela fait un ombre autour du cadre de l'image. Le Drop-Shadow, lui, sera capable de faire la différence entre le "vide" de l'image et le "contenu" de l'image pour mettre l'ombre juste sur le vrai contenu de l'image.

    D'ailleurs, voici un exemple Box-Shadow vs Drop-Shadow :

    L'image n'est plus hébergée, contactez Onyx SVP L'image n'est plus hébergée, contactez Onyx SVP


    Ça n'a pas l'air d'être des valeurs comme les autres... Cela fonctionne comment?
    > Il y a comme d'habitude le "filter" qui est la propriété.
    > Ensuite, on a encore le "drop-shadow" qui est le type.
    > Dans la valeur entre parenthèse, le premier "#px" correspond au décalage de l'ombre vers le droite.
    > Dans la valeur entre parenthèse, le deuxième"#px" correspond au décalage de l'ombre vers le bas.
    > Dans la valeur entre parenthèse, le troisième "#px" correspond au flou de l'ombre.
    > Dans la valeur entre parenthèse, la couleur à la fin correspond à la couleur de l'ombre.
    => Cela donne "filter: drop-shadow(#px #px #px couleur)"

    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: drop-shadow(5px 5px 2px #545454);" pour mettre une ombre de 5px sur la gauche, de 5px vers le bas, d'un flou de 2px et de couleur #545454.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" en lui donnant la propriété "filter: drop-shadow(8px 8px 3px #545454);" changer pour que l'ombre soit de 8px sur la gauche, de 8px vers le bas, d'un flou de 3px et de couleur #545454.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: drop-shadow(5px 5px 2px #545454);
      filter: drop-shadow(5px 5px 2px #545454);
    }

    .nom_de_la_class:hover {
      -webkit-filter: drop-shadow(8px 8px 3px #545454);
      filter: drop-shadow(8px 8px 3px #545454);
    }



    12. Faire un effet progressif


    Vous savez maintenant comment utiliser les 10 types de filtres. Vous savez même comment mettre un effet différent lorsqu'on survole l'image à l'aide de la pseudo-class "hover".

    Mais comment je fais si je veux que l'effet soit progressif quand je survole l'image?
    > Nous allons rajouter la propriété "transition" à la class de notre image dans notre CSS.
    > La propriété transition se décompose comme ceci : "transition: #s;".
    > Nous avons donc la propriété "transition", puis la valeur en secondes qui indiquent la durée de la transition.

    Prenons mon premier filtre comme exemple, à savoir celui Greyscale. Nous avons actuellement le code suivant :
    Code:
    .nom_de_la_class {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }

    .nom_de_la_class:hover {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }


    Pour que l'effet soit progressif, on va rajouter la propriété transition comme ceci "transition: 1s;" pour que la durée de la transition soit de 1 seconde. Pour mettre ½ seconde, on aurait mis "transition: 0.5s;" et pour mettre 3 secondes on aurait mis "transition: 3s;".

    Résultat avec une transition de 1 seconde :
    Code:
    .nom_de_la_class {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
      -webkit-transition: 1s;
      transition: 1s;
    }

    .nom_de_la_class:hover {
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }



    13. Additionner plusieurs filtres


    Maintenant qu'on sait comment utiliser les filtres et comment faire pour que l'effet du filtre se fasse de façon progressive, voyons comment appliquer plusieurs filtres à une même image

    D'ailleurs, voici un exemple où on additionne les filtres Brightness (Luminosité) et Sepia :

    L'image n'est plus hébergée, contactez Onyx SVP


    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale.

    Comme vous le constatez, dans ma propriété "filter", j'ai séparé les différents "types" (brightness et sepia) avec un simple espace.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: brightness(2) sepia(1);
      filter: brightness(2) sepia(1);
    }

    .nom_de_la_class:hover {
      -webkit-filter: brightness(1) sepia(0);
      filter: brightness(1) sepia(0);
    }


    C'est simple comme ça?
    Oui, c'est tout simplement cela! Il y a une seule exception, soit l'opacité qui se met dans une propriété à part.




    Petit exemple avec l'Opacité ajouté en plus de Brightness et Sepia :

    L'image n'est plus hébergée, contactez Onyx SVP


    Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
    1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
    2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie. J'ai également mis la propriété "opacity: 0.5;" pour baisser l'opacité de mon image à 50%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale. J'ai également mis la propriété "opacity: 1;" pour remettre l'opacité de mon image à 100%.

    Exemple :
    Code:
    .nom_de_la_class {
      -webkit-filter: brightness(2) sepia(1);
      filter: brightness(2) sepia(1);
      opacity: 0.5;
    }

    .nom_de_la_class:hover {
      -webkit-filter: brightness(1) sepia(0);
      filter: brightness(1) sepia(0);
      opacity: 1;
    }



    Conclusion

    • Un filtre est une propriété où un effet est appliqué à une intensité variable sur une image.

    • Son format est "filter: type(valeur);"

    • Il est possible d'utiliser 10 effets différents : Greyscale, Blur, Saturate, Sepia, Hue Rotate, Invert, Brightness, Contrast, Opacity et Drop Shadow.

    • Presque chaque effet a une "échelle de valeurs" différente, alors il faut s'assurer de les consulter avant d'utiliser les filtres.

    • Il est possible de faire un effet progressif à l'aide des transitions.

    • Vous pouvez additionner plusieurs filtres sur une même image selon en les séparant par un espace "filter: type(valeur) type(valeur) type(valeur);"

    Voilà, j'espère que cela a pu vous aider. Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

    À plus !


    Dernière édition par Onyx le Sam 22 Avr 2017 - 0:45, édité 43 fois



    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Jeu 4 Sep 2014 - 15:31

    Merci du partage Onyx, très intéressant, je vais lire ça plus tard à tête reposé quand j'aurais fini tout ce que j'ai prévu de faire (Et oui, pour une fois que j'ai pas la flemme de bosser faut en profiter :O)

    Faudrait que je me fasse un petit cours de rattrapage sur le CSS3 moi tant qu'à faire, histoire d'apprendre ce que je connais pas encore :hum:



    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Jeu 4 Sep 2014 - 21:49

    Merci beaucoup ! ♥
    En fait c'est plus simple que ce que je pensais...
    Par contre j'ai une question, comment fait-on pour que l'effet soit progressif ? Car, sur tes images, ton Grayscale se fait progressivement, et moi il se fait brusquement. J'ai essayé de mettre le même genre de code qu'il y a dans le tuto de Sparrow sur l'opacité mais ça ne donne rien. :c
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Jeu 4 Sep 2014 - 21:58

    Il te suffit de mettre quelque chose comme ça :
    Code:
    transition: 1s;

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 4 Sep 2014 - 23:02

    Quel dommage que ces filtres ne soient pas encore acceptés par Firefox T_T, en général c'est le premier sur tout ce navigateur ! è_é Et comme je ne supporte pas Chrome... Rolling Eyes
    Enfin j'espère que ça arrivera vite x)

    Merci en tout cas pour ce super tuto' ! Je connaissais les effets, je voulais d'ailleurs les utiliser, genre pour le QEEL qui passe de noir et blanc à couleur ça aurait été pratique Razz mais vu que beaucoup de personnes sont sous Firefox j'ai préféré rester sur une solution à l'ancienne pour le moment.



    sign
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 5 Sep 2014 - 3:53

    Merci pour les beaux commentaires ^^

    Moi c'est le drop-shadow que j'aimerais qu'il soit partout... Dire qu'on pourrait se passer d'ouvrir son logiciel de graph pour rajouter une ombre à un render, ce serait tellement génial *o*



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Jeu 22 Jan 2015 - 21:00

    Merci ma belle, je classe aussi! (enfin!) :hug:



    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Mer 1 Avr 2015 - 23:18

    HAN *-* (bien que les 3/4 des filtres aient sauté sur firefox ... ><)

    tu viens de révolutionner ma vie avec le drop-shadow!





    C'est beau *-* je suis émue! je te vénère!




    Rheah
    Rheah
    FémininAge : 27Messages : 148

    Lun 25 Mai 2015 - 22:09

    Super *w* Merci beaucoup pour ce récap' super clair et précis ! J'avais aucune idée que le CSS3 permettait de faire tant de choses.

    (sur Chrome. Mais j'm'en fiche, moi j'aime que Chrome uhuhuh)

    Par contre, question : est-il possible d'en cumuler plusieurs sur une même image ? Du style, faire une image grise et floue qui au survol devient colorée et nette ? J'ai essayé et ai misérablement failé. ham3
    helenecolin
    helenecolin
    FémininAge : 33Messages : 21

    Mer 24 Juin 2015 - 15:29

    Super tuto en effet, il y a certains effets que je ne connaissais pas du tout en css, alors c'est bon de savoir qu'ils existent Wink



    transition - Les filtres (CSS3) ParadesEnd1
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 21 Avr 2017 - 15:17

    Bouh!

    Je up pour dire que la majorité des filtres fonctionnent maintenant sur Firefox \o/



    Isilian
    Isilian
    FémininAge : 41Messages : 8

    Sam 26 Aoû 2017 - 2:12

    Merci pour le tutoriel !
    Tous les effets fonctionnent chez moi correctement, quel que soit mon navigateur (y compris Firefox)... sauf drop-shadow par contre. Celui qui m'intéressait particulièrement. J'ai recopié la syntaxe indiquée. oO
    (Je vais aller dans la rubrique appropriée oui ^^)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:25