Wartość none jest domyślną wartością właściwości text-shadow.
Domyślnie tekst elementu HTML nie posiada żadnego dodatkowego efektu cienia.
text-shadow:none;
tekst tego elementu "div" nie posiada żadnego dodatkowego efektu cienia
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" nie posiada żadnego dodatkowego efektu cienia
</div>
</body>
</html>
Za pomocą właściwości text-shadow oraz z góry zdefiniowanego wzorca wartości możemy określić dodatkowy efekt cienia dla tekstu interesującego nas elementu HTML.
- x
-
Składnik x jest wymaganym składnikiem wzorca wartości właściwości text-shadow. Składnik x określa przesunięcie w poziomie cienia tekstu interesującego nas elementu HTML.
- y
-
Składnik y jest wymaganym składnikiem wzorca wartości właściwości text-shadow. Składnik y określa przesunięcie w pionie cienia tekstu interesującego nas elementu HTML.
- blur
-
Składnik blur nie jest wymaganym składnikiem wzorca wartości właściwości text-shadow. Składnik blur określa stopień rozmycia cienia tekstu interesującego nas elementu HTML. Im większa wartość składnika blur tym stopień rozmycia cienia tekstu będzie większy.
- color
-
Składnik color nie jest wymaganym składnikiem wzorca wartości właściwości text-shadow. Składnik color określa kolor cienia tekstu interesującego nas elementu HTML.
text-shadow:1px 2px 3px red;
tekst tego elementu "div" posiada efekt cienia (przesunięty w prawo o 1 piksel, przesunięty w dół o 2 piksele, posiadający stopień rozmycia równy 3 piksele oraz posiadający kolor czerwony), ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującymi wartościami: "1px 2px 3px red"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-shadow:1px 2px 3px red;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
tekst tego elementu "div" posiada efekt cienia (przesunięty w prawo o 1 piksel, przesunięty w dół o 2 piksele, posiadający stopień rozmycia równy 3 piksele oraz posiadający kolor czerwony), ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującymi wartościami: "1px 2px 3px blue"
</div>
</body>
</html>
Za pomocą sekwencji kilku oddzielonych od siebie znakiem przecinka wzorców wartości właściwości text-shadow możemy sprawić, że tekst interesującego nas elementu HTML będzie posiadał kilka dodatkowych efektów cienia jednocześnie. Najbardziej na wierzchu będzie ten cień, który podamy jako pierwszy w naszym zapisie.
text-shadow:2px 2px 0 white, 4px 4px 2px red;
Tekst przykładowego elementu "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do wspomnianego elementu "div" została dodana właściwość "text-shadow" wraz z następującą sekwencją wartości: "2px 2px 0 white, 4px 4px 2px red".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
text-shadow:2px 2px 0 white, 4px 4px 2px red;
font-size:10em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>ABC</div>
</body>
</html>
