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="https://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>