Stín bloku (vlastnost box-shadow)

Různé prohlížeče se řídí každý svou syntaxí:

Google Crome a Safari
```
-webkit-box-shadow: 5px 5px 5px #ABC;
```

Internet Explorer

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

V Opeře a Firefox
```
box-shadow: 5px 5px 5px #ABC;
```

.ten {
-webkit-box-shadow: 5px 5px 5px #40310a; 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#40310a,direction=125,strength=5)";
box-shadow: 5px 5px 5px #40310a;
}

<div class="ten">...</div>

Filtr IE budu vynechávat.

box-shadow: posun_vpravo posun_dolů rozostření roztažení  barva inset;

Posun doprava a dolů
box-shadow: 15px 10px #40310a;

Posun doprava a nahoru
box-shadow: 15px -10px #40310a;

Posun doleva a nahoru
box-shadow: -15px -10px #40310a;

Rozostření 5px
box-shadow: 0 0 5px #40310a;

Rozostření 20px
box-shadow: 0 0 20px #40310a;

Rozostření 50px
box-shadow: 0 0 50px #40310a;

Roztažení 1px
box-shadow: 0 0 0 1px #40310a;

Roztažení 5px
box-shadow: 0 0 0 5px #40310a;

Roztažení 10px
box-shadow: 0 0 0 10px #40310a;

Kombinace
box-shadow: 2px 5px 5px 3px #40310a;

Stín uvnitř bloku
box-shadow: 0px 0px 20px #40310a inset;

Můžete zadat více parametrů oddělených čárkami.

box-shadow: 5px 5px 5px #40310a, -5px -5px 5px #40310a;

box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Dva příklady tlačítek:

tlačítko CSS

<style type="text/css">
.box1 {
background: #404040;
border-radius: 15px;
box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
-webkit-box-shadow: inset rgba(255,255,255,0.2) 8px 8px 18px 5px,
inset rgba(0,0,0,0.5) -8px -8px 18px 5px;
font-size: 20px;
text-align: center;
color: #fff;
text-indent: 0px;
padding: 20px 40px;}
</style>

<span class="box1">tlačítko CSS</span>

jak se dělá stín

<style type="text/css">
.box2 {
background: #804020;
border: 1px solid #ffffff;
border-radius: 40px;
box-shadow:
/* linie uvnitř */
inset #804020 0 0 0 3px,
inset #ffffff 0 0 0 4px,
inset #804020 0 0 0 7px,
inset #ffffff 0 0 0 8px,
/* linie z vnějšku */
#804020 0 0 0 3px,
#ffffff 0 0 0 4px,
#804020 0 0 0 7px,
#ffffff 0 0 0 8px,
#804020 0 0 0 15px;
-webkit-box-shadow:
inset #804020 0 0 0 3px,
inset #ffffff 0 0 0 4px,
inset #804020 0 0 0 7px,
inset #ffffff 0 0 0 8px,
#804020 0 0 0 3px,
#ffffff 0 0 0 4px,
#804020 0 0 0 7px,
#ffffff 0 0 0 8px,
#804020 0 0 0 15px;
font-size: 20px;
text-align: center;
color: #fff;
text-indent: 0px;
padding: 20px 40px;}
</style>

<span class="box1">jak se dělá stín</span>

Varianta kostky:

<style type="text/css">

ul.peri-boxes { margin: 0 auto; margin-top: 100px; }

ul.peri-boxes li{ float: left; width: 100px; height: 52px; margin: 0px; list-style: none; }

ul.peri-boxes li a{ float: left; width: 100px; height: 37px; font-size: 16px; text-decoration: none;}

ul.peri-boxes li a.box { 
 background-color: #1b2a34; 
 color: #fff; 
 font-weight: bold; 
 text-align: center; 
 vertical-align: middle; 
 padding-top: 15px; 
 cursor: pointer; 
 left:0px; 
 top:0px; 
 position: relative;
 -webkit-box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
 box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000, 7px 7px #000, 8px 8px #000;
 -webkit-transition: all 0.12s ease-out;
 -moz-transition: all 0.12s ease-out;
 -o-transition: all 0.12s ease-out;
 -webkit-border-radius: 0px;
 text-shadow: 0 -1px #000;
 border: 1px solid #000;
}
 
ul.peri-boxes li a.box:hover { 
 left:-23px;
 top:-23px; 
 width: 100px; 
 height: 47px;
 z-index: 1;
 font-size: 1.5em;
 -webkit-animation-name: boxPulse;
 -webkit-animation-duration: .7s; 
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-delay: .12s; 
}
 </style>

<ul class="peri-boxes">
<li><a href="" class="box">najeďte</a></li>
<li><a href="" class="box">na</a></li>
<li><a href="" class="box">každou</a></li>
<li><a href="" class="box">kostku</a></li>
</ul>

Ještě zajímavé řešení.

Lifted corners

<style type="text/css">

.container {
 position:relative;           
 z-index:1;
}        
    
.drop-shadow {
 position:relative;
 float:left;
 width:40%;    
 padding:1em; 
 margin:2em 10px 4em; 
 background:#fff;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before, .drop-shadow:after {
 content:"";
 position:absolute; 
 z-index:-2;
}
    
.drop-shadow p {
 font-size:16px;
 font-weight:bold;
}

.lifted {border-radius:4px;}
    
.lifted:before,  .lifted:after { 
 bottom:15px;
 left:10px;
 width:50%;
 height:20%;
 max-width:300px;
 -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
 box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform:rotate(-3deg);    
 -moz-transform:rotate(-3deg);   
 -ms-transform:rotate(-3deg);   
 -o-transform:rotate(-3deg);
 transform:rotate(-3deg);
}
    
.lifted:after {
right:10px; 
left:auto;
-webkit-transform:rotate(3deg);   
-moz-transform:rotate(3deg);  
-ms-transform:rotate(3deg);  
-o-transform:rotate(3deg);
transform:rotate(3deg);
}     
</style>
<div class="container"><div class="drop-shadow lifted">
      <p>Lifted corners</p>
</div></div>

To tučné se bude opakovat pokaždé, takže tato část kódu bude vynechána. Ale Vy ovšem přidejte jej.

Curled corners

<style type="text/css">

.curled {
 border:1px solid #efefef; 
 border-radius:0 0 120px 120px / 0 0 6px 6px;
}
   
.curled:before, .curled:after {
 bottom:12px;
 left:10px;
 width:50%;
 height:55%;
 max-width:200px;
 -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
 box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); 
 -webkit-transform:skew(-8deg) rotate(-3deg);
 -moz-transform:skew(-8deg) rotate(-3deg);
 -ms-transform:skew(-8deg) rotate(-3deg);
 -o-transform:skew(-8deg) rotate(-3deg);
 transform:skew(-8deg) rotate(-3deg);
} 
   
.curled:after { 
 right:10px; 
 left:auto;
 -webkit-transform:skew(8deg) rotate(3deg); 
 -moz-transform:skew(8deg) rotate(3deg);     
 -ms-transform:skew(8deg) rotate(3deg);     
 -o-transform:skew(8deg) rotate(3deg); 
 transform:skew(8deg) rotate(3deg);
}
</style>
<div class="container"><div class="drop-shadow curled">
      <p>curled corners</p>
</div></div>

Vertical curves

<style type="text/css">

.curved:before {
 top:10px;
 bottom:10px;
 left:0;
 right:50%;
 -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
 box-shadow:0 0 15px rgba(0,0,0,0.6);
 border-radius:10px / 100px;
}

.curved-vt-2:before {right:0;}
</style>
<div class="container"><div class="drop-shadow curved curved-vt-2">
      <p>Vertical corners</p>
</div></div>

Horizontal curves

Místo

.curved-vt-2:before {right:0;}

napište ve výše uvedeném kódu

.curved-vt-2:before {
  top:0;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
}

Single horizontal curve

Obdobně namísto

.curved-vt-2:before {right:0;}

ukážte

.curved-vt-2:before {
  top:50%;
  bottom:0;
  left:10px;
  right:10px;
  border-radius:100px / 10px;
}

Perspective corners

<style type="text/css">

.perspective:before {
 left:80px;
 bottom:5px;
 width:50%;
 height:35%;
 max-width:200px;
 -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
 box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
 -webkit-transform:skew(50deg);
 -moz-transform:skew(50deg);
 -ms-transform:skew(50deg);
 -o-transform:skew(50deg);
 transform:skew(50deg);
 -webkit-transform-origin:0 100%;
 -moz-transform-origin:0 100%;
 -ms-transform-origin:0 100%;
 -o-transform-origin:0 100%;
 transform-origin:0 100%;
}
    
.perspective:after {display:none;}
</style>
<div class="container"><div class="drop-shadow perspective">
      <p>perspective corners</p>
</div></div>

Stínovaní blokových prvků pomocí CSS vlastnosti box-shadow