XHTML a CSS v moderních prohlížečích IX

02.10.2009 - PaedDr. Petr Pexa Počet zobrazení: 1308  

V tomto dílu našeho seriálu se budeme věnovat problematice podpory tzv. filtrů a nových vlastností opacity a text-shadow, deklarovaných v jazyce CSS2.

Pomocí vhodné kombinace těchto technik lze dosáhnout na webové stránce poměrně zajímavých efektů stínu a průhlednosti libovolných grafických či textových objektů. Jak už jste si v našem seriálu zvykli, zaměřujeme se především na testování problematických prvků a v úvodu tohoto článku si tedy nejprve vysvětlíme, s jakými problémy se můžeme při použití filtrů a vlastností opacity a text-shadow setkat.

Filtry jsou technika, vytvořená firmou Microsoft a proto zatím bohužel funkční pouze v prohlížeči Explorer. Pomocí několika příkazů, uváděných jako parametr příkazu filter lze dosáhnout především u obrázků efektů, které je jinak nutné řešit grafickými editory, jako jsou např. částečná a úplná průhlednost, rozmazání, stín, horizontální a vertikální převrácení a několik dalších efektů. Syntaxe zápisu např. pro filtr průhlednosti (tzv. alfa kanál) je

< img src="http://www.voxcafe.cz/data/imgs/1405b.gif" alt="Grafika s průhledností pro Explorer" style="filter:alpha(opacity=40, style=0)" / >

Ukázka

Další ukázky všech existujících filtrů najdete např. na  http://www.jakpsatweb.cz/css/css-filtry-priklady.html.

Efekt průhlednosti

My se dále zaměříme pouze na efekt průhlednosti, protože ten je jako jediný možné řešit i v ostatních prohlížečích (Firefox, Opera, Safari, Google Chrome) novou vlastností opacity, která ale zase paradoxně nefunguje v Exploreru. Vhodnou kombinací obou zmíněných technik lze ale dosáhnout efektu průhlednosti ve všech prohlížečích naprosto shodného.

Syntaxe zápisu této vlastnosti je

< img src="http://www.voxcafe.cz/data/imgs/1405b.gif" alt="Grafika s průhledností pro Firefox, Operu, Safari a Chrome" style="opacity: 0.4" / >

Ukázka

Spojíme-li tedy obě techniky dohromady, je efekt průhlednosti ve všech testovaných prohlížečích zobrazen shodně.

< img style="filter:alpha(opacity=40, style=0); opacity:0.4" src="grafika.gif" alt="Grafika s průhledností pro všechny prohlížeče" / >

Ukázka

Obdobného efektu můžeme takto dosáhnout i pro textové prvky na webové stránce (např. nadpisy). V prohlížeči Explorer ale v tomto případě nefunguje nastavení filtru přímo pro nadpis (tedy např. element < h2 >), snadným řešením je vložit text do jiného blokového prvku (buňky tabulky nebo) a nastavit styl průhlednosti pro tento blokový prvek.

< div style="width:400px; height:50px; filter:alpha(opacity=40,style=0); opacity: 0.4" >
  < h2 >průhlednost u textu pro všechny prohlížeče< /h2 >
< /div >

Ukázka

Popsanými vlastnostmi můžeme také vytvořit zajímavý efekt např. u grafického menu pomocí pseudotřídy :hover, pokud je grafika současně hyperlinkem. Tento efekt se dříve musel řešit mnohem složitějším kódem pomocí dvou různých obrázků a jejich dynamickou záměnou pomocí DOM událostí onmouseover a onmouseout. Efekt funguje všude shodně, ale pouze v následující syntaxi s nastavením pseudotřídy :hover pro obrázek v hyperlinku.

< style type="text/css" >
 a:hover img {filter:alpha(opacity=40, style=0); opacity:0.4}
< /style >

< a href="#" >
 < img src="grafika.gif" alt="Grafika s hover efektem" / >
< /a >

Ukázka

Efekt stínu

Na závěr tohoto článku se ještě v krátkosti zmíníme o efektu stínu, vytvořeného další novou vlastností jazyka CSS2  text-shadow, která v běžných prohlížečích dlouhá léta většinou nefungovala, podporoval jí pouze applovský prohlížeč Safari. Jak jsme ale v nedávné době zjistili, poslední verze Opery 9.5x, Firefoxu 3.5 a prohlížeč Google Chrome již tento efekt podporují také!

< h2 style="text-shadow:#007fff 5px 5px 5px" >stín textu< /h2 >

Ukázka

V Exploreru, kde vlastnost text-shadow nefunguje, lze stín řešit filtrem shadow.

< table >
  < td style="filter: shadow(color=#880000, direction=145)" >
     < h2 >stín textu pro Explorer< /h2 >
  < /td >
< /table > 

Tento filtr ale funguje ideálně pouze tak, jak je naznačeno v ukázce zdrojového kódu, tedy text musí být umístěn v buňce tabulky. Pro text v elementu jako u efektu  průhlednosti funguje stín až ve verzi Explorer 8. Přímé nastavení filtru např. pro již sice v poslední verzi Exploreru funguje také, ale stín je ve spodní části poškozen oříznutím. Toto lze vyřešit nastavením vhodné výšky, přesto zobrazení stínu není úplně shodné jak u ostatních prohlížečů (kde je nutné stín řešit CSS vlastností text-shadow).   

< div style="filter: shadow(color=#880000, direction=145)" >
    < h2 >stín textu pro Explorer< /h2 >
< /div >

< h2 style="filter: shadow(color=#880000, direction=145)">stín textu pro Explorer< /h2 >

< h2 style="filter: shadow(color=#880000, direction=145) ; height:50px" >stín textu pro Explorer< /h2 >

Ukázka