Efekty na tekście z użyciem cienia – Text-Shadow

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.

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: