O webu
Box-shadow

Přes box-shadow je velmi jednoduché čistě v CSS vytvořit stín kolem elementu.

Podpora

CSS stíny fungují dobře napříč prohlížeči od IE 9. Ve starších Internet Explorerech je možné stín vytvořit přes starý filter. Pro Webkit, Firefox nebo starou Operu 12 už není ani potřeba používat CSS prefixy.

Když box-shadow ještě moc nefungoval, řešily se stíny buď obrázky, nebo mnoha obalovými elementy, které měly například 1px rámečky, což stín simulovalo.

Zápis

element {
  box-shadow: 10px 5px 5px red;
}
Vnitřní stín

Jako první hodnotu je ještě možné , což vytvoří stín uvnitř elementu.

Umístění

V ukázce výše první dvě hodnoty udávají umístění stínu.

  • První hodnota je horisontální (vodorovná). Čím větší hodnota bude nastavená, tím vpravo bude stín větší. Přehodit stín doleva je možné zadáním záporné hodnoty. -100  100

  • Druhá hodnota je vertikální (svislá). Nastavuje velikost stínu dole. Nebo nahoře při zadání záporné hodnoty. -100  100

Rozmazání

Další hodnota určuje, jak moc bude stín rozmazaný. Při nulové hodnotě tedy bude vypadat jako obyčejný rámeček. 100

Velikost

Dokáže roztáhnout stín všemi směry. 100

Barva

Poslední hodnota je barva stínu.

Pokročilé

Průhledný stín

Barvu stínu je možná zadávat přes rgba(), to může vytvořit poloprůhledný stín.

Kulaté rohy

Vlastnost box-shadow ctí i border-radius. Kolem kulatého rohu proto bude kulatý stín.

Odkazy

  • Shine.js – dynamické generování stínů v JavaScriptu.