Grayscale Image avec CSS & re-color on mouse-over?
je cherche à prendre une icône qui est colorée (et sera un lien) et la tourner en niveaux de gris jusqu'à ce que l'utilisateur place leur souris sur l'icône (où il serait alors la couleur de l'image).
est-ce possible de le faire, et d'une manière qui est prise en charge par IE & Firefox?
5 réponses
il y a de nombreuses méthodes pour accomplir ceci, que je détaillerai avec quelques exemples ci-dessous.
Pure CSS (à l'aide d'une seule image couleur en image)
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/* Firefox 3.5+, IE10 */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(100%);
/* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease;
/* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden;
/* Fix for transition flickering */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
svg {
background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image {
transition: all .6s ease;
}
svg image:hover {
opacity: 0;
}<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>vous pouvez trouver un article lié à cette technique ici .
Pure CSS (à l'aide d'une échelle de gris et couleur des images)
Cette approche nécessite deux copies d'une image: un en niveaux de gris et l'autre en couleur. En utilisant le CSS :hover puedoselector, vous pouvez mettre à jour le fond de votre élément pour basculer entre les deux:
#yourimage {
background: url(../grayscale-image.png);
}
#yourImage:hover {
background: url(../color-image.png};
}
#google {
background: url('http://www.google.com/logos/keystroke10-hp.png');
height: 95px;
width: 275px;
display: block;
/* Optional for a gradual animation effect */
transition: 0.5s;
}
#google:hover {
background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
}<a id='google' href='http://www.google.com'></a> cela pourrait aussi être accompli en utilisant un effet de vol stationnaire basé sur Javascript tel que la fonction hover() de jQuery de la même manière.
Envisager une Bibliothèque Tierce
la bibliothèque Désaturer est une bibliothèque commune qui vous permet de basculer facilement entre une version à l'échelle de gris et une version pleine couleur d'un élément ou d'une image donnée.
répondu ici: convertir une image en échelle de gris en HTML /CSS
vous n'avez même pas besoin d'utiliser deux images qui sonne comme une douleur ou une bibliothèque de manipulation d'image, vous pouvez le faire avec le soutien de navigateur croisé (versions actuelles) et il suffit d'utiliser CSS. Il s'agit d'une approche d'amélioration progressive qui revient tout simplement aux versions couleur sur les navigateurs plus anciens:
img {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
}
img:hover {
filter: none;
-webkit-filter: none;
}
et filtres.fichier svg comme ceci:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>
j'utilise le code suivant sur http://www.diagnomics.com /
Transition En Douceur de B / w à la couleur avec effet d'agrandissement (échelle)
img.color_flip {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}
img.color_flip:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.1);
}
Voici une démo. Fonctionne même dans IE7:
http://james.padolsey.com/demos/grayscale /
et
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers /