Internet Explorer od verze 4 umφ urΦit²m zp∙sobem zm∞nit vzhled obrßzku. ╪φkß se tomu filtry. M∙╛ete se podφvat na strßnku s p°φklady.
Zßpis filtr∙ - K Φemu to je - Podpora - P°ehled filtr∙
Filtry se podle mojφ zku╣enosti dajφ aplikovat pouze na obrßzky a rozm∞rovanΘ elementy (nejlΘpe element DIV s udanou v²╣kou, nebo ╣φ°kou).
Filtry pat°φ do CSS styl∙, proto se tak i zapisujφ. Nap°φklad p°evedenφ obrßzku na Φernobφl² se zapφ╣e takto:
<img src="obrßzek.gif" style="filter: XRay"> .
Pokud mß filter n∞jakΘ parametry, zapisujφ se za n∞j do zßvorky odd∞lenΘ Φßrkami tφmto zp∙sobem:
filter: jmΘno(parametr=hodnota, jin²_parametr=hodnota),
nap°φklad
div {filter: alpha(opacity=50, style=2); width: 50px}
zpr∙hlednφ obrßzek na polovinu a je╣t∞ ho zaoblφ (zaoblenφ je ta dvojka). Je nutnΘ uvΘst rozm∞r (nap°. width, aby se to v∙bec vykreslilo (pro Internet Explorer 6 nenφ nutno rozm∞ry zadßvat).
Je to jenom takovß legrßcka. Ale n∞kdy to m∙╛e u╣et°it p°enosovΘ kapacity a
zlep╣it design strßnek. Zajφmav² efekt lze docφlit u obrßzkov²ch odkaz∙ v
kombinaci s pseudot°φdou a:hover. (P°φklad mßm na strßnce
o odkazech.) HezkΘ jsou pr∙hlednΘ v∞ci, dajφ
se tφm takΘ skr²t okraje obrßzk∙.
Pozor! Filtry jsou trochu nßroΦnΘ na poΦφtaΦ klienta. Zobrazujφ se relativn∞ pomalu (na pomalej╣φch poΦφtaΦφch dokonce doslova dlouho; nemß to nic spoleΦnΘho s propustnostφ linek). (Je dobrΘ vßzat je na u╛ivatelskΘ skripty, aby nezdr╛ovaly p°i prvnφm naΦφtßnφ.) Na╣t∞stφ se na pomalej╣φch poΦφtaΦφch vyskytujφ v∞t╣inou star╣φ prohlφ╛eΦe, kterΘ filtry ignorujφ, tak╛e se s nimi nezdr╛ujφ.
Nenφ t°eba se nijak obßvat, ╛e by neznalost n∞jakΘho filtru d∞lala prohlφ╛eΦi potφ╛e, jako to t°eba d∞lajφ scripty. Nemßm rßd hlß╣ky typu "script nefunguje" apod., ale u filtr∙ to nastat nem∙╛e, prßv∞ proto╛e pat°φ do CSS.
N∞kterΘ filtry se vßm nezobrazφ u nepr∙hledn²ch obrßzk∙ (klasicky jpg). Je to proto, ╛e prohlφ╛eΦ nemß ╛ßdnΘ volnΘ nebo pr∙hlednΘ mφsto, kam by mohl efekty vykreslovat. T°eba stφn. Tam je lΘpe obrßzek uzav°φt do tabulky a filtr aplikovat na bu≥ku (tak to d∞lßm v p°φkladech).
Internet Explorer od 4. verze v²╣e. Verze prohlφ╛eΦe se v podpo°e filtr∙ mφrn∞ li╣φ, to se musφ zkou╣et. Ov╣em na n∞kter²ch instalacφch filtry ze zßhadn²ch d∙vod∙ nefungujφ v∙bec. Mozilla ani Netscape filtry rozhodn∞ nepodporujφ, nepat°φ to ani do standardu CSS.
Zjistil jsem, ╛e Intetrnet Explorer 5 d∞lß ve filtrech Φmouhy u objekt∙ ╣ir╣φch ne╛ 512 pixel∙. Pr∙hlednost se dß ud∞lat i v Mozille css vlastnostφ -moz-opacity: 50% (100% je nepr∙hlednost).
| Filtr | Popis | Parametry |
|---|---|---|
| Alpha | Mφra pr∙hlednosti objektu. Lze vytvß°et i transparentnφ p°echody
(gradienty). Vizte tΘ╛ pr∙hlednost pro Mozillu |
|
| Blur | Vytvo°φ efekt objektu pohybujφcφho se vysokou rychlostφ jeho rozmazßnφm v jednom sm∞ru. |
|
| Chroma | UrΦitou barvu objektu vykreslφ jako pr∙hlednou. |
|
| DropShadow | Filtr vytvo°φ k objektu stφn a tφm i zdßnliv² efekt, ╛e se objekt vznß╣φ nad strßnkou. |
|
| FlipH | Horizontßln∞ p°evrßtφ objekt. | |
| FlipV | Vertikßln∞ p°evrßtφ objekt. | |
| Glow | Vytvo°φ dojem, ╛e objekt svφtφ tφm, ╛e specifikovanou barvou obkreslφ okraje objektu. |
|
| Gray | V╣echny barvy v objektu p°evede na odstφny ╣edi. | |
| Invert | Provede inverzi hodnot jasu, sytosti a sv∞tlosti v objektu. | |
| Light | Simuluje efekt nasvφcenφ objektu sv∞teln²m zdrojem. | Sv∞telnΘ zdroje se p°idßvajφ pomocφ metod, nelze je nastavit jako parametry. |
| Mask | Vytvo°φ z objektu transparentnφ masku. |
|
| Shadow | Vytvo°φ k objektu jeho stφn. |
|
| Wave | Zdeformuje objekt do tvaru svislΘ sinusoidy (jako lißna). |
|
| XRay | Nenφ mi p°esn∞ jasnΘ, co se s obrßzkem d∞je. Vypadß jakoby "zrentgenovan²". ObΦas se uvßdφ, ╛e xray() snφ╛φ barevnou hloubku obrßzku na dv∞ barvy, ale nenφ tomu tak. | |
Nav╣tivte strßnku s p°φklady!
Vizte tΘ╛: ·vod do CSS,
obrßzky na webu, zdokonalenφ odkaz∙
Odkaz mimo: NovΘ filtry
Microsoftu na Intervalu a mß to tam pokraΦovßnφ
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek