Testování podpory vlastností box-shadow (-moz-box-shadow, -webkit-box-shadow)

• Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Již funguje všude kromě IE8. Firefox minim. 3.5 podporuje také "testovací" vlastnost -moz-box-shadow, Google Chrome a Safari vlastnost -webkit-box-shadow. První dvě hodnoty 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. Obě testovací vlastnosti dobře fungují i v kombinaci se zaoblenými rohy. V Exploreru 8 lze obdobný efekt řešit filtrem shadow, stínovaný box ale musí mít nastavené pozadí, jinak je stín také uvnitř boxu (i na jeho vnořených objektech, např. u textu, viz příklad dole), kulaté rohy ale Explorer 8 nepodporuje. Pro obrázky funguje stín stejně jako pro libovolný box.
  
  <div style="box-shadow: 10px 15px 10px gray"></div>
  <div style="box-shadow: 10px 15px 10px lightgreen; border-radius: 15px"></div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín boxu pro Firefox

  <div style="-moz-box-shadow: 10px 15px 10px gray"></div>
  <div style="-moz-box-shadow: 10px 15px 10px lightgreen; -moz-border-radius: 15px"></div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín boxu pro Safari a Chrome

  <div style="-webkit-box-shadow: 10px 15px 10px gray"></div>
  <div style="-webkit-box-shadow: 10px 15px 10px lightgreen; -webkit-border-radius: 15px"></div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín boxu pro Explorer 8 a nižší verze

  <div style="filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=gray)"></div>
  <div style="filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=gray); background-color:yellow;"></div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín boxu pro všechny testované prohlížeče (včetně Exploreru 8 a nižších)

  .stin
  { width:300px;
    border: 1px solid blue;
    padding: 10px;
    background-color:white;
    box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=gray)
  }
  
  <div class="stin"> </div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín kolem boxu bez posunutí (v Exploreru 8 nelze nastavit)

  .stin
  { width:300px;
    border: 1px solid blue;
    padding: 10px;
    background-color:white;
    box-shadow: 0px 0px 20px black;
    -moz-box-shadow: 0px 0px 20px black;
    -webkit-box-shadow: 0px 0px 20px black;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=black)
  }
  
  <div class="stin"> </div>
  
  
  Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow). Efekt stínu kolem libovolného boxu (CSS3 vlastnost box-shadow).....
  
  
  

  Stín u obrázku (stejná deklarace jako pro libovolný box)