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.
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í.
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.
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říklad vlastnosti text-shadow
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.