Černobílý efekt 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")
}

Funkční v IE 6-9, Firefox, Chrome

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře