Filter
Nestandardní CSS vlastnost filter určuje grafické efekty s prvkem. Funguje pouze v Internet Exploreru.
| hodnoty | grafická změna obrázku nebo html prvku |
|---|---|
| mnoho různých hodnot | nejrůznější změny grafiky, stínu, barev |
| none | prvek se nebude filtrovat |
Prvek lze například zprůhlednit, přidat mu stín, rozmazat, rozvlnit. Funguje pouze v Exploreru, nejde o standardní CSS vlastnost, praktické použití je sporné.
Při zápisu více filtrů se napíše více hodnot za sebou oddělené mezerou. Například otočení o 180°:
filter: fliph() flipv();
Jinak řečeno překlopím to horizontálně a pak vertikálně.
Při míchání složitějších filtrů ale záleží na pořadí, filtry se aplikují od prvního. Příklad míchání filtrů.
Podpora
Internet Explorer od verze 4.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | 4, 5, 5.5, 6, 7, 8 | od verze 4 fungují základní filtry, od verze5.5 existuje spousta dalších |
| Firefox | ne | viz opacity |
| Opera | ne | |
| Chrome | ne | |
| IE 5 / Mac | nevím | asi ne |
Podrobnější popis téhle libůstky Internet Exploreru najdete na stránce grafické CSS filtry v Internet Exploreru.
Zrušení průhlednosti zanořeného elementu
Když něčemu nastavíte filter: alpha(opacity=50); bude to poloprůhledné. Všechno. I zanořené elementy. Samozřejmě pouze v Exploreru.
Jestliže zanořené elementy chcete mít opět zcela neprůhledné, dejte jim position: relative;. Zápis position: relative zruší aplikaci filtrů. Naneštěstí nic takového nefunguje u vlastnosti opacity.
Příklady
Poloprůhledné PNG v Exploreru
Poznámka: následující šaškování potřebujete jenom tehdy, pokud se rozhodnete ještě brát vážně Internet Explorer ve verzi 6. Verze 7 již poloprůhlednost v PNG podporována normálně. Takže pro ten Explorer 6 je to takhle:
<img src="ten_samy_obrazek.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='ten_samy_obrazek.png'); _width:1px; _height:1; " width="150" height="150">
V Internet Exploreru 6 není podporován alfa kanál grafického formátu PNG. Přidáním tohoto šíleného filtru se začne obrázek chovat poloprůhledně (v jiných prohlížečích je poloprůhledný automaticky). Dejte si pozor na nastavení rozměrů, ilustruji to v příkladu. Pokud nastavíte pouze skutečné rozměry obrázku, Explorer to nezprůhlední. Teprve pokud srazíte obrázek podtržítkovým hackem do tečky 1x1px, Explorer obrázek smrskne na tečku (šedivá v horním rohu, nejde zrušit), ale zbytek obrázku vykreslí průhledně a vůči okolí se obrázek chová, jako by měl skutečné rozměry 150x150.t
Poloprůhledné pozadí takto udělat nejde, pokud vím. Jenom pozicováním. Když se ten filtr přilepí třeba na div (musí mít také fejkové rozměry 1x1), tak to sice funguje, ale pak uvnitř té oblasti nefungují odkazy. Debilní explorer.
Další příklady
Příklad CSS vlastnosti opacity (částečná průhlednost)
Míchání filtrů pro Internet Explorer
Simulace hodnoty tb-lr ve writing mode.
Reklama
