Autor Zpráva
jefitto44
Profil
Mám stránku, kde budú čiernobiele obrázky. Oni tam teda budú umiestnené ako farebné, a pri hoveri tiež budú farebné, ale ak nebude hvoer, chcel by som, aby boli čiernobiele, resp. grayscale. Existuje na to nejaká CSS3 featura?
Trsak
Profil
Nejlepší řešení bude asi prostě si vytvořit barevný a černobílí obrázek a při hoveru je měnit.

img.greyscale { background: url(../YourBlackAndWhiteImage.png);}
img.greyscale:hover { background: url(../YourColoredImage.png};}

Našel jsem ale i toto řešení:
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%);
}
jefitto44
Profil
Tiež som našiel toto riešenie... moja otázka však je, čo je toto v url, to data... to je nejake SVG pravdepodobne, ale čo robí?

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: