Box-shadow, stíny pro váš web!
Funkce box-shadow je jedna z vychytávek specifikace CSS3, přesto ji klidně, podle mě, ale můžeme brát jako prvek, za který nemusíme hledat kompatibilní náhradu. V dnešní době ji už všechny prohlížeče které za něco stojí umí. No a stále brát ohled na ty, co si jej nejsou schopni zaktualizovat asi smysl nemá. To bychom moc daleko nedošli.
Tabulka kompatibility
| Internet Explorer | 9+ |
| Firefox | Od nepaměti |
| Chrome | Od nepaměti |
| Safari | 5.1.1. |
| Opera | Od nepaměti |
Názorná ukázka
Syntaxe
box-shadow: vodorovný-stín vertikální-stín rozmazání barva (inset);
inset – přepneme jím z vnějšího stínu na vnitřní
Názorný obrázek převeden do HTML a CSS ukázky
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body { width: 500px; }
div { margin: 20px; height: 200px; width: 200px; float: left; }
#dolni_stin { box-shadow: 0 10px 10px #F00; }
#bocni_stin { box-shadow: 10px 0 10px #0F0; }
#vsechny_strany { box-shadow: 0 0 50px #00F; }
#vnitrni_stin { box-shadow: 0 0 50px #F0F inset; }
</style>
</head>
<body>
<div id="vsechny_strany"></div>
<div id="vnitrni_stin"></div>
<div id="dolni_stin"></div>
<div id="bocni_stin"></div>
</div>
</body>
</html>
