J'essaie de savoir comment, lorsque survolées, les photos montrent leurs vraies couleurs au lieu d'être en noir et blanc sur ce site: http://2010.dconstruct.org/. Je ne pense pas que ce soit simple d'avoir deux versions de l'image, mais je n'en suis pas vraiment sûr.Comment le noir et blanc est tansition couleur
J'apprécierais n'importe quelle aide avec lui!
En fait, il n'utilise deux versions de l'image, même sans regarder le code, vous pouvez dire par la différence de contraste certains d'entre eux ont entre bw/versions couleur. De toute façon, chaque ancre a la même image de fond url("../../i/speakers/sprite.jpg") affectée dont la position verticale différente détermine quel portrait est montré. Cette image de sprite est en b/w.
Chaque ancre contient un élément d'image (la version colorée) avec une opacité initialement définie sur 0, puis défini sur 100% au survol de la souris.
<a class="tile bridle" href="/speakers/james-bridle">
<p>
<span>
James
<b>Bridle</b>
</span>
</p>
<img alt="" src="http://media02.dconstruct.org/2010-0008/i/speakers/bridle.jpg?0008"/>
</a>
Il utilise cette option pour réaliser la transition:
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(transparent), color-stop(0.7, transparent),
to(rgba(0, 22, 9, 0.496094)));
Merci, vous avez parfaitement raison. Merci encore d'avoir trié tout ça! – Tony
@Tony De rien! P.S .: Vous pouvez utiliser l'extension Firebug pour Firefox pour trier rapidement ce genre de doutes .. Je l'utilise tout le temps et je l'aime! – Lucius
Je vais certainement essayer la prochaine fois que je vais fouiner dans le code de quelqu'un d'autre! – Tony