Właściwość CSSTypografia
text-shadow
Dodaje cień pod tekstem.
- Wartość domyślna
none- Dziedziczona
- Tak
- Animowalna
- tak, jako lista cieni
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.textShadow = "0 2px 8px rgba(0,0,0,.6)"
Przykład
#CSS
.hero-title {
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}HTML przykładu
<div style="padding: 32px 16px; border-radius: 12px; background: url('/collections/covers/jak-zostac-programista.webp') center / cover;">
<h2 class="hero-title" style="margin: 0; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7);">Zostań programistą</h2>
</div>Podgląd
Definicja i zastosowanie
#Właściwość text-shadow rysuje cień pod literami. Podajesz przesunięcie w poziomie, przesunięcie w pionie, opcjonalnie rozmycie oraz kolor, na przykład 2px 2px 4px rgba(0, 0, 0, 0.5).
Możesz dodać kilka cieni po przecinku. Pozwala to tworzyć efekty poświaty, obrysu albo tekstu wyglądającego na trójwymiarowy.
Delikatny cień poprawia czytelność jasnego tekstu na zdjęciu. Zbyt mocny cień sprawia jednak, że litery wyglądają na rozmazane.
Składnia
#Składnia
text-shadow: none | <przesunięcie-x> <przesunięcie-y> <rozmycie>? <kolor>? [, …]*;Wartości
#- Tekst bez żadnego cienia.
- Twardy, przesunięty cień bez rozmycia.
- Poświata wokół liter.
lista
Połączenie poświaty i twardego cienia.
Wartości w praktyce
#none
Tekst bez żadnego cienia.
.demo { text-shadow: none; }3px 3px 0 #7c3aed
Twardy, przesunięty cień bez rozmycia.
.demo { text-shadow: 3px 3px 0 #7c3aed; }0 0 12px #a78bfa
Poświata wokół liter.
.demo { text-shadow: 0 0 12px #a78bfa; }kilka cieni
Połączenie poświaty i twardego cienia.
.demo { text-shadow: 0 0 8px #38bdf8, 3px 3px 0 #1e3a8a; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Na zdjęciach lepszym rozwiązaniem niż mocny cień bywa półprzezroczysta nakładka pod tekstem.
- Cień nie zmienia kontrastu w oczach narzędzi do dostępności. Sprawdzaj czytelność bez niego.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.