Filter

Nestandardní CSS vlastnost filter určuje grafické efekty s prvkem. Funguje pouze v Internet Exploreru.

filter
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.

Podpora vlastnosti filter
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)

Příklady filtrů

Míchání filtrů pro Internet Explorer

Simulace hodnoty tb-lr ve writing mode.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.