Własność CSS box-shadow

Własność CSS box-shadow dodaje efekt cienia wokół elementu na stronie internetowej. Za jej pomocą można tworzyć atrakcyjne efekty wizualne, aby na przykład urozmaicić wygląd ilustracji graficznych lub innych elementów strony.

Własność ta umożliwia określenie, na jaką odległość cień ma być wysunięty poza każdą z krawędzi elementu, sposobu jego rozmazania oraz jego rozmiaru.

Jeśli element, do którego zastosowano własność box-shadow, ma zaokrąglone rogi, to cienie również zostają odpowiednio zaokrąglone.

Prosty przykład

Poniżej znajduje się przykładowa definicja cienia dla elementu div. Jest on wysunięty o 10 pikseli poza prawą i dolną krawędź elementu, ma 5-pikselowe rozmazanie oraz jest powiększony w stosunku do rozmiaru swojego elementu o 10 pikseli.

div {
  width: 350px;
  height: 150px;
  box-shadow: 10px 10px 5px 10px navy;
}

Efekt:

Wartości i składnia

Za pomocą własności box-shadow można zdefiniować dowolną liczbę par cieni i dlatego przyjmuje ona dowolną liczbę grup wartości rozdzielanych przecinkami (w specyfikacjach CSS taka grupa jest oznaczana symbolem <shadow>) albo wartość none, oznaczającą brak cieni.

Każda grupa może zawierać od dwóch do sześciu wartości, za pomocą których można określić położenie, rozmazanie i rozmiar cienia, jego kolor oraz to, czy ma on być renderowany wewnątrz, czy na zewnątrz elementu.

Aby więc zdefiniować pojedynczą parę cieni elementu, należy zdefiniować od dwóch do czterech wartości z jednostkami długości oraz opcjonalnie wartość koloru i słowo kluczowe inset.

• Dwie liczby z jednostką długości: najprostsza możliwa definicja cienia zawiera tylko dwie liczby z jednostkami długości, które określają jego położenie względem elementu. Pierwsza określa jego przesunięcie w poziomie, a druga – w pionie, np.:

  div {
    border: 1px solid lightpink;
    box-shadow: 10px 10px;
  }

  Efekt:

  

  Wartości dodatnie powodują przesunięcie w prawo i w dół. Natomiast wartości ujemne powodują odpowiednio przesunięcie w lewo i w górę. Gdybyśmy więc powyższy przykład zmodyfikowali następująco:

  div {
    border: 1px solid lightpink;
    box-shadow: -10px -10px;
  }

  …to uzyskalibyśmy taki efekt:

  

  Dwie pierwsze wartości określają przesunięcie cienia w dwóch kierunkach. Gdybyśmy więc ustawili je na 0, to cień nie wysunąłby się spod elementu i byłby niewidoczny, chyba że dodatkowo zdefiniowalibyśmy rozmazanie lub powiększenie, które spowodowałyby, że by się ujawnił.

• Trzy liczby z jednostką długości: jeśli zostaną podane trzy liczby z jednostką długości, to dwie pierwsze są interpretowane jako wartość przesunięcia w poziomie i pionie, a trzecia jako wartość rozmazania (ang. blur). Im większa jest ta wartość, tym rozmycie większe i jaśniejsze. Jeśli tę wartość ustawimy na 0 lub nie podamy jej w ogóle (co jest równoznaczne z ustawieniem na 0), to cień będzie miał ostre krawędzie, jak widać w powyższych przykładach. Ponadto ta wartość nie może być ujemna, np.:

  div {
    border: 1px solid lightpink;
    box-shadow: 10px 10px 12px;
  }

  Efekt:

  
• Cztery liczby z jednostką długości: trzy pierwsze wartości są interpretowane w sposób opisany powyżej, a czwarta określa rozmiar cienia (ang. spread). Jeśli jest większa od zera, to cień się powiększa, a jeśli jest mniejsza od zera, to cień się kurczy, np.:

  Jeśli tę wartość ustawimy na 0 lub nie podamy jej w ogóle (co jest równoznaczne z ustawieniem na 0), to cień będzie miał taki sam rozmiar, jak element, dla którego został zdefiniowany.

• Wartość koloru: wartość koloru może znajdować się na początku lub na końcu grupy i określa barwę cienia, np. obie poniższe reguły CSS są poprawne:

  div {
    border: 1px solid lightpink;
    box-shadow: maroon 10px 10px 12px 10px;
  }
  div {
    border: 1px solid lightpink;
    box-shadow: 10px 10px 12px 10px maroon;
  }

  W obu przypadkach efekt będzie taki sam, jak widać na poniższym zrzucie ekranu.

  

  Oczywiście wartość koloru można dodać także w grupie zawierającej tylko dwie lub trzy wartości liczbowe.

• Słowo kluczowe inset: to słowo kluczowe, podobnie jak wartość koloru, może znajdować się na początku lub na końcu grupy i nie ma znaczenia, czy znajduje się przed, czy za wartością koloru. Jego działanie polega na tym, że cień zostaje wyrenderowany wewnątrz zamiast na zewnątrz elementu, np.:

  div {
    border: 1px solid lightpink;
    box-shadow: 10px 10px 12px 10px maroon inset;
  }

  Zdefiniowany w ten sposób cień zakrywa tło elementu, ale znajduje się pod jego treścią oraz mieści się w granicach obramowania.

Definiowanie kilku cieni elementu

Aby zdefiniować więcej niż jedną parę cieni elementu, należy przekazać własności box-shadow dowolną liczbę grup wartości rozdzielanych przecinkami. W każdej grupie obowiązują zasady opisane powyżej.

Jeśli na przykład zdefiniujemy kilka grup z zerowymi wartościami przesunięcia i rozmazania oraz rosnącymi wartościami spreadu, to otrzymamy ciekawy efekt wizualny:

div {
  box-shadow: 0 0 0 30px lightpink,
              0 0 0 60px lightyellow,
              0 0 0 90px lightgreen;
}

Efekt:

Innym ciekawym efektem, jaki można uzyskać dzięki kreatywnemu wykorzystaniu cieni, jest stylowa ramka, np. taka, jak widoczna poniżej.

Do utworzenia tej ramki został wykorzystany poniższy kod CSS:

div {
  width: 350px;
  padding: 15px 0 40px 30px;
  font-style: italic;
  border-radius: 10px;
  box-shadow:
  10px -20px 20px lightblue inset,
  5px -5px 10px lightpink;
}

Zastosowanie

Własność CSS box-shadow ma zastosowanie do wszystkich wszystkich elementów HTML.

Podsumowanie