• Filtre 2

    Hormis les quelques filtres proposés dans ma page précédente, il me semble qu'une autre pourrait intéresser les personnes qui veulent donner un effet inhabituel à leurs photos, que ce soit sans animation ou avec.

    Survolez les chiffres en degrés pour modifier l'aspect de l'image.

    45°

    90°

    135°

    180°

    225°

    270°

    315°

    335°

     

    Une image du net pour expliquer les couleurs et les degrés mais les valeurs du montages ne donnent pas les mêmes couleurs (?): j'ai essayé en valeurs négatives: itou !
    Filtre 2

    <div style="width: 80vw; height: 45vw; margin: 1vh auto;">
    <p id="hue1" class="hue">45&deg;</p>
    <p id="hue2" class="hue">90&deg;</p>
    <p id="hue3" class="hue">135&deg;</p>
    <p id="hue4" class="hue">180&deg;</p>
    <p id="hue5" class="hue">225&deg;</p>
    <p id="hue6" class="hue">270&deg;</p>
    <p id="hue7" class="hue">315&deg;</p>
    <p id="hue8" class="hue">335&deg;</p>
    <p id="fd">&nbsp;</p>
    </div>

    <style><!--
    .hue{position:absolute; z-index:5; width:6vw; height:2vw; text-align:center; line-height:2vw; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black;}
    #hue1{transform:translate(73vw,2vw);}
    #hue2{transform:translate(73vw,5vw);}
    #hue3{transform:translate(73vw,8vw);}
    #hue4{transform:translate(73vw,11vw);}
    #hue5{transform:translate(73vw,14vw);}
    #hue6{transform:translate(73vw,17vw);}
    #hue7{transform:translate(73vw,20vw);}
    #hue8{transform:translate(73vw,23vw);}
    #fd{position:absolute; z-index:1; width:80vw; height:45vw; background:url('http://ekladata.com/ZuRJEuPPGaZeSCyDc4YoGNhQ8e8.jpg'); background:cover;-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg);}
    #hue1:hover ~ #fd{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg);}
    #hue2:hover ~ #fd{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg);}
    #hue3:hover ~ #fd{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg);}
    #hue4:hover ~ #fd{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg);}
    #hue5:hover ~ #fd{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg);}
    #hue6:hover ~ #fd{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg);}
    #hue7:hover ~ #fd{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg);}
    #hue8:hover ~ #fd{-webkit-filter:hue-rotate(335deg);filter:hue-rotate(335deg);}
    --></style>