Stín CSS textu - Triky CSS

Anonim

Pravidelný textový stín:

p ( text-shadow: 1px 1px 1px #000; )

Více stínů:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

První dvě hodnoty určují délku odsazení stínu. První hodnota určuje vodorovnou vzdálenost a druhá určuje svislou vzdálenost stínu. Třetí hodnota určuje poloměr rozostření a poslední hodnota popisuje barvu stínu:

1. hodnota = souřadnice X
2. hodnota = souřadnice Y
3. hodnota = poloměr rozostření
4. hodnota = barva stínu

Použití kladných čísel jako prvních dvou hodnot končí umístěním stínu napravo od textu vodorovně (první hodnota) a umístěním stínu pod text svisle (druhá hodnota).

Třetí hodnota, poloměr rozostření, je volitelná hodnota, kterou lze zadat, ale nemusíte. Je to množství pixelů, které je text roztažen, což způsobuje efekt rozostření. Pokud třetí hodnotu nepoužíváte, bude se s ní zacházet, jako kdybyste zadali nulový poloměr rozostření.

Nezapomeňte také, že pro barvu můžete použít hodnoty RGBA, například 40% průhlednost bílé:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )