O webu
CSS filter

Na filteru je hodně zajímavá skutečnost, že ho různě implementují Internet Explorery už od prastaré verse 4 do IE 9 a současné prohlížeče.

S původní vlastností přišel Internet Explorer. Ukázky těchto filtrů (funkční do IE 8) jsou hezky popsány na JPW. Nové filtry ale fungují úplně jinak.

Podpora

Nová podoba filtrů funguje s prefixy od Chrome 18 a Opery 17. Od Firefoxu 35 již bez prefixů, Firefox 34 a starší podporuje pouze připojení SVG filtru přes url. V IE podpora chybí.

Seznam filtrů

V podporovaném prohlížeči Chrome a nové Opeře je možné efekty testovat přímo na této stránce (na elementu <body>). Pro potřeby ukázek se filtry neslučují.

blur()

Vytvoří efekt rozmazání. Více o rozmazávání je v samostatném článku Filtr blur.

element {
  filter: blur(2px);
}

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

Rozmazat:

brightness()

Umožňuje ztmavit a nebo naopak projasnit element. Dá se elegantně využít pro universální :hover efekty.

.ztmavit {
  filter: brightness(90%);
}
.zesvetlit {
  filter: brightness(110%);
}
  • 0% – Minimální hodnota, element je černý.
  • 100% – Střední hodnota, element je stejný jako bez filtru.
  • 200% – Maximální hodnota, element je bílý.

Světlost:

contrast()
.nizsi-kontrast {
  filter: contrast(90%);
}
.vyssi-kontrast {
  filter: contrast(110%);
}

Hodnota se zadává v procentech. Postup je stejný jako u brightness.

Kontrast:

drop-shadow()

Element bude mít stín.

.stin {
  filter: drop-shadow(10px 10px 10px red);
}

Nastavování stínu je stejné jako u vlastnosti box-shadow:

  1. První hodnota je vodorovná vzdálenost od objektu, kde se stín umístí. Kladné hodnoty vytvářejí stín vpravo, záporné vlevo.
  2. Druhá hodnota je totéž svisle. Kladná hodnota vytvoří stín pod elementem, záporná nad.
  3. Třetí hodnota je intensita stínu.
  4. Poslední hodnota je barva stínu.
grayscale()

Hodí se k vytváření černobílých elementů. V samostatném článku jsou další možnosti černobílého efektu.

.cernobily {
  filter: grayscale(100%);
}

Hodnota 100% vytvoří element 100% černobílý, nula by způsobila, že bude vypadat jako bez filtru.

Černobílý:

hue-rotate()

Dokáže otočit barvy. Co to znamená? Všechny barvy elementu/obrázku se přesunou do jiného spektra. Můžeme tak snadno přebarvit celý web.

.otocene-barvy {
  filter: hue-rotate(90deg);
}

Hodnota se zadává jako úhel, tj. 0deg360deg.

Otočit barvy:

invert()

Invertuje barvy.

.negativ {
  filter: invert(100%);
}

Nižší hodnoty než maximální stovka (100%) způsobí dle očekávání jen částečný efekt.

Invertovat barvy:

opacity()

Vytváří průhlednost. To umí i samotná opacity. Výhoda filtru opacity před vlastností by mohla být HW akcelerace v některých prohlížečích.

  • 0% – element je úplně průhledný
  • 100% – element vypadá jako bez filtru

Průhlednost:

saturate()
.hodne-syty {
  -webkit-filter: saturate(200%);
}

Ovlivňuje sytost barev.

  • 0% – minimální sytost
  • 100% – původní podoba
  • 200% – maximální sytost

Sytost:

sepia()

Umožní vytvořit efekt staré fotografie.

.stara-fotografie {
  filter: sepia(100%);
}
  • 0% – původní podoba
  • 100% – maximální intensita efektu

Stará fotografie:

url()

Použití url je zvláštní druh filtru, který umožňuje aplikovat na element filtr z SVG.

Zápis jednotek

Při zadávání filtrů si je možné povšimnout, že se používají:

  • Délkové jednotky (px apod.).
  • Stupně (deg).
  • Procenta.

A právě místo procent se mohou psát i čísla od 0 do 2.

  • 0 = 0%
  • 0.5 = .5 = 50%
  • 1 = 100%
  • 1.5 = 1.5 = 150%
  • 2 = 200%

Odkazy