Stín za objektem pomocí box-shadow

HTML: 

<div id="element">
<h2><center>Box-shadow</center></h2>
<ul>
    <li>První hodnota (10px) určuje <b>horizontální umístění zleva</b></li>
    <li>Druhá hodnota (13px) určuje <b>vertikální umístění shora</b></li>
    <li>Třetí hodnota (37px) určuje <b>sílu rozmazání efektu</b></li>
    <li>Čtvrtá hodnota (6px) určuje <b>velikost stínu všemi směry</b></li>
    <li>Pátá hodnota (#ff8000) určuje <b>barvu stínu</b></li>
</ul>
</div>

CSS:

#element {
  box-shadow: 10px 13px 37px 6px #ff8000;
}
 
#element {
    width: 450px;
    height: 100%;
}

Teď si rozebereme co se určuje v CSS v hodnotě box-shadow:

  • První hodnota (10px) určuje horizontální umístění zleva
  • Druhá hodnota (13px) určuje vertikální umístění shora
  • Třetí hodnota (37px) určuje sílu rozmazání efektu
  • Čtvrtá hodnota (6px) určuje velikost stínu všemi směry
  • Pátá hodnota (#ff8000) určuje barvu stínu

Živá ukázka

Zdrojový kód

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *