Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

 

 

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
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  ±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:26.4.2014 12:49

Nastav posun na x i y na 0px.

Odpovědět 26.4.2014 12:49
To understand what recursion is, you must first understand recursion.
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.