CSS varjoefektit
- Edellinen sivu CSS säteinen aaltokuvitus
- Seuraava sivu CSS box-shadow
Luo varjoefektejä CSS:llä!
CSS varjoefektit
Käyttämällä CSS:ää voit lisätä varjoja tekstiin ja elementteihin.
Tutkielmassamme opit seuraavat attribuutit:
text-shadowbox-shadow
CSS tekstivaro
CSS text-shadow Atribuutti lisää varjoja tekstiin.
Yksinkertaisin käyttö on määrittää vain horisontaalinen varjo (2px) ja vertikaalinen varjo (2px):
Tekstivärin varjostusefekti!
Esimerkki
h1 {
text-shadow: 2px 2px;
}
Seuraavaksi lisää väri varjoille:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
text-shadow: 2px 2px red;
}
Lisää sitten hämärtävyys varjoille:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
text-shadow: 2px 2px 5px red;
}
Esimerkki näyttää valkoisen tekstin mustalla varjolla:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
color: valkoinen;
text-shadow: 2px 2px 4px #000000;
}
Esimerkki näyttää punaisen neonvalon varjot:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
text-shadow: 0 0 3px #FF0000;
}
Useita varjoja
Jos haluat lisätä useita varjoja tekstiin, voit lisätä varjojen listan pilkulla erotettuna.
Esimerkki näyttää punaisen ja sinisen neonvalon varjot:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Alla oleva esimerkki näyttää valkoisen tekstin, jossa on musta, sininen ja tummasininen varjostus:
Tekstivärin varjostusefekti!
Esimerkki
h1 {
color: valkoinen;
text-shadow: 1px 1px 2px musta, 0 0 25px sininen, 0 0 5px tummasininen;
}
Voit myös käyttää text-shadow-ominaisuutta luodaksesi pelkän reunuksen tekstiin (ilman varjostusta):
Tekstin ympärillä oleva reunus!
Esimerkki
h1 {
color: keltainen;
text-shadow: -1px 0 musta, 0 1px musta, 1px 0 musta, 0 -1px musta;
}
- Edellinen sivu CSS säteinen aaltokuvitus
- Seuraava sivu CSS box-shadow
