Box Shadow

Часть раздела Styling with 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 (необязательно): Меняет тень с внешней на внутреннюю.

Например:

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

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

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

Задание

Легко

Вам дан документ HTML с блоком (<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>