Box-shadow CSS, czyli jak dodać cień do elementów na stronie?

Wstęp

Box-shadow CSS – W projektowaniu stron internetowych efekty wizualne mają ogromne znaczenie. Jednym z prostych, a zarazem skutecznych sposobów na wzbogacenie wyglądu elementów na stronie jest dodanie cienia. Efekt cienia może dodać głębi, podkreślić ważne elementy lub po prostu nadać stronie nowoczesnego stylu. W CSS za tę funkcję odpowiada właściwość box-shadow. W tym artykule dowiesz się, jak jej używać oraz jakie możliwości daje w tworzeniu atrakcyjnych interfejsów.

Składnia właściwości box-shadow

Właściwość box-shadow CSS ma kilkuelementową, elastyczną składnię, która umożliwia tworzenie różnorodnych efektów cieni.

box-shadow: offset-x offset-y blur-radius spread-radius color;

Omówmy, co oznaczają poszczególne wartości:

• offset-x: Przesunięcie cienia w poziomie. Dodatnia wartość przesuwa cień w prawo, a ujemna w lewo.
• offset-y: Przesunięcie cienia w pionie. Dodatnia wartość przesuwa cień w dół, a ujemna w górę.
• blur-radius: Promień rozmycia cienia. Większa wartość oznacza bardziej rozmyty cień, a wartość 0 daje ostry kontur.
• spread-radius: Rozszerzenie cienia. Dodatnia wartość zwiększa jego rozmiar, a ujemna zmniejsza.
• color: Kolor cienia, który można zdefiniować w dowolnym formacie cyfrowym (np. HEX, RGB, RGBA).

Przykład:

.bsh{
box-shadow: 5px 10px 15px -5px rgba(0, 0, 0, 0.3);
}

W powyższym przykładzie cień jest przesunięty o 5px w prawo i 10px w dół, ma promień rozmycia 15px, a jego zasięg jest zmniejszony o 5px. Kolor cienia to półprzezroczysta czerń.

Przykłady zastosowania box-shadow CSS

Przejdźmy do praktyki! Oto kilka popularnych przykładów, jak można zastosować box-shadow:

Prosty cień:

.bsh-simple{
box-shadow: 3px 3px 5px #888; 
}

Efekt: delikatny cień przesunięty lekko w dół i w prawo.

Cień wewnętrzny (inset):

.bsh-inset{
box-shadow: inset 0 0 10px #000;
}

Efekt: cień pojawia się wewnątrz elementu, tworząc efekt wgłębienia.

Kilka cieni na jednym elemencie:

.bsh-multiple{
box-shadow: 2px 2px 5px #444, -2px -2px 5px #aaa;
}

Efekt: jeden cień z lewej strony i drugi z prawej, co może stworzyć interesujący efekt oświetlenia.

Zastosowanie w praktyce – realne przykłady

Box-shadow css świetnie sprawdza się w wielu scenariuszach. Oto kilka zastosowań:

Przycisk z efektem cienia: Dodanie delikatnego cienia do przycisku sprawia, że wygląda on bardziej atrakcyjnie i przyciąga uwagę użytkownika, dodatkowo po najechaniu myszką cień staje się bardziej intensywny.

.button-example { 
 padding: 10px 20px; 
 background-color: #007bff; 
 color: white; 
 border: none; 
 border-radius: 16px;
 box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); 
 transition: box-shadow 0.3s ease; 
} 

.button-example:hover { 
 box-shadow: 4px 8px 15px rgba(0, 0, 0, 0.3); 
}

Cienie w kartach produktów: Cienie mogą pomóc w oddzieleniu kart od tła i nadaniu im „podniesionego” wyglądu.

.product-card {
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.product-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Material Design: Styl Material Design często wykorzystuje mocne cienie, które tworzą efekt unoszenia elementów.

.material-box {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

Porady i dobre praktyki

Tworzenie cieni wymaga pewnej subtelności. Kilka wskazówek:

• Nie przesadzaj: Zbyt mocne cienie mogą wyglądać sztucznie i odciągać uwagę od treści.
• Dopasowanie koloru cienia: Cień nie zawsze musi być czarny. Czasem warto użyć ciemniejszego odcienia koloru tła, aby efekt był bardziej spójny.
• Hierarchia wizualna: Używaj mocniejszych cieni dla ważniejszych elementów, aby wyróżniały się na stronie.

Wybrane przez redakcję przykłady

Dokonaliśmy selekcji najświeższych naszym zdaniem cieni! Poniżej znajdziesz gotowe kody i przykłady atrakcyjnych wizualnie zastosowań, z możliwością przekopiowania kodu box-shadow CSS.

.a {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.b {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.c {
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.d {
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.e {
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.f {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.g {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.h {
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.i {
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.j {
  box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}

.k {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.l {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

Optymalizacja cieni pod kątem wydajności

Zbyt duża ilość cieni może negatywnie wpłynąć na wydajność strony, zwłaszcza na urządzeniach mobilnych. Aby tego uniknąć:

• Ogranicz liczbę złożonych cieni (np. z dużym rozmyciem i spreadem).
• Unikaj nakładania zbyt wielu cieni na jedną stronę, szczególnie w elementach dynamicznych.
• Testuj wydajność strony, zwłaszcza na starszych przeglądarkach i wolniejszych urządzeniach.

Popularne narzędzia do generowania box-shadow

Jeśli chcesz szybko uzyskać odpowiedni kod cienia, warto skorzystać z narzędzi online. Kilka popularnych opcji to:

• CSSmatic: Intuicyjny generator cieni, który umożliwia manipulowanie wszystkimi parametrami box-shadow css.
• Box-shadow generator: Narzędzie oferujące podgląd w czasie rzeczywistym i możliwość generowania złożonych cieni.

Wystarczy przesunąć suwaki, by uzyskać pożądany efekt, a kod skopiować bezpośrednio do swojego projektu.

Podsumowanie

Właściwość box-shadow CSS to przydatne narzędzie, które pozwala tworzyć różnorodne efekty wizualne. Od delikatnych cieni pod przyciskami, po bardziej złożone efekty w stylu Material Design – wszystko jest w Twoich rękach. Eksperymentuj, dopasowuj kolory i wartości, aby tworzyć cienie, które wzbogacą Twoje projekty i uczynią je bardziej atrakcyjnymi wizualnie.

Jerzy Lazaridis

Senior Web developer
Archiwum autora

Od roku 2018 zajmuje się profesjonalnie programowaniem, posiada 15 certyfikatów z tej dziedziny oraz wyższe wykształcenie. Pasjonuję się nauką, sportem i sztuką. Fan nowoczesnych technologii i autorskich rozwiązań.