Cienie i efekty specjalne (box-shadow, text-shadow)

W CSS możemy dodawać różnorodne efekty cieni do elementów za pomocą właściwości box-shadow i text-shadow. Użycie cieni pozwala na nadanie głębi oraz wyróżnienie wybranych elementów, co sprawia, że strona staje się bardziej atrakcyjna wizualnie.

Właściwość box-shadow

box-shadow służy do dodawania cienia do elementów blokowych, takich jak przyciski, sekcje lub obrazy. Właściwość ta pozwala na kontrolowanie położenia, rozmycia oraz intensywności cienia.

element {
  box-shadow: h-offset v-offset blur spread color;
}

Atrybuty box-shadow

• h-offset - poziome przesunięcie cienia
• v-offset - pionowe przesunięcie cienia
• blur - rozmycie cienia (większa wartość oznacza bardziej rozmyty cień)
• spread - rozprzestrzenienie cienia (dodatnie wartości zwiększają cień)
• color - kolor cienia

W poniższym przykładzie cień będzie przesunięty o 5px na prawo i 5px w dół, a także rozmyty na 10px, z wyróżniającym się zielonym kolorem.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Właściwość text-shadow

text-shadow służy do dodawania cienia do tekstu, co pozwala na uzyskanie efektów przestrzennych.

element {
  text-shadow: h-offset v-offset blur color;
}

Atrybuty text-shadow

• h-offset - poziome przesunięcie cienia
• v-offset - pionowe przesunięcie cienia
• blur - rozmycie cienia
• color - kolor cienia

W poniższym przykładzie nagłówek otrzyma cień przesunięty o 2px w prawo i w dół, rozmyty na 5px, co nada tekstowi subtelny efekt głębi

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Efekty specjalne z cieniami

Możemy łączyć różne cienie i tworzyć złożone efekty wizualne. Przykład wielokrotnego cienia na przycisku

W tym przypadku przycisk otrzyma dwa cienie: jeden ciemniejszy po prawej i dolnej stronie oraz jaśniejszy po lewej i górnej stronie, co stworzy efekt wklęsłości.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.