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 (необязательно): Изменяет тень с внешней (outset) на внутреннюю.

Например:

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

Шпаргалка

Свойство box-shadow добавляет эффекты тени к элементам:

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

horizontal-offset: Горизонтальное смещение (положительное = вправо, отрицательное = влево)
vertical-offset: Вертикальное смещение (положительное = вниз, отрицательное = вверх)
blur (необязательно): Радиус размытия (чем больше значение, тем сильнее размытие)
spread (необязательно): Радиус растяжения (положительное = расширение, отрицательное = сжатие)
color (необязательно): Цвет тени
inset (необязательно): Создает внутреннюю тень вместо внешней

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

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

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

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