CSS tekstishadow

Tekstin varjo

text-shadow Ominaisuus lisää varjoa tekstille.

Yksinkertaisin käyttö on määrittää vain horisontaalinen varjo (2px) ja pystysuuntainen varjo (2px):

Tekstin varjo-effect!

Esimerkki

h1 {
  text-shadow: 2px 2px;
}

Kokeile itse

Lisää väri varjoon (punainen):

Tekstin varjo-effect!

Esimerkki

h1 {
  text-shadow: 2px 2px red;
}

Kokeile itse

Lisää hämärtäva vaikutus varjoon (5px):

Tekstin varjo-effect!

Esimerkki

h1 {
  text-shadow: 2px 2px 5px red;
}

Kokeile itse

Vinkki:Vierasta, vieraile CSS kirjasin Luku, oppieta miten muuttaa kirjasinta, tekstin kokoa ja tekstityyliä.

Vinkki:Vierasta, vieraile CSS tekstiefektit Luku, oppieta miten toteuttaa erilaisia tekstejä.

Kaikki CSS-tekstit ominaisuudet

Ominaisuus Kuvaus
color Aseta tekstin väri.
direction Määritellään tekstin suunta/kirjoitus suunta.
letter-spacing Aseta kirjainten välimatka.
line-height Aseta rivejen korkeus.
text-align Määritellään tekstin horisontaalinen tasaus.
text-decoration Määritellään lisättävät tekstin koristelutehosteet.
text-indent Määritellään tekstin ensimmäisen rivin sisennys.
text-shadow Määritellään lisättävät tekstin varjotehosteet.
text-transform Kontrolloi tekstin isojen ja pienien kirjainten muotoa.
text-overflow Määritellään, miten käyttäjille näytetään piilotetut ylivoimaiset sisällöt.
unicode-bidi Käytetään yhdessä direction-ominaisuuden kanssa asettaakseen tai palauttamaan, tulisiko teksti uudelleenkirjoittaa tukemaan useita kieliä samassa asiakirjassa.
vertical-align Määritellään tekstin pystysuuntainen tasaus.
white-space Määritellään, miten elementin sisäiset tyhjät alueet käsitellään.
word-spacing Aseta sanaväli.