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

22.12.2010 - PaedDr. Petr Pexa Počet zobrazení: 794  

Rozebrání nových vlastností v moderních prohlížečích, kterými jsou rotate a efekt gradientu.

Efekt rotace - vlastnost transform s hodnotou rotate

Tato nová vlastnost pro otočení libovolného boxu na webové stránce zatím standardně podporována není žádným prohlížečem, je ale možné použít jako u předchozích vlastností tzv. vendor prefixy. V Exploreru lze obdobný efekt řešit filtrem DXImageTransform (viz dále), pro obrázky funguje rotace stejně jako pro libovolný box.

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; transform: rotate(-90deg);">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-transform, v Safari a Google Chrome (prohlížečích s renderovacím jádrem Webkit) vlastnost -webkit-transform a v Opeře vlastnost -o-transform.

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; -moz-transform: rotate(-90deg);">obsah boxu< /div>

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; -webkit-transform: rotate(-90deg);">obsah boxu< /div>

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; -o-transform: rotate(-90deg);">obsah boxu< /div>

• Ukázka

Rotace boxu pro Explorer

V Exploreru lze obdobný efekt řešit filtrem DXImageTransform.

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)">obsah boxu< /div>

• Ukázka

Pokud tedy chceme mít box otočený 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:200px;
  height:200px;
       border: 1px solid blue;
       padding: 10px;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage
  (rotation=3);
  transform: rotate(-90deg)
      }
< /style>

• Ukázka

Pro obrázky funguje rotace stejně jako pro libovolný box.

< style type="text/css">
  img {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage
  (rotation=3);
  transform: rotate(-90deg)
 	 }
< /style>

• Ukázka

Efekt gradientu

Dalším užitečným efektem může být použití tzv. gradientu, tedy přechodového vybarvení pozadí libovolného boxu, které bylo nutné v minulosti řešit pomocí obrázku. V CSS3 je možné použít u vlastnosti background novou hodnotu gradient, která ale zatím nefunguje v žádném prohlížeči ve standardní deklaraci. Firefox minim. 3.6 ale podporuje vendor prefix
-moz-linear-gradient a Google Chrome a Safari 4 hodnotu -webkit-gradient.

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; background: -moz-linear-gradient(top, blue, white);">obsah boxu< /div>

< div style="width:200px; height:200px; border: 1px solid black; padding: 10px; background: -webkit-gradient(linear, left top, left bottom, from(blue), to(white);">obsah boxu< /div>

• Ukázka