Text Shadow Generator
CSS text shadow
CSS text shadow Działa lokalnie w Twojej przeglądarce
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Generator cienia tekstu ustawia przesunięcie, rozmycie, kolor i przezroczystość cienia za tekstem, korzystając z podglądu na żywo i CSS. W przeciwieństwie do box-shadow nie ma wartości rozproszenia, która przyciąga ludzi: jedynym sposobem na zwiększenie ciężaru cienia tekstowego jest ułożenie kilku cieni w jednej deklaracji. Jest to najbardziej przydatne dla czytelności, umieszczając subtelny ciemny cień za jasnym tekstem na fotografii i nigdy nie powinno być tym, co sprawia, że tekst jest czytelny, ponieważ znika on w momencie zmiany tła.
Where people use the
- Dodanie subtelnego cienia, aby podpis był widoczny na zdjęciu.
- Wykonanie efektu tłoczonego lub grawerowanego nagłówka.
- Produkcja tekstu w stylu retro lub neonowym.
- Testowanie, jak ciężki musi być cień, zanim będzie wyglądał tanio.
How to use the
- 1
Ustaw przesunięcia
Przesunięcie X przesuwa się w prawo, przesunięcie Y przesuwa się w dół. Przesunięcie o jeden lub dwa piksele odczytuje się jako głębokość; wszystko większe zaczyna wyglądać jak cień.
- 2
Ustaw rozmycie
Rozmycie zmiękcza krawędź. Zero daje twardą kopię tekstu, czyli sposób tworzenia konturów i efektów retro.
- 3
Wybierz kolor i przezroczystość
Ciemny tekst na jasnym tle wymaga jasnego cienia i odwrotnie. Utrzymuj niskie krycie, chyba że chcesz uzyskać oczywisty efekt.
- 4
Skopiuj CSS
Reguła zawiera kolor rgba, gotowy do wklejenia.
- 5
Układaj cienie, jeśli potrzebujesz większej wagi
Dodaj drugi cień oddzielony przecinkiem w arkuszu stylów. Tylko w ten sposób można pogrubić cień tekstu, ponieważ nie występuje rozkład.
Wskazówki i najlepsze praktyki
- Mniej znaczy więcej: jeden lub dwa piksele przy niskim stopniu krycia eliminują silne rozmycie.
- Nigdy nie polegaj wyłącznie na cieniu, jeśli chodzi o dostępność; popraw kontrast pod spodem.
- Pamiętaj, że właściwość jest dziedziczona, więc ogranicz ją do elementu, który masz na myśli.
Często zadawane pytania
Dlaczego nie ma wartości spreadu?
Ponieważ cień tekstowy go nie obsługuje. Jego składnia to przesunięcie X, przesunięcie Y, tylko rozmycie i kolor. Aby symulować rozproszenie, układasz kilka identycznych cieni z nieco różnymi przesunięciami.
Czy mogę go użyć, aby tekst był czytelny na obrazie?
Tylko jako dodatek. Cień pomaga na marginesach, ale nie sprawdza się w ruchliwych obszarach i nie jest wliczany do współczynnika kontrastu WCAG mierzonego w stosunku do koloru tła. Dodaj siatkę lub pełny panel, jeśli czytelność naprawdę ma znaczenie.
Jak obrysować tekst?
Ułóż cztery cienie w odstępach plus i minus jeden piksel w każdym kierunku z zerowym rozmyciem. Daje to efekt konturu bez konieczności stosowania opcji -webkit-text-stroke, która nie jest obsługiwana wszędzie.
Czy to spowalnia stronę?
Pojedynczy cień statyczny prawie nic nie kosztuje. Animowanie cienia tekstu lub stosowanie dużego, rozmytego cienia do dużej ilości tekstu powoduje pojawienie się kosztu ponownego malowania.
Czy jest dziedziczony przez elementy potomne?
Tak. Cień tekstu jest dziedziczony, więc ustawienie go w kontenerze powoduje zastosowanie go do każdego potomka z tekstem, co czasami jest zaskakujące.