(X)HTML a CSS v moderních prohlížečích XII

15.11.2010 - PaedDr. Petr Pexa Počet zobrazení: 804  

Nový článek podává zprávu o mnohých vlastnostech, které začaly být konečně podporovány většinou nových verzí aktuálně používaných prohlížečů, po otestování vlastnosti border-radius se v tomto článku budeme věnovat vlastnostem text-shadow a box-shadow.

Efekt stínu textu - vlastnost text-shadow

Na úvod tohoto článku se v krátkosti zmíníme o efektu stínu textu, vytvořeného vlastností text-shadow, která, ač byla deklarována již v jazyce CSS2, v běžných prohlížečích dlouhá léta většinou nefungovala, podporoval jí pouze applovský prohlížeč Safari. Poslední verze Opery, Firefoxu a prohlížeče Google Chrome již tento efekt konečně podporují také.

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

• Ukázka

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

< h2 style="filter:shadow(color=#007fff, direction=135, strength=4)">< /h2>

• Ukázka

Pokud tedy chceme mít stínovaný text ve všech běžných prohlížečích, je nutné použít např. následující deklaraci:

< style type="text/css">
  h2  {
       text-shadow:#007fff 5px 5px 5px;
       filter:shadow(color=#007fff, direction=135, strength=4)
 	 }
< /style>

• Ukázka

Efekt stínu boxu - vlastnost box-shadow

Tato nová vlastnost pro vytvoření libovolného stínovaného boxu na webové stránce již funguje v Opeře od verze 10.51, ostatními prohlížeči zatím standardně podporována není, je nutné použít jako u vlastnosti border-radius tzv. vendor prefixy. První dvě hodnoty v deklaraci představují horizontální a vertikální posunutí stínu, třetí udává poloměr rozostření, který ovlivňuje ostrost stínu, poslední hodnota udává barvu stínu.V Exploreru lze obdobný efekt řešit filtrem shadow (viz dále).

< div style="width:300px; border: 1px solid black; padding: 10px; box-shadow: 10px 15px 10px gray;">obsah boxu< /div>

• Ukázka

Ve Firefoxu (resp.v prohlížečích s renderovacím jádrem Gecko) funguje vendor prefix (resp. "testovací" vlastnost) -moz-box-shadow a v Safari a Google Chrome (prohlížečích s renderovacím jádrem Webkit) vlastnost -webkit- box-shadow.

< div style="width:300px; border: 1px solid black; padding: 10px; -moz-box-shadow: 10px 15px 10px gray;">obsah boxu< /div>
< div style="width:300px; border: 1px solid black; padding: 10px; -webkit-box-shadow: 10px 15px 10px gray;">obsah boxu< /div>

• Ukázka

Stín boxu pro Explorer

V Exploreru lze obdobný efekt řešit filtrem shadow, stínovaný box ale musí mít nastavené libovolné pozadí, jinak je stín také uvnitř boxu (i na jeho vnořených objektech, např. u textu - viz první box v ukázce č. 6, druhý je již zobrazen správně). V Exploreru je také vykreslení stínu poněkud odlišné od ostatních prohlížečů, stín na box navazuje, v ostatních prohlížečích je vykreslen za boxem.

< div style="width:300px; border: 1px solid black; padding: 10px; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=gray)">obsah boxu< /div>
< div style="width:300px; border: 1px solid black; padding: 10px; background-color:yellow; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=gray)">obsah boxu< /div>

• Ukázka

Pokud tedy chceme mít stínovaný box ve všech prohlížečích včetně Exploreru, je nutné použít např. následující deklaraci (vendor prefixy píšeme vždy před standardní deklaraci vlastnosti):

< style type="text/css">
  div {
  width:300px;
       border: 1px solid blue;
       padding: 10px;
  background-color:white;
  -moz-box-shadow: 10px 15px 10px gray;
  -webkit-box-shadow: 10px 15px 10px gray;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(Strength=10,
  Direction=135, Color=gray);
  box-shadow: 10px 15px 10px gray;
      }
< /style>

• Ukázka

Stínování funguje dobře i v kombinaci se zaoblenými rohy (viz minulý článek), Explorer 8 ale techniku kulatých rohů nepodporuje.

< style type="text/css">
  div {
  width:300px;
       border: 1px solid blue;
       padding: 10px;
  background-color:white;
  -moz-border-radius: 15px;
       -webkit-border-radius: 15px;
       border-radius: 15px;
  -moz-box-shadow: 10px 15px 10px gray;
  -webkit-box-shadow: 10px 15px 10px gray;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(Strength=10,
  Direction=135, Color=gray);
  box-shadow: 10px 15px 10px gray;
      }
< /style>

• Ukázka

Pro obrázky funguje stín stejně jako pro libovolný box, v Exploreru je ale vykreslení stínu poněkud odlišné.

< style type="text/css">
  img {
  -moz-box-shadow: 10px 15px 10px gray;
  -webkit-box-shadow: 10px 15px 10px gray;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(Strength=10, 
  Direction=135, Color=gray);
  box-shadow: 10px 15px 10px gray;
 	 }
< /style>

• Ukázka