Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

box-shadow - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti box-shadow nastavujeme stín pod HTML elementem.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Syntaxe CSS 3 vlastnosti box-shadow je následující:

box-shadow: x y rozostření velikost barva vnitřní;

Složky stínu mají následující význam:

  • x - Vodorovná pozice stínu.
  • y - Svislá pozice stínu.
  • rozostření - Nepovinný parametr určující rozostření.
  • velikost - Nepovinný parametr určující velikost.
  • barva - Barva stínu.
  • vnitřní - Nepovinný parametr, který umožňuje změnit směr stínu z vnějšího na vnitřní. Pokud jako hodnotu uvedeme inner, bude stín uvnitř elementu místo pod ním.

Ukázka stínu

<!DOCTYPE html>
<html>
        <head>
                <style>
                #kontejner
                {
                        border: 1px solid blue;
                        box-shadow: 10px 10px 5px gray;
                        width: 300px;
                        height: 100px;
                }
        </style>
        </head>
        <body>
                <div id="kontejner">

                </div>
        </body>
</html>

Výsledek:

Ukázka stínu elementu přes CSS

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Avatar
KlimiCZ
Člen
Avatar
KlimiCZ:15.4.2014 11:52

jde udělat aby ten shadow byl všude myslám nahoře,dole,vpravo a vlevo ?

Odpovědět
15.4.2014 11:52
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Avatar
Odpovídá na KlimiCZ
Matěj Kripner:26.4.2014 12:49

Nastav posun na x i y na 0px.

 
Odpovědět
26.4.2014 12:49
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Aci Acino
Člen
Avatar
Aci Acino:29.1.2016 15:39

"vnitřní" parametr není jako hodnota inner ale inset

box-shadow: 10px 10px 5px gray inset;
 
Odpovědět
29.1.2016 15:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.