box-shadow

Definice a použití

Box-shadow umožňuje přidat stín pod prvek a to buď vnitřní stín a nebo vnější.

Hodnoty vstupů	Popis
posunX posunY hloubka	stín bude posunut doprava a dolů o zadané posuny; umístěn jakoby "hloubku" pod prvkem
posunX posunY hloubka barva	stín bude posunut doprava a dolů o zadané posuny; umístěn jakoby "hloubku" pod prvkem s barvou na konci
inset	změní stín z vnějšího stínu na vnitřní stín
inherit	zdědí tuto vlastnost od jeho rodičovského elementu

Ukázka:

Čtverec široký 200px a vysoký 200px s černým vnějším stínem.

CSS

.shadow{
width: 200px;
height: 200px;
box-shadow: 3px 5px 16px black;
background: #0000ff;
}

Použité vlastnosti: width, height, box-shadow, background

HTML

<div class="shadow">
</div>

Použité tagy: <div>

Výsledek:

Ukázka:

Čtverec o rozměrech 200px s černým vnějším stínem bez rozmazání.

CSS

.shadow2 {
width: 200px;
height: 200px;
box-shadow: -5px -5px #000;
background: #0000ff;
}

Použité vlastnosti: width, height, box-shadow, background

HTML

<div class="shadow2">
</div>

Použité tagy: <div>

Výsledek:

Ukázka:

Čtverec o rozměrech 200px s rozmazaným vnějším černým stínem dokola.

CSS

.shadow3 {
box-shadow: 0 0 5px 5px #000;
width: 200px;
height: 200px;
background: #0000ff;
}

Použité vlastnosti: box-shadow, width, height, background

HTML

<div class="shadow3">
</div>

Použité tagy: <div>

Výsledek:

Ukázka:

Čtverec o rozměrech 200px s vnitřním černým stínem vpravo a dole.

CSS

.shadow4 {
box-shadow: inset -5px -5px 5px #000;
width: 200px;
height: 200px;
background: #0000ff;
}

Použité vlastnosti: box-shadow, width, height, background

HTML

<div class="shadow4">
</div>

Použité tagy: <div>

Výsledek:

Firefoxversion: 4

Internet Explorerversion: 9

Google Chromeversion: 10

Safariversion: 5

Operaversion: 10