Text-shadow

Podobně jako je tomu u celých boxů (více v článku o podobné vlastnosti box-shadow) existuje podobná vlastnost vytvářející stín i pro samotný text.

Funguje od IE 10. V IE 9 a starších jde stín vytvořit starou podobou vlastnosti filter (parametry jsou barva, směr ve stupních a síla).

.ie9-stin {
  filter: Shadow(Color=#252525, Direction=45, Strength=2);
}

Stín s použitím filtru ale vypadá méně hezky, jak je vidět na obrázku:

Srovnání stínů v IE 9 a IE 10

(O standardní podobě nové vlastnosti filter pojednává samostatný článek.)

Zápis

element {
  text-shadow: vodorovné svislé umístění rozmazání barva;
}

V Internet Exploreru 10+ funguje i čtvrtý parametr určující velikost stínu (podobně jako u box-shadow). Bohužel ale jeho použití rozbije zobrazení v ostatních prohlížečích.

Více stínů

Daný text může mít stínů více. Stačí jednotlivé stíny oddělit čárkou.

element {
  text-shadow: 
    10px -10px 15px red,
    10px 10px 15px green
}

(Ve Webkitech existuje i lehce podobná vlastnost text-stroke, která textu umí vytvořit obrys, právě tuto vlastnost jde do jisté míry vícenásobnými stíny simulovat – ukázka.)

Generátor

element {
  text-shadow: 10px 10px 5px red;
}
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 bude stín víc vpravo. Přehodit stín doleva je možné zadáním záporné hodnoty.

    -100  100

  • Druhá hodnota je vertikální (svislá). Nastavuje umístění stínu dolů. Nebo nahoru nad text 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 stín bude v podstatě kopie textu. Pozor, při nulovém umístění i nulovém rozmazání nebude stín vidět, schová se za text.

100

Barva

Poslední hodnota je barva stínu.

Využití

Použít stín se může hodit k vytvoření graficky atraktivnějšího nadpisu nebo třeba zlepšení čitelnosti písma, které není dostatečně kontrastní s pozadím. V případě, že je na pozadí vícebarevné pozadí se světlými i tmavými částmi a nelze zajistit přesné umístění textu, stín písma může čitelnost lehce zvýšit bez nutnosti upravovat původní pozadí.

Vyzkoušejte si menší zlepšení najetím/odjetím myši nad obrázkem.

Test čitelnosti

Asi nejlepších výsledků lze docílit při rozmazání okolo 10 px. Pro silnější efekt by se hodila zatím mimo IE 10 a IE 11 nepodporovaná intensita stínu nebo využít vícenásobného stínu (ukázka).

Naopak při dobře kontrastním jednobarevném pozadí stín písmo spíš rozmaže a čitelnost může utrpět.

Dědičnost

Stín textu svým způsobem dědí i vnořené elementy. Pokud ho nastavíme třeba pro element <body>, všechen text na stránce bude se stínem.

nebo stín celé této stránce.

Vytečení stínu

Nemá-li element overflow: hidden, může stín, který má nastaven text v tomto elementu, vytéci mimo obsah elementu.

Teoreticky tak jde text-shadow v podobě bez rozmazání použít k duplikování a posicování textu. Na následující ukázce je původní „Text 1“ pomocí stínu rozkopírován na tři různá místa.

Text 1

Tohoto kopírovacího triku je využito i u hover efektů s text-shadow.

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