• Ajouter de la lumière aux images

    Sur cette partie, voyez comment on modifie tout le contenu des fenêtres.

    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 {
            filter:brightness(100%);
    }

     grayscale : c'est le filtre qui vous permet de rendre vos images plus lumineuses.
    100% : valeur à changer selon vos goûts. Sachant que 100 est la luminosité de départ. Si vous dépassez cent, vous allez ajouter de la lumière, et si vous mettez une valeur inférieure, vous allez enlever de la lumière.

    Si vous voulez ajouter de la lumière au survol, il faut mettre le même code, avec ":hover" :
    img:hover {
            filter:brightness(NOMBRE%);
    }

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

     img:hover {
            filter:brightness(140%);
    }


             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{filter:brightness(100%);
    -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{filter: brightness(50%);
    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;}
    img:hover{filter: brightness(0%);}

     

    Sans le code :



    Avec le code :

     


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :