Cień na stronie z CSS3 – box-shadow, text-shadow

Czasami w celu uzyskania ciekawego efektu na stronie chcemy dodać umieszczonym na niej obiektom (obrazom, tekstowi lub np. <DIV>, <button>) jak by dodatkowy wymiar.

Do tego zadania świetnie nadaje się tak zwany cień. Ten mały drobiazg może mieć bardzo duży wpływ wygląd naszej witryny. Dodać jej jak gdyby przestrzeni, głębi – to oczywiście będzie tylko złudzenie optyczne jednak wystarczy by poprawić wygląd wielu różnych elementów w witrynie. I wbrew pozorom wcale nie wymaga dużo pracy.

Jakiej właściwości użyć by dodać cień na stronie?

Zacznijmy od tego, że niestety nie możemy użyć tej samej właściwości CSS dla wszystkich obiektów na stronie. Inna właściwość CSS dodaje bowiem cień do obiektów blokowych takich jak obraz, grafika czy DIV a inna pod tekst. W praktyce mamy więc 2 właściwości:

• box-shadow – dla obiektów blokowych (np. <DIV>, <button> – również pod <a> po drobnych zmianach w CSS)
• text-schadow – dla tekstu (fontu, czcionki)

Skoro już poznaliśmy ich nazwy pora na to by przyjrzeć się im bliżej.

Dodawanie cienia z box-shadow

Poszczególne cienie składają się z 4 wartości liczbowych oraz nazwy koloru są to:

• odchylenie w poziomie (dodatnie wartości przesunięcie w prawo, ujemne w lewo),
• odchylenie w pionie (dodatnie wartości przesunięcie w dół, ujemne w górę)
• rozmycie – powoduje, że cień pod obiektem zaczyna się rozmywać, parametr ten można opuścić (ustawiony jest w tedy domyślnie na 0 – czyli brak rozmycia).
• wielkość (dodatnie wartości większy, ujemne mniejsze niż obiekt) – parametr można opuścić.
• kolor,

Wiem na początek to może być skomplikowane dlatego poniżej umieściłam prosty generator cieni. Z jego pomocą możecie samodzielnie stworzyć proste cienie. 

Prosty generator dla box-shadow

Przykłady dodania cienia dla obrazka (prosty generator cienia)

W tym miejscu warto dodać, że w praktyce na stronie można umieszczać kilka różnych cieni. Trzeba jednak rozdzielić je przecinkiem.

Przykłady zastosowania text-shadow (cienia pod tekstem)

Text-shadow działa analogicznie do box-shadow tyle, że jego zadaniem jest dodawanie cienia pod tekst. W przeciwieństwie do box-shadow, text-shadow posiada tylko 3 parametry.

• odchylenie w poziomie (dodatnie wartości w prawo, ujemne w lewo),
• odchylenie w pionie (dodatnie wartości w dół, ujemne w górę)
• kolor

Przykłady dodania cienia dla tekstu

---

Przykładowy tekst z cieniem

p.cien { text-shadow: pink 2px 2px, 
         maroon -5px -6px; }

Powyższy przykład jest jak widać mało czytelny, dlatego rozłożę go na części. A mamy co tu rozkładać ponieważ cień jest tu podwójny. Czyli jeden cień jest w kolorze „pink” (różowy) a drugi „maroon” (kasztanowy).

---

W tym wypadku cień znalazł się jak by na zewnątrz a dokładnie powyżej naszego tekstu. Spowodowane jest to ustawieniem parametrów na liczbę ujemną w efekcie cień (bez rozmycia – prawie idealna kopia oryginału) uniósł się nad nasz tekst.

Przykładowy tekst z cieniem

p.cien { 
-webkit-text-shadow: maroon -5px -6px;
-moz-text-shadow: maroon -5px -6px;
text-shadow: maroon -5px -6px;
 }

---

Cień pod spodem – czyli fragment z różowym cieniem:

Przykładowy tekst z cieniem

p.cien { 
-webkit-text-shadow: pink 2px 2px; 
-moz-text-shadow: pink 2px 2px;
text-shadow: pink 2px 2px;}

---

Dodatkowo macie jeszcze przykładowy tekst z rozmytym cieniem

Przykładowy tekst z rozmytym cieniem

p.cien { 
-webkit-text-shadow: 2px -2px 12px #333;
-moz-text-shadow:  2px -2px 12px #333;
text-shadow:  2px -2px 12px #333;
 }

---

Cień wewnętrzny

Cień wewnętrzny, czyli taki, który umieszczony jest we wnętrzu obiektu. Nie uzyskamy tego efektu wszędzie np. nie jest on raczej możliwy dla tekstu. Sprawa ma się jednak inaczej z obiektami blokowymi takimi jak <div> czy <button> w ich przypadku nie powinno stanowić to większego problemu.

Cień wewnętrzy, który w praktyce wygląda jak obramowanie możemy uzyskać dodając do właściwości box-shadow – inset poniżej macie przykład:

-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;

Warto przeczytać również:

• Efekt złudzenia efektu 3D
• Ciekawe efekty na stronie uzyskane z pomocą cienia

Dodatkowe tagi:
cień umieszczony pod elementem
dodawanie cienia pod tekstem
generator cienia