Dodawanie cienia pod obiekty, obrazek lub tekstem z pomocą CSS

Czas czytania: 3 minut
ID-10082124-m

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ść 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)

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 w prawo, ujemne w lewo),
  • odchylenie w pionie (dodatnie wartości w dół, ujemne w górę)
  • rozmycia – parametr można opuścić.
  • 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)

See the Pen
Shadow generator
by Aura (@Julka85)
on CodePen.0

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-shadowinset 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ż:

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go