CSS efekty cienia

Kawa
Cienie

Twórz efekty cienia za pomocą CSS!

Nadążaj za mną!

CSS efekty cienia

Dzięki CSS możesz dodać cień do tekstu i elementów.

W naszym kursie nauczymy się takich atrybutów:

  • text-shadow
  • box-shadow

CSS tekstowy cień

CSS text-shadow Atrybut dodaje cień do tekstu.

Najprostsze użycie to określenie tylko poziomego cienia (2px) i pionowego cienia (2px):

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px;
}

Spróbuj sam

Następnie, dodaj kolor do cienia:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px red;
}

Spróbuj sam

Następnie, dodaj efekt rozmycia do cienia:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 2px 2px 5px red;
}

Spróbuj sam

Poniżej znajduje się przykład białego tekstu z czarnym cieniem:

Efekt cienia tekstu!

Przykład

h1 {
  color: biały;
  text-shadow: 2px 2px 4px #000000;
}

Spróbuj sam

Poniżej znajduje się przykład pokazujący efekt świetlnego cienia w kolorze czerwonym:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 0 0 3px #FF0000;
}

Spróbuj sam

Wiele cieni

Aby dodać wiele cieni do tekstu, możesz dodać listę cieni oddzieloną przecinkami.

Poniżej znajduje się przykład pokazujący efekt świetlnego cienia w kolorze czerwonym i niebieskim:

Efekt cienia tekstu!

Przykład

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Spróbuj sam

Poniższy przykład pokazuje biały tekst z cieniami czarnymi, niebieskimi i ciemnoniebieskimi:

Efekt cienia tekstu!

Przykład

h1 {
  color: biały;
  text-shadow: 1px 1px 2px czarny, 0 0 25px niebieski, 0 0 5px ciemnoniebieski;
}

Spróbuj sam

Możesz również użyć atrybutu text-shadow, aby utworzyć czystą krawędź wokół tekstu (bez cienia):

Otoczenie tekstu krawędzią!

Przykład

h1 {
  color: żółty;
  text-shadow: -1px 0 czarny, 0 1px czarny, 1px 0 czarny, 0 -1px czarny;
}

Spróbuj sam