Text-shadow

CSS vlastnost text-shadow nastavuje stín textu. Je relativně málo používaná, protože bude v Internet exploreru podporována až od verze 10.

text-shadow
hodnoty parametry stínu
posunX posunY rozmazání barva stín zdubluje svůj text, posune se o dané souřadnice, rozmaže se o zadanou šířku a bude mít zadanou barvu
posunX posunY barva třetí hodnota je nepovinná, je to pak totéž jako kdyby se rozmazání (třetí hodnota) zadalo 0px
posunX posunY rozmazání barva, posunX2 posunY2 rozmazání2 barva2 text bude mít více stínů oddělených v zápisu čárkou

Příklad:

text-shadow: 1px 2px 3px #808080;

vytvoří stín posunutý o 1 pixel doprava, 2 pixely dolů. Rozmazání stínu bude 3 pixely a barva stínu bude šedivá (#808080). 

Osobně doporučji stín textu moc nepoužívat, a když, tak snad pouze v nadpisech. Pak je docela hezké výše uvedené nastavení, nebo méně posunutý stín, případně s menším rozmazáním, tedy např.:

<style>
h2 {text-shadow: 0.5px 0.5px 1px gray;}
</style>

Obecně lze říci, že stíny jinou barvou než šedou (nebo světlejším odstínem vlastní barvy písma) jsou opičárna. Potřebujete-li mít stín na rozdíl od písma průhledný, zadejte jej rgba() barvou.

Vlastnost text-shadow doporučuji používat uvážlivě, protože může být náročná na výkon prohlížeče nebo celého zařízení uživatele. Může například zpomalovat načítání stránek nebo způsobovat trhání při rolování.

Podpora

Funguje všude kromě Internet Exploreru 9 a starších. To je naneštěstí dosti zásadní nepodpora. Text-shadow je slibován až do Exploreru verze 10.

Podpora vlastnosti
Prohlížeč Podpora Poznámka
Internet Explorer od verze IE 10 údajně má čtvrtou délkovou jednotku pro rozmazání (spread)
Mozilla (Firefox) ano  
Chrome, Opera ano  

Příklady

Příklad vlastnosti text-shadow

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.