Savybė text-shadow
Savybė text-shadow nustato teksto šešėlį.
Kaip reikšmę savybė priima 4
parametrus, išvardintus per tarpą, arba
raktinį žodį none, kuris visiškai panaikina šešėlį
(tai yra numatytoji reikšmė).
Sintaksė
selektorius {
text-shadow: poslinkis_x poslinkis_y išsiliejimas spalva;
}
selektorius {
text-shadow: none;
}
Parametrai
| Parametras | Aprašas |
|---|---|
| poslinkis x |
Nustato šešėlio poslinkį išilgai X ašies.
Teigiama reikšmė perkelia į dešinę, neigiama - į kairę. |
| poslinkis y |
Nustato šešėlio poslinkį išilgai Y ašies.
Teigiama reikšmė perkelia žemyn, neigiama - aukštyn. |
| išsiliejimas |
Nustato šešėlio išsiliejimą.
Kuo didesnė reikšmė - tuo labiau išsilietęs bus šešėlis. Neprivalomas parametras. Jei nenurodytas - šešėlis bus aiškus. |
| spalva |
Nustato šešėlio spalvą bet kokiame spalvų vienetų formate.
Neprivalomas parametras. Jei nenurodytas - šešėlio spalva sutampa su teksto spalva. |
Poslinkiai išilgai ašių ir išsiliejimas nurodomi bet kokiame dydžių vienetų formate, išskyrus procentus.
Pavyzdys
Perkelkime šešėlį žemyn ir į kairę bei pridėkime nedidelį išsiliejimą:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 5px 5px 3px black;
}
:
Pavyzdys . Aiškus šešėlis
Dabar padarykime raudonos spalvos šešėlį, perkelsime jį žemyn ir į kairę, bet pašalinsime išsiliejimą - šešėlis bus aiškus:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 10px 10px red;
}
:
Pavyzdys . Tolygus šešėlis
Dabar šešėlis neperkeltas, bet jam pridėtas išsiliejimas:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-shadow: 0px 0px 3px black;
}
:
Taip pat žiūrėkite
-
savybė
box-shadow,
kuri nustato konteinerio šešėlį