Černobílý styl obrázku

Internet Explorer 6–9

V Explorerech lze od pradávna využít vlastnost filter:

element {filter: gray}

Google Chrome

V Chrome funguje nová prefixovaná vlastnost filter.

-webkit-filter: grayscale(100%)

Firefox

Ve Firefoxu pro změnu funguje zadání filtru jako SVG:

element {
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")
}

Internet Explorer 10 a Opera

Paradoxní situace nastává u IE 10, kde už staré dobré filtry nefungují. A nové filtry ještě nefungují (ani s prefixem -ms-). Jedno řešení je shodit Explorer do režimu 9 (gray filtr je jeden z mála, spolu s průhledností, co takto funguje), druhé použít na stránce <svg>.

V Opeře pochopitelně zbývá jen druhá možnost. Taktéž řešení pomocí SVG bude funkční i v Chromu a Firefoxu (ne ale v IE 9 a starších).

Řešení pomocí <svg> v HTML

1. Vytvoří se <svg> kontejner,
2. vytvoří se nějaké ty filtry (lze použít generátor),
3. vloží se obrázek jako <image>, na který se použije výše vytvořený filter.

Ukázka

Pseudo černobílost

Lehce podobný efekt lze vytvořit překrytím obrázku průhledným elementem s černým pozadím.

Hudba budoucnosti

V budoucnu by ideálně mělo v prohlížečích fungovat prosté filter: grayscale(100%), jak nyní (byť s prefixem) funguje v Chrome. Případně alespoň s prefixem pro daný prohlížeč.

Zdroje a odkazy

• Černobílé obrázky napříč prohlížeči (anglicky), ukázka,
• O nových filtrech v CSS 3 (anglicky),
• Ukázka bez HTML značky <svg> (nefunkční v IE 10 a Opeře),
• Jak vytvořit černobílý filtr v IE 10 (anglicky),
• Od Microsoftu o SVG filtrech v IE 10