Ostatnio edytowany:

text-shadow

Autor: Virtual Patriot

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.

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

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
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

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:#AFF;
      }
    </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.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w prawo względem tekstu elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w lewo względem tekstu elementu HTML

Wartość domyślna

0

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.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartości dodatnie

wartości dodatnie przesuwają cień w dół względem tekstu elementu HTML

Wartości ujemne

wartości ujemne przesuwają cień w górę względem tekstu elementu HTML

Wartość domyślna

0

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.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

0

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.

Dostępne wartości

wybrany sposób definiowania wartości koloru w języku CSS

Wartość domyślna

currentColor

Przykład

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 niebieski), ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującymi wartościami: "1px 2px 3px blue"

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 blue;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 niebieski), 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 może 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

tekst tego elementu "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującą sekwencją wartości: "1px 1px 0 white, 1px 1px 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:1px 1px 0 white, 1px 1px 2px red;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div" posiada dwa różne efekty cienia jednocześnie, ponieważ do tego elementu "div" została dodana właściwość "text-shadow" wraz z następującą sekwencją wartości: "1px 1px 0 white, 1px 1px 2px red"
    </div>

  </body>
</html>