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

HTML a CSS Manuál Ostatní vlastnosti box-shadow - Český CSS 3 manuál

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

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

 

  Aktivity (1)

Manuál 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 College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

Komentáře

Avatar
KlimiCZ
Člen
Avatar
KlimiCZ:

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

Odpovědět  ±0 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
Matěj Kripner
Redaktor
Avatar
Odpovídá na KlimiCZ
Matěj Kripner:

Nastav posun na x i y na 0px.

Odpovědět 26.4.2014 12:49
"We reject kings, presidents and voting. We believe in rough consensus and running code" David Clark
Avatar
Aci Acino
Člen
Avatar
Aci Acino:

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

box-shadow: 10px 10px 5px gray inset;
 
Odpovědět 29. ledna 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.