Testování podpory filtrů a vlastnosti opacity

• 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>
  
  

  stínovaný text




pepe © 2006     

---