Box-shadow

Pro vytvoření stínu kolem textu slouží CSS vlastnost text-shadow.

Podpora

Dobře podporovaná vlastnost napříč všemi běžnými prohlížeči.

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.

Tuto hodnotu jde uvést i jako poslední. V některých prohlížečích funguje i kdekoliv jinde mezi umístěním a barvou, ale minimálně Edge nebo Safari si s tím neporadí.

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.

Vícenásobné stíny

Pro jeden element je možné zadat více stínů. Stačí je oddělit čárkami.

element {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 
              0 2px 2px rgba(0, 0, 0, .1), 
              0 4px 4px rgba(0, 0, 0, .1), 
              0 8px 8px rgba(0, 0, 0, .1);
}

Je poměrně běžné tímto způsobem docílit hezčích/plynulejších stínů:

Obyčejný jeden stín

Hezčí vícenásobný stín

Více třeba v samostatném článku:

Historie

CSS stíny fungují od IE 9. Ve starších Internet Explorerech šlo stín vytvořit přes starou CSS vlastnost filter. Pro starší Webkit, Firefox nebo Operu se používala vlastnost s 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.

Odkazy

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře