CSS filter
CSS
,
CSS vlastnosti
Jak vytvářet grafické filtry obrázků i jiných prvků na stránce.
Na filter
u 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
:
- První hodnota je vodorovná vzdálenost od objektu, kde se stín umístí. Kladné hodnoty vytvářejí stín vpravo, záporné vlevo.
- Druhá hodnota je totéž svisle. Kladná hodnota vytvoří stín pod elementem, záporná nad.
- Třetí hodnota je intensita stínu.
- 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. 0deg
až 360deg
.
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