6.1 Właściwość box-shadow
Właściwość box-shadow w CSS jest używana do dodawania cienia do elementów. Dzięki niej można tworzyć różnorodne efekty wizualne, poprawiając wygląd stron internetowych. Przyjrzyjmy się dokładniej składni, wartościom i przykładom użycia box-shadow.
Składnia box-shadow
Właściwość box-shadow przyjmuje jedno lub więcej wartości, z których każda określa parametry cienia. Ogólna składnia wygląda tak:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Wartości:
offset-x: poziome przesunięcie cienia. Dodatnie wartości przesuwają cień w prawo, ujemne — w lewooffset-y: pionowe przesunięcie cienia. Dodatnie wartości przesuwają cień w dół, ujemne — w góręblur-radius: promień rozmycia cienia. Im większa wartość, tym bardziej rozmyty będzie cień. Domyślna wartość to 0 (cień bez rozmycia)spread-radius: promień rozszerzenia cienia. Dodatnie wartości zwiększają rozmiar cienia, ujemne — zmniejszają. Domyślna wartość to 0color: kolor cienia. Obsługiwane są wszystkie formaty kolorów CSS
6.2 Przykłady użycia
Podstawowy cień:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Podstawowy cień</div>
</body>
Cień z rozmyciem:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Cień z rozmyciem</div>
</body>
Cień z rozszerzeniem:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Cień z rozszerzeniem</div>
</body>
Cień wewnętrzny:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Cień wewnętrzny</div>
</body>
6.3 Ustawienia box-shadow
Szczegóły ustawień box-shadow:
Przesunięcie cienia (offset-x i offset-y)
- Dodatnie wartości: cień przesuwa się w prawo (
offset-x) i w dół (offset-y) - Ujemne wartości: cień przesuwa się w lewo (
offset-x) i w górę (offset-y)
Rozmycie cienia (blur-radius)
- Wartość 0: cień będzie wyraźny, bez rozmycia
- Dodatnie wartości: im większa wartość, tym bardziej rozmyty będzie cień
Rozszerzenie cienia (spread-radius)
- Dodatnie wartości: cień zwiększa się w rozmiarze
- Ujemne wartości: cień zmniejsza się w rozmiarze
Kolor cienia (color)
Kolor może być określany w różnych formatach: nazwa koloru, kod szesnastkowy, RGB, RGBA, HSL, HSLA.
Cień wewnętrzny (inset)
Słowo kluczowe inset tworzy cień wewnątrz elementu, co może być używane do tworzenia efektu wklęsłości.
Wiele cieni z różnymi parametrami:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Wiele cieni</div>
</body>
GO TO FULL VERSION