CSS Box Shadow: создание эффектов тени с помощью CSS

Свойство box-shadow в CSS позволяет создавать тени вокруг элементов на веб-странице. Оно предоставляет возможность добавлять глубину и объемность элементам, делая дизайн более привлекательным и интересным.

Синтаксис свойства box-shadow выглядит следующим образом:

<pre class="html">box-shadow: горизонтальное_смещение вертикальное_смещение размытие_тени расстояние_распространения цвет_тени внутренняя_тень;

Проанализируем каждый компонент в синтаксисе:

1. Горизонтальное смещение (horizontal offset) - задает смещение тени по горизонтали. Положительное значение сдвигает тень вправо, а отрицательное - влево. Например, если мы хотим поместить тень на 10 пикселей вправо, то зададим значение "10px", а если нам нужно сдвинуть тень на 5 пикселей влево, то указываем значение "-5px".
2. Вертикальное смещение (vertical offset) - определяет смещение тени по вертикали. Аналогично горизонтальному смещению, положительное значение сдвигает тень вниз, отрицательное - вверх.
3. Размытие тени (blur radius) - задает степень размытия тени. Это значение указывается в пикселях. Чем больше значение, тем более размытой будет тень. Если мы хотим создать четкую тень без размытия, указываем значение "0".
4. Расстояние распространения (spread distance) - определяет расстояние, на которое распространяется тень. Положительное значение увеличивает тень, отрицательное - уменьшает.
5. Цвет тени (shadow color) - определяет цвет тени. Мы можем использовать любой цвет, задавая его в шестнадцатеричном формате или используя названия цветов, такие как "red", "blue", "green" и т.д.
6. Внутренняя тень (inset shadow) (необязательно) - задает, будет ли тень внутренней или внешней. Значение "inset" указывает, что тень будет внутренней, т.е. отображаться внутри элемента.

Посмотрим на примеры кода, чтобы лучше понять, как использовать свойство box-shadow:

Пример 1:

.box {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 10px #888888;
}

В приведенном выше примере создается простая тень для элемента с классом "box". Тень смещена на 5 пикселей вправо и 5 пикселей вниз, имеет радиус размытия 10 пикселей и серый цвет (заданный в шестнадцатеричном формате).

Пример 2:

.button {
  padding: 10px 20px;
  background-color: #f2f2f2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.5);
}

В данном примере создается кнопка с классом "button", у которой есть две тени - внешняя и внутренняя. Внешняя тень имеет радиус размытия 5 пикселей и полупрозрачный черный цвет (заданный в формате RGBA). Внутренняя тень также имеет радиус размытия 5 пикселей, но с полупрозрачным белым цветом.

Теперь вы можете использовать свойство box-shadow для создания теней в ваших веб-проектах, чтобы придать им более глубокий и объемный вид.