Text-Shadow – czyli cień umieszczony pod tekstem stanowi jedną z ciekawszych właściwości CSS .
Jeszcze do niedawna (kilka lat temu) tego typu efekt uzyskiwany był z pomocą odpowiednio przygotowanej grafiki np. w Photoshopie lub Gimpie. Obecnie ta tendencja jest już praktycznie nie spotykana chociaż czasem można na nią trafić na starszych stronach.
Co znajdziesz w tym wpisie
Jak działa Text-Shadow
Text-Shadow jest bardzo prosty w obsłudze. Przykładowa deklaracja:
text-shadow: 15px 15px 0px #ccc, 7px 7px 0px #ccc;
Gdzie element:
1 – element to X-offset, czyli wartość w przestrzeni x
2 – element to Y offset, czyli wartość w przestrzeni y
3 – rozmycie czyli blur
4 – kolor
Tekst z powyższym cieniem
Jak widać powyższy tekst posiada podwójny cień, jest tak dlatego że zadeklarowałam 2 cienie.
- Pierwszy: 15px 15px 0px #ccc
- Drugi: 7px 7px 0px #ccc
To przykładowe ustawienie dosyć dobrze ilustruje możliwości tego parametru. Poniżej znajdziecie inne równie ciekawe zastosowania, warto zwrócić uwagę na ustawienia jakie przyjmuje atrybut dzięki czemu będzie wam łatwiej samodzielnie tworzyć własne efekty.
Przykładowe zastosowanie:
Styl Retro
Przykładowy tekst
W stylach CSS zapisujemy kod:
#retro { text-align: center; margin: 200px auto; font-family: "League-Gothic", Courier; font-size: 50px; text-transform: uppercase; color: #707070; text-shadow: 5px 5px 0px #eee, 4px 5px 0px #707070; }
W HTML
<p id="retro">Przykładowy tekst</p>
Jak widać efekt nie jest zbyt skomplikowany, a najistotniejszą rzeczą są odpowiednio dobrane kolory.
Podobny efekt omawiałam już wcześniej przy okazji tekstu 3D.
Najistotniejszą linijką tego kodu jest
text-shadow: 5px 5px 0px #eee, 4px 5px 0px #707070;
Wklęsły tekst – przypominający grawer
Przykładowy tekst
#wklesly{ text-align: center; margin: 100px auto; font-family: " font-size: 50px; text-transform: uppercase; color: #222; text-shadow: 0px 2px 3px #666; }
Podobnie jak wcześniej specyficzny wygląd nadaje:
text-shadow: 0px 2px 3px #666;
Tekst jak neon
świetlisty tekst przypominający stare neonowe lampy reklamujące firmę lub produkt
Przykładowy tekst
#neonowy{ text-align: center; margin: 100px auto; font-family: " font-size: 50px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }
Więcej ciekawych przykładów znajdziecie:
Using CSS Text-Shadow to Create Cool Text Effects
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.