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

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

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

  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:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>ABC</div>

  </body>
</html>