• Filtres

    J'ai publié dernièrement des articles genre "Vitraux", avec des cadres qui coloraient l'image de fond en différentes couleurs semi-transparentes.

    Pour modifier une image avec ce genre d'attribut et sans avoir recours à un logiciel de traitement d'image, nous pouvons:

    - soit utiliser un filtre CSS, sur la totalité de l'image,

    - soit, placer, au dessus de l'image, un cadre, recouvrant ou non la totalité de l'image, avec, en fond, une couleur semi-transparente (rgba): le site que j'utilise: ICI.

    Exemple: filtres CSS au survol des noms.

    N et B

    Sépia

    Invert

     


    <div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="ac1" class="ac">N et B</p>
    <p id="ac2" class="ac">S&eacute;pia</p>
    <p id="ac3" class="ac">Invert</p>
    <p id="fl1">&nbsp;</p>
    </div>

    <style><!--
    .ac{position: absolute; z-index:5; width:8vw; height:2vw;text-align:center; font-size:1.5vw; text-shadow:0.1vh 0.1vh black; color:white;}
    #ac1{transform:translate(72vw,2vw);}
    #ac2{transform:translate(72vw,5vw);}
    #ac3{transform:translate(72vw,8vw);}
    #fl1{position: absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/fGfKSVllvDTEV_Vs-0k11yO7I0w.jpg'); background-size:cover;}
    #ac1:hover ~ #fl1{-webkit-filter:grayscale(100%); filter:grayscale(100%);}
    #ac2:hover ~ #fl1{-webkit-filter:sepia(100%); filter:sepia(100%);}
    #ac3:hover ~ #fl1{-webkit-filter:invert(100%); filter:invert(100%);}
    --></style>


    Nous pouvons aussi placer un cadre semi-transparent, d'une couleur de fond en rgba, au dessus de tout ou partie de l'image.

     

     


    <div style="width:80vw; height:45vw; margin:1vh auto;">
    <p id="ad1">&nbsp;</p>
    <p id="fd1">&nbsp;</p>
    </div>
    <style><!--
    #ad1{position: absolute; z-index:5; width:80vw; height:45vw; background:rgba(255,0,100,0.2); opacity:0;}
    #fd1{position: absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/1EAWaXnuVmuxn-DHa991Az_osLY.jpg'); background-size:cover;}
    #ad1:hover{opacity:1;}
    --></style>


     

     

     


    <div style="width: 80vw; height: 45vw; margin: 1vh auto;">
    <p id="ae1">&nbsp;</p>
    <p id="ae2">&nbsp;</p>
    <p id="fe1">&nbsp;</p>
    </div>

     <style><!--
    #ae1{position: absolute; z-index:5; width:20vw; height:20vw; border:0.4vh solid white; transform:translate(25vw,5vw); background:rgba(0,50,150,0.2);}
    #ae2{position: absolute; z-index:5; width:20vw; height:20vw; border:0.4vh solid white; transform:translate(50vw,20vw); background:rgba(50,255,50,0.2);}
    #fe1{position: absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/1EAWaXnuVmuxn-DHa991Az_osLY.jpg'); background-size:cover;}
    --></style>