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


    Les filtres (CSS3)

    Partagez
    Onyx
    FémininAge : 23Messages : 2614

    le 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?

    Pour le moment, les filtres sont supportés uniquement par Opéra et Chrome.



    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 {
      filter: type(valeur);
      -webkit-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é "filtre: 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é "filtre: grayscale(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse en couleurs.

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

    .nom_de_la_class:hover {
      filter: grayscale(0);
      -webkit-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é "filtre: 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é "filtre: blur(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse sans flou.

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

    .nom_de_la_class:hover {
      filter: blur(0);
      -webkit-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é "filtre: 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é "filtre: saturate(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa saturation normale.

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

    .nom_de_la_class:hover {
      filter: saturate(1);
      -webkit-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é "filtre: 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é "filtre: sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

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

    .nom_de_la_class:hover {
      filter: sepia(0);
      -webkit-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 "0" 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é "filtre: 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é "filtre: rotate(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

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

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



    7. Invert


    Premièrement, à quoi sert le filtre Invert? Eh bien ce filtre va servir mettre un filtre qui fait inverse l'image, un négatif, un peu comme une pellicule de film. 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 l'image ressemble complètement à un négatif.
    > En choisissant une valeur entre "0" et "1", l'image sera de plus en plus inversée 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é "filtre: invert(1);" pour que l'image soit complètement comme un négatif.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filtre: invert(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son apparence normale.

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

    .nom_de_la_class:hover {
      filter: invert(0);
      -webkit-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é "filtre: 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é "filtre: brightness(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale.

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

    .nom_de_la_class:hover {
      filter: brightness(1);
      -webkit-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é "filtre: contrast(0.5);" pour diminuer mon contraste de 50%.
    3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filtre: contrast(100%);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son contraste normal.

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

    .nom_de_la_class:hover {
      filter: brightness(1);
      -webkit-filter: brightness(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;
      filter: alpha(opacity=50);
    }

    .nom_de_la_class:hover {
      opacity: 0.5;
      filter: alpha(opacity=100);
    }

    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, Chrome et Opéra.

    On n'oublie pas IE? D'ailleurs, c'est quoi le "filter: alpha(opacity=50);" dans l'exemple? Ce n’était pas supposé être entre 0 et 1?
    C'est parce qu'IE est en retard sur les autres. Pour lui, il faut utiliser une forme un peu plus différente. On a donc un "filtre", le type est "alpha" et la valeur est "opacity=xx".
    La valeur doit être entre "0" et "100", "0" étant une image transparente et "100" étant une image avec son opacité naturelle.


    D'ailleurs, il y a déjà eu un tuto à ce sujet, donc je vous donne le lien : cliquez ici.




    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é "filtre: 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é "filtre: 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 {
      filter: drop-shadow(5px 5px 2px #545454);
      -webkit-filter: drop-shadow(5px 5px 2px #545454);
    }

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



    11. 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: #x;".
    > 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 {
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
    }

    .nom_de_la_class:hover {
      filter: grayscale(0);
      -webkit-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.

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

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



    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.

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

    • À l'exception de l'Opacity, les filtres sont supportés juste par Chrome et Opéra

    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 Jeu 4 Déc 2014 - 16:11, édité 22 fois



    Alzufen
    MasculinAge : 21Messages : 2102

    le 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
    FémininAge : 20Messages : 50

    le 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
    FémininAge : 22Messages : 4939

    le Jeu 4 Sep 2014 - 21:58

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

    Okhmhaka
    FémininAge : 31Messages : 31725

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



    Onyx
    FémininAge : 23Messages : 2614

    le 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
    FémininAge : 22Messages : 5018

    le Jeu 22 Jan 2015 - 21:00

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



    Ehawee
    FémininAge : 24Messages : 4513

    le 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!





    gif1gif2
    FAUCHEUSE ☠
    FémininAge : 20Messages : 36

    le 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
    FémininAge : 26Messages : 21

    le 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



    Contenu sponsorisé

    Aujourd'hui à 13:42


      La date/heure actuelle est Sam 10 Déc 2016 - 13:42