Testování podpory filtrů a vlastnosti opacity
(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)
- Všechny filtry fungují jen v Exploreru a pouze na blokové prvky.
- Grafika s alfa průhledností, nastavená filtrem alpha.
Parametry: finishopacity, opacity (nastavují úroveň průhlednosti
hodnotami 0-100) a style (typ přechodu).
Hodnoty parametru style: 0 (jednotný přechod), 1 (lineární přechod), 2 (radiální přechod) a 3 (obdélníkový přechod).
První parametr finishopacity ale nefunguje ani v Exploreru se style=0 pro jednotný přechod (pouze s hodnotami 1-3), lepší je
tedy používat parametr opacity, který lze pro Firefox, Safari a Operu 9 (pro Operu 7 a 8 nikoliv) nahradit obdobnou
vlastností opacity (ta totiž nemá žádný parametr na typ přechodu
a implicitně je přechod jednotný vždy). Prostřední obrázek má tedy v Exploreru stejný efekt průhlednosti jako
pravý obrázek ve Firefoxu, Safari a Opeře 9.
<img style="filter:alpha(finishopacity=5, style=2)" src="grafika.gif" alt="Grafika s alfa filtrem finishopacity pro Explorer" />
<img style="filter:alpha(opacity=40, style=0)" src="grafika.gif" alt="Grafika s alfa filtrem opacity pro Explorer" />
<img style="opacity: 0.4" src="grafika.gif" alt="Grafika s opacity pro Firefox a Operu" />
- Spojíme-li tedy obě vlastnosti ve 2. a 3. příkladu 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 alfa filtrem opacity pro všechny prohlížeče" />
- Pomocí těchto vlastností můžeme 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
(viz
tento příklad). 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>
<div style="width:400px; height:50px; filter:alpha(finishopacity=2,style=1)">
<h1>průhlednost u textu pro Explorer</h1>
</div>
průhlednost u textu
<div style="width:400px; height:50px; filter:alpha(opacity=40,style=0)">
<h1>průhlednost u textu pro Explorer</h1>
</div>
průhlednost u textu
<div style="width:400px; height:50px; opacity: 0.4">
<h1>průhlednost u textu pro Firefox a Operu</h1>
</div>
průhlednost u textu
<div style="width:400px; height:50px; filter:alpha(opacity=40,style=0); opacity: 0.4">
<h1>průhlednost u textu pro všechny prohlížeče</h1>
</div>
průhlednost u textu
-
Filtr shadow (efekt stínu): v <div> trochu zlobí, obrázek se stínem má oříznutý horní okraj,
v buňce tabulky je stín OK (v obou případech je nastavena velikost bloku o 30px větší než je velikost obrázku).
U textu je stín zobrazen dobře, vše je ale funkční jen v Exploreru. V CSS2 je sice pro efekt stínu deklarována vlastnost
text-shadow, v běžných prohlížečích v minulosti většinou nefungovala, podporoval jí pouze applovský prohlížeč Safari.
Nedávno jsem ale s potěšením zjistil, že poslední verze Opery 9.5x, Firefoxu 3.5 a Google Chrome již tento efekt
podporují také (viz
tento příklad), takže je konečně možné vytvořit obdobný efekt stínu pro všechny nejznámější prohlížeče.
<div style="filter:shadow(color=#339933, direction=45); width:220px; height:220px">
<img src="grafika.gif" alt="Grafika s filtrem shadow" />
</div>
<div style="filter:shadow(color=#880000, direction=45); width:400px; height:50px">
<h1>stínovaný text</h1>
</div>
stínovaný text
<table>
<tr>
<td style="filter:shadow(color=#339933, direction=45); width:220px; height:220px">
<img src="grafika.gif" alt="Grafika s filtrem shadow" />
</td>
</tr>
</table>
<table>
<tr>
<td style="filter:shadow(color=#880000, direction=45)">
<h1>stínovaný text</h1>
</td>
</tr>
</table>
pepe © 2006