Cień pod obrazkiem, tekstem z użyciem CSS

Wpis na blogu

Kategoria wpisu Kurs CSS, Kursy, Tło Tagi: , , , , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

ID-10082124-mCzasami w celu uzyskania ciekawego efektu na stronie chcemy dodać naszym zdjęciom cień. Ten mały drobiazg może bardzo poprawić wygląd naszej witryny i wcale nie wymaga dużo pracy. Wystarczy dopisać w stylach CSS dla obrazka właściwość Box Shadow lub dla zwykłego tekstu text-shadow.

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

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

Przykłady text-shadow

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

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

Przykładowy tekst z rozmytym cieniem

Cień pod spodem:

Przykładowy tekst z cieniem

Cień wewnętrzny

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

 

Warto zobaczyć:

Dodawanie cienia do elementu HTML – CSS3 box-shadow

Tekst 3D na stronie internetowej – CSS

Ciekawe efekty na tekście z użyciem cienia – CSS Text-Shadow

Dodatkowe tagi:
cień pod elementem
dodawanie cienia pod tekstem

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *