Wpis na blogu

Cień na stronie pod obrazkiem, DIV, tekstem z użyciem CSS

Czas czytania: 2 minut

ID-10082124-mCzasami w celu uzyskania ciekawego efektu na stronie chcemy dodać naszym zdjęciom, tekstu ale nie tylko cień. Ten mały drobiazg może bardzo poprawić wygląd naszej witryny. Dodać jej jak gdyby dodatkowego wymiaru, przestrzeni. I wbrew pozorom wcale nie wymaga dużo pracy.

Jakiej właściwości użyć by dodać cień pod obiektem 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
  • text-schadow – dla tekstu

Parametry Box Shadow

Poszczególne cienie składają się z 4 wartości 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,

Poniżej umieściłam prosty generator cieni. Z jego pomocą możecie samodzielnie stworzyć proste cienie za obiektem:

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

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

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 -2px -2px; }

Powyższy przykład jest jak widać mało czytelny, dlatego rozłożę go na części.

Cień na zewnątrz:

Przykładowy tekst z cieniem

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

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ń pod spodem:

Przykładowy tekst z cieniem

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

Cień wewnętrzny

W celu uzyskania cienia wewnętrznego można dodać kod:

-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ń pod elementem
dodawanie cienia pod tekstem
generator cienia