7.1 Właściwość text-shadow
Właściwość text-shadow w CSS pozwala dodawać cienie do tekstu, tworząc efekt przestrzenny i poprawiając wizualne wrażenia.
Ta właściwość daje elastyczność w konfigurowaniu cieni, w tym zarządzanie przesunięciem, rozmyciem i kolorem cienia.
Właściwość text-shadow ustawia cień dla tekstu wewnątrz elementu. Dzięki niej można kontrolować pozycję, rozmycie
i kolor cienia, dodając wizualny akcent do elementów tekstowych.
Składnia:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parametry:
offset-x: przesunięcie cienia w poziomieoffset-y: przesunięcie cienia w pionieblur-radius: promień rozmycia cienia (opcjonalnie)color: kolor cienia (opcjonalnie)
Wartości:
offset-xioffset-y: ustalają przesunięcie cienia względem tekstu. Mogą być wartościami dodatnimi lub ujemnymiblur-radius: określa stopień rozmycia cienia. Im większa wartość, tym bardziej rozmyty będzie cień. Wartość domyślna to 0 (bez rozmycia)color: ustala kolor cienia. Jeśli kolor nie jest podany, używa się koloru tekstu
Przykład użycia:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Podstawowy cień</p>
<p class="shadow-blur">Cień z rozmyciem</p>
<p class="shadow-color">Cień z kolorem</p>
<p class="shadow-multiple">Wiele cieni</p>
</body>
Wyjaśnienie kodu:
.shadow-basic: stosuje prosty cień z przesunięciem2pxw poziomie i pionie, promieniem rozmycia2pxi półprzezroczystym czarnym kolorem.shadow-blur: dodaje większy stopień rozmycia (5px), tworząc bardziej rozmyty cień.shadow-color: stosuje cień z kolorem (czerwony).shadow-multiple: stosuje dwa cienie z różnymi przesunięciami i rozmyciami, tworząc skomplikowany wielowarstwowy efekt
7.2 Przykłady
1. Miękki cień
Miękki cień z dużym promieniem rozmycia:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Miękki cień tekstu</p>
</body>
Wyjaśnienie kodu:
.soft-shadow: stosuje miękki cień bez przesunięcia i z dużym promieniem rozmycia (10px), tworząc delikatny efekt blasku wokół tekstu
2. Jasny cień
Cień z jasnym kolorem i niewielkim rozmyciem:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Cień z jasnym kolorem</p>
</body>
Wyjaśnienie kodu:
.colorful-shadow: stosuje cień z jasnym kolorem (niebieski), przesunięciem3pxi promieniem rozmycia5px
3. Wiele cieni
Wiele cieni z różnymi parametrami:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Wiele cieni tekstu</p>
</body>
Wyjaśnienie kodu:
.multi-shadow: stosuje dwa cienie z różnymi parametrami: jeden z niewielkim przesunięciem i rozmyciem, a drugi z dużym przesunięciem i rozmyciem czerwonego koloru
7.3 Ważne uwagi
Ważne uwagi przy korzystaniu z text-shadow
Kompatybilność z przeglądarkami
Właściwość text-shadow jest obsługiwana przez wszystkie nowoczesne przeglądarki, w tym Google Chrome, Firefox, Safari, Edge i Opera.
Jednak ważne jest, aby sprawdzić wyświetlanie cieni w starszych wersjach przeglądarek w celu zapewnienia zgodności między przeglądarkami.
Wydajność
Użycie skomplikowanych cieni z dużą ilością przesunięć i rozmycia może wpłynąć na wydajność, zwłaszcza na urządzeniach mobilnych. Optymalizuj cienie dla lepszej wydajności i testuj na różnych urządzeniach.
Dostępność
Upewnij się, że cienie nie pogarszają czytelności tekstu. Kontrast między tekstem a tłem powinien pozostać wystarczający dla wszystkich użytkowników, w tym osób ze słabym wzrokiem.
Właściwość text-shadow oferuje solidne narzędzia do tworzenia cieni tekstu w CSS. Pozwala na dodawanie różnych
efektów, od prostych cieni po skomplikowane cienie wielowarstwowe z różnymi kolorami i rozmyciem.
Użycie text-shadow pomaga poprawić wizualne odbiór tekstu, dodając głębię i objętość do projektu
stron internetowych. Ważne jest, aby pamiętać o kompatybilności z przeglądarkami i wydajności przy stosowaniu skomplikowanych cieni oraz
o dostępności dla wszystkich użytkowników.
GO TO FULL VERSION