Jak vytvářet grafické filtry prvků na stránce?

CSS filter

Grafické filtry přez CSS se hodí, když potřebujete nějaký prvek stránky (jakýkoliv blok, obrázek prostě cokoliv) upravit bez zásahu grafika. Upravovat lze různé vlastnosti jako: rozmazání, světlost, kontrast, stín prvku, přechod do černobílé barevnosti, "otočení barev", inverze barev, sytost, "stará fotografie" .
Velkou nevýhodou filtrů je skutečnost, že nejsou podporovány v prohlížeči Internet Explorer. S ohledem na ústup tohoto prohlížeče a všeobecnou preferenci Chrome/Firefox to komplikace je menší, ale musí se s touto skutečností počítat.

Filtry fungují s prefixy od Chrome 18 a Opery 17. Firefoxu 35 prefixy nepotřebuje a starší verze podporuje pouze připojení SVG filtru přes url. Internet Explorer tuto vlastnost nepodporuje.

Rozmazání

element {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px);
}

Zadávat je možné běžné délkové jednotky kromě procent.

Světlost

element {
  -webkit-filter: brightness(90%);
  -moz-filter: brightness(90%);
  -ms-filter: brightness(90%);
  -o-filter: brightness(90%);
  filter: brightness(90%);
}

0% (Minimální hodnota, element je černý), 100% (element je stejný jako bez filtru), 200% (Maximální hodnota, element je bílý)

Kontrast

element {
  -webkit-filter: contrast(90%);
  -moz-filter: contrast(90%);
  -ms-filter: contrast(90%);
  -o-filter: contrast(90%);
  filter: contrast(90%);
}

0% (minimální hodnota), 100% (element je stejný jako bez filtru), 200% (maximální hodnota)

Stín

element {
  -webkit-filter: drop-shadow(10px 10px 10px red);
  -moz-filter: drop-shadow(10px 10px 10px red);
  -ms-filter: drop-shadow(10px 10px 10px red);
  -o-filter: drop-shadow(10px 10px 10px red);
  filter: drop-shadow(10px 10px 10px red);
}

Stín se nastavuje stejně jako vlastnost box-shadow (tu bych doporučil skrze lepší podporu hlavně v IE a vlastně totožnou funkcionalitu).
- První hodnota je vodorovná vzdálenost od objektu, kde se stín umístí. Kladné umístí stín vpravo a záporná vlevo.
- Druhá hodnota je svislá vzdálenost od objektu. Kladná hodnota vytvoří stín pod elementem, záporná nad.
- Třetí hodnota je intensita.
- Čtvrtá hodnota je barva.

Objekt černobíle

element {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

0% je totéž jako objekt bez filtru, 100% je plně černobílá.

Otočení barev

  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  -o-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);

Všechny barvy elementu/obrázku se přesunou do jiného spektra. Hodnoty jsou úhel otoení a to 0 - 360.

Inverze barev

  -webkit-filter: invert(100%);
  -moz-filter: invert(100%);
  -ms-filter: invert(100%);
  -o-filter: invert(100%);
  filter: invert(100%);

Při 100% se z bílé stane černá a naopak. U nižších procent se například z bílé stane nějaký odstín šedé.

Sytost

  -webkit-filter: saturate(200%);
  -moz-filter: saturate(200%);
  -ms-filter: saturate(200%);
  -o-filter: saturate(200%);
  filter: saturate(200%);

0% mnimální sytost, 100% původní sytost, 200% maximální sytost

Efekt staré fotografie

  -webkit-filter: sepia(100%);
  -moz-filter: sepia(100%);
  -ms-filter: sepia(100%);
  -o-filter: sepia(100%);
  filter: sepia(100%);

0% původní vzhled, 100% maximální intenzita efektu

<< zpět