• Changer de la lumière des images

    Voici comment ajouter de la lumière aux images.

    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 :

     

    « Images flouesChanger le contraste des images »

  • Commentaires

    1
    Samedi 6 Mai à 22:03

    Tu devrais préciser que c'est à partir de 100% que l'image s'éclaire et qu'en dessous de 100% elle se fonce ! ;) En tout cas c'est ce que je viens d'expérimenter x)

    • Voir les réponses
    2
    Dimanche 7 Mai à 15:24

    C'est pas grave ^^

    3
    Dimanche 28 Mai à 11:43

    Je trouve tes tutos super mais ca serait bien que tu mette un exemple pour voir ce que cela donne

    • Voir les réponses
    4
    Dimanche 28 Mai à 14:14

    Oui en tout cas il y a beaucoup de blog de CSS mais celui là il me sera bien utile ( je suis nulle en codes informatiques!)

    5
    Dimanche 28 Mai à 14:20

    En fait je trouve mes thèmes lourd au niveau couleur sauf que moi j'aime tout ce qui est bleu/turquoise des couleurs qui rendent pas super à l'écran. En plus je ne sais pas à chaque fois à quoi devrait ressembler mon blog. Alors quand je serai je t'écrirai avec plaisir.

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :