Тень блока

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 42 из 76.

В CSS свойство box-shadow используется для добавления эффектов тени к блоку элемента. Это свойство позволяет создавать визуально привлекательные эффекты, благодаря которым элементы выглядят так, будто они «выступают» со страницы, или создают глубину и объём.

Вот базовый синтаксис использования свойства box-shadow:

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

horizontal-offset: горизонтальное расстояние от элемента до тени. Положительные значения перемещают тень вправо, а отрицательные — влево.

vertical-offset: Вертикальное расстояние тени от элемента. Положительные значения перемещают тень вниз, а отрицательные — вверх.

blur (необязательно): радиус размытия тени. Чем больше значение, тем более размытой будет тень. Если его пропустить, по умолчанию используется значение 0 (без размытия).

spread (необязательно): радиус распространения тени. Положительные значения заставляют тень расширяться, а отрицательные — сжиматься.

color (необязательно): цвет тени. Его можно указать с помощью именованных цветов, шестнадцатеричных значений, значений RGB или значений HSL.
inset (необязательно): изменяет внешнюю тень (outset) на внутреннюю тень.

Например:

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

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

В этом примере все элементы <div> имеют box shadow с горизонтальным смещением 5px, вертикальным смещением 5px, радиусом размытия 10px и цветом gray. Элементы с классом button имеют box shadow с горизонтальным смещением 2px, вертикальным смещением 2px, радиусом размытия 5px, spread радиусом 2px и полупрозрачным цветом black (rgba(0, 0, 0, 0.5)).

Задание

Легко

Вам дан HTML-документ с элементом div (<div>) и абзацем (<p>). Ваша задача — использовать свойство box-shadow, чтобы добавить этим элементам эффекты тени. Выполните следующие шаги:

Напишите правило CSS, нацеленное на элемент <div>. Установите значение box-shadow равным 10px 10px 5px gray.
Напишите правило CSS, нацеленное на элемент <p>. Установите значение box-shadow равным -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Попробуйте сами

<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>