• Filtre

    Un petit amusement avec les filtres CSS; celui-si est hue-rotate qui modifie les couleurs selon un cercle .

    Vous pouvez remplacer l'adresse de mon image par la votre, dans le code.

    Ce petit montage vous permet de tester l'effet des différents filtres CSS.

    Ecrivez, dans la case: hue-rotate(Xdeg) et cliquez sur modifier le filtre.
    La valeur de X deg est à votre convenance (0deg à 360deg)

    Profitez-en pour tester les filtres CSS en copiant ces exemples dans la case puis clic sur modifier le filtre.

    grayscale(1)

    blur(5px)

    saturate(500%)

    sepia(1)

    invert(1)

    brightness(150%)

    contrast(2)

    opacity(0.5)

     

    <p><img id="fil" src="http://ekladata.com/h4_zy8aOowuvIY7cJyBzEcSJXx8@1152x648.jpg" alt="" /></p>
    <p>Ecrivez, dans la case: <span style="background-color: #ffff00;">hue-rotate(Xdeg)</span> et cliquez sur modifier le filtre.<br />La valeur de X deg est &agrave; votre convenance (0deg &agrave; 360deg)</p>
    <form><input id="saisie" style="font-size: 12pt;" type="text" /> <input onclick="filtre()" type="button" value="modifier le filtre" /></form><hr style="border: 0.3vh double grey;" />
    <p>...</p>
    <script type="text/javascript">// <![CDATA[
    function filtre()
    {
    var objet1=document.getElementById("saisie");
    var objet2=document.getElementById("fil");
    objet2.style.filter= objet1.value;
    }
    // ]]></script>
    <style><!--
    #fil{filter: hue-rotate(0deg);
    --></style>