• Images noires et blanches

    Comment rendre des images noires et blanches

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

     

             N O R M A L          

    img {
        -webkit-filter: grayscale(20%);
        filter: grayscale(20%);
    }

    grayscale : c'est la filtre qui vous permet de rendre vos images noires et blanches.
    50% : valeur à changer selon vos goûts. Sachant que 100 est le valeur maximum et que le minimum est 0, plus votre valeur s'approchera de 100, plus la saturation baissera et donc, plus vos images seront noires et blanches.

             S U R V O L         
    Au survol, c'est le même code, avec ":hover".

    img:hover {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }



             T R A N S I T I O N         

    Si vous ne mettez que ces codes, vous aurez un passage au survol brutal et pas très beau. Pour changer ça, il faut mettre une transition :

    img{ -webkit-filter: grayscale(20%);
        filter: grayscale(20%);
    -webkit-transition
    : all 0.5s ease;

    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}

    0.5 : valeur à changer. Il faut séparer d'un point et non d'une virgule les nombres à virgule. Et plus votre valeur sera élevée, plus l'image prendra du temps à passer de l'état normal à l'état survolé.

    Sans transition -->    <-- Avec transition


     

       

    Prenons le code :
    img{-webkit-filter: grayscale(100%);
        filter: grayscale(100%);-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}
    img:hover{-webkit-filter: grayscale(0%);
        filter: grayscale(0%);}

     

    Sans le code :



    Avec le code :

     

    « Opacité des imagesImages floues »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :