Autor publikacji
Virtual Patriot - Administrator

text-shadow

Data publikacji
Ostatnio edytowano

Opis właściwości text-shadow

Za pomocą właściwości text-shadow możemy określić dodatkowy efekt cienia dla tekstu interesującego nas elementu HTML.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje o właściwości text-shadow

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

none

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości text-shadow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości text-shadow

none

Opis

Wartość none jest domyślną wartością właściwości text-shadow.

Domyślnie tekst elementu HTML nie posiada żadnego dodatkowego efektu cienia.

Przykład

  text-shadow:none;
tekst tego elementu "div" nie posiada żadnego dodatkowego efektu cienia

Kod źródłowy przykładu

<!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>

wzorzec wartości

Opis

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.

Składniki wzorca wartości właściwości text-shadow

Przykładowe zapisy

1px 2px

1px 2px 3px

1px 2px 3px red

-3px -3px 3px #00F

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.

Przykład

  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"

Kod źródłowy przykładu

<!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>

sekwencja wartości

Opis

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.

Przykład

  text-shadow:2px 2px 0 white, 4px 4px 2px red;
ABC

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".

Kod źródłowy przykładu

<!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>