Tekst-skygge - CSS-triks

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

Du kan bruke flere tekstskygger ved å skille mellom kommaer

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

De to første verdiene angir lengden på skyggeforskyvningen. Den første verdien spesifiserer den horisontale avstanden og den andre angir den vertikale avstanden til skyggen. Den tredje verdien spesifiserer uskarphetsradiusen og den siste verdien beskriver fargen på skyggen:

1. verdi = X-koordinaten
2. verdi = Y-koordinaten
3. verdi = Uskarphetsradius
4. verdi = Fargen på skyggen

Bruk av positive tall som de to første verdiene ender med å plassere skyggen til høyre for teksten vannrett (første verdi) og plassere skyggen under teksten vertikalt (andre verdi).

Den tredje verdien, uskarphetsradiusen, er en valgfri verdi som kan spesifiseres, men ikke trenger. Det er mengden piksler teksten strekkes, noe som forårsaker en uskarphet. Hvis du ikke bruker den tredje verdien, blir den behandlet som om du spesifiserte en uskarphetsradius på null.

Husk også at du kan bruke RGBa- eller HSLa-verdier for fargen, for eksempel en 40% gjennomsiktighet av hvitt:

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

Eksempler

Se pennekomplekset tekstskyggeeksempler av Chris Coyier (@chriscoyier) på CodePen.

Mer informasjon

  • MDN Docs

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
2+ 1.1+ 3.5+ 9.5+ 10+ noen noen