Přednastavené efekty
Vrstvy stínu
CSS kód
Jak generátor text shadow použít
- Nastavte vodorovný a svislý offset. Určují, kam se stín od textu posune.
- Přidejte rozostření. Nula dá ostrý stín, vyšší hodnota měkký a rozplývavý.
- Zvolte barvu stínu. Živý náhled na textu se překreslí okamžitě.
- Chcete složitější efekt? Přidejte další vrstvu stínu a naskládejte jich několik na sebe.
- Zkopírujte vygenerovaný CSS kód a vložte ho do své stylopisu.
Jak funguje CSS vlastnost text-shadow
Vlastnost text-shadow přidává za písmena stín. Zapisuje se ve čtyřech hodnotách: vodorovný posun, svislý posun, rozostření a barva. Například text-shadow: 2px 2px 4px rgba(0,0,0,0.5) posune stín o 2 pixely doprava a dolů a rozostří ho o 4 pixely.
Kladný vodorovný offset posouvá stín doprava, záporný doleva. U svislého offsetu platí totéž pro směr dolů a nahoru. Na rozdíl od box-shadow nepodporuje stín textu hodnoty spread ani inset, takže pracujete jen s posunem, rozostřením a barvou.
Čitelnost textu na obrázcích a fotkách
Nejčastější praktické využití stínu textu je čitelnost. Bílý nadpis na světlé fotce zaniká, tmavý na tmavém pozadí taky. Jemný stín pod textem vytvoří kontrast a písmo zůstane čitelné, ať leží na jakémkoli pozadí.
Pro tenhle účel stačí decentní stín, třeba text-shadow: 0 1px 3px rgba(0,0,0,0.6). Nemá být vidět jako efekt, jen oddělí písmo od pozadí. Čím rušnější fotka, tím větší rozostření a sytější barva stínu se hodí.
Neon, 3D a obrys: efekty z více vrstev
Zajímavé efekty vzniknou skládáním více stínů oddělených čárkou. Prohlížeč je vykresluje odpředu dozadu, takže první stín v pořadí leží nejvýš. Neonový nápis uděláte tak, že oba offsety necháte na nule a přidáte velké rozostření. Stín se pak rozlije rovnoměrně kolem písma a působí jako záře.
Obrys textu simulujete čtyřmi stíny bez rozostření, posunutými o pixel do všech stran. Dojem 3D nápisu vytvoříte řadou stínů se stoupajícím offsetem ve stejném směru. S efekty to ale nepřehánějte. Silný stín u dlouhých odstavců unavuje oči a zhoršuje čitelnost, proto ho šetřete na nadpisy, loga a krátké nápisy.
Časté otázky
Jak udělat neonový stín textu v CSS?
Nastavte oba offsety na nulu a přidejte větší rozostření se sytou barvou, například text-shadow: 0 0 10px #0ff. Stín se rozlije kolem písma bez směru a vznikne dojem záře. Efekt zesílíte naskládáním několika takových vrstev na sebe.
Můžu na jeden text použít víc stínů?
Ano. Jednotlivé stíny oddělte čárkou a prohlížeč je vykreslí přes sebe. První v pořadí leží nejvýš, poslední úplně vespod. Právě skládáním vrstev vznikají obrysy, 3D nápisy i vícebarevné záře.
Jaký je rozdíl mezi text-shadow a box-shadow?
Vlastnost text-shadow vrhá stín z tvaru písmen, box-shadow z obdélníkového rámce prvku. Stín textu navíc nepodporuje hodnoty spread a inset, takže má jen posun, rozostření a barvu.