Cień pudełka

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 42 z 76.

W CSS właściwość box-shadow służy do dodawania efektów cienia do obramowania elementu. Dzięki tej właściwości możesz tworzyć atrakcyjne wizualnie efekty, które sprawiają, że elementy wydają się „wyskakiwać” ze strony, albo tworzyć głębię i przestrzenność.

Oto podstawowa składnia użycia właściwości box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Pozioma odległość cienia od elementu. Wartości dodatnie przesuwają cień w prawo, a ujemne w lewo.

vertical-offset: Pionowa odległość cienia od elementu. Wartości dodatnie przesuwają cień w dół, a ujemne — w górę.

blur (opcjonalnie): Promień rozmycia cienia. Większa wartość powoduje większe rozmycie cienia. Jeśli pominięty, domyślnie wynosi 0 (brak rozmycia).

spread (opcjonalnie): Promień rozmycia cienia. Wartości dodatnie powodują rozszerzenie cienia, a ujemne jego zmniejszenie.

color (opcjonalnie): Kolor cienia. Można go określić za pomocą nazw kolorów, wartości szesnastkowych, wartości RGB lub HSL.
inset (opcjonalnie): Zmienia cień z zewnętrznego (outset) na wewnętrzny.

Na przykład:

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

W tym przykładzie wszystkie elementy <div> mają cień pudełka z poziomym przesunięciem 5px, pionowym przesunięciem 5px, promieniem rozmycia 10px i szarym kolorem. Elementy z klasą button mają cień pudełka z poziomym przesunięciem 2px, pionowym przesunięciem 2px, promieniem rozmycia 5px, promieniem rozprzestrzeniania 2px i półprzezroczystym czarnym kolorem (rgba(0, 0, 0, 0.5)).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z elementem div (<div>) i akapitem (<p>). Twoim zadaniem jest użycie właściwości box-shadow, aby dodać efekty cienia do tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div>. Ustaw box-shadow na 10px 10px 5px gray.
Napisz regułę CSS, która wybiera element <p>. Ustaw box-shadow na -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Spróbuj swoich sił

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>