Технически, эффект, когда кнопка или блок излучают тень, называется "эффект тени". Он создается с использованием свойства box-shadow в CSS.
Свойство box-shadow позволяет добавить тень к элементу, задавая ее параметры. Например, для создания простой тени, вы можете указать ее цвет, смещение относительно элемента, размытие и размеры тени.
Вот пример простой тени на кнопке:
.button {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
Этот код добавит к кнопке тень, которая будет отображаться под ней. Здесь значения свойства box-shadow состоят из следующих частей:
1. Горизонтальное смещение: 0px означает, что тень не будет смещаться по горизонтали относительно элемента.
2. Вертикальное смещение: здесь указано значение 2px, что значит, что тень будет смещена на 2 пикселя вниз относительно элемента.
3. Размытие: это значение 4px определяет расплывание тени. Чем больше значение, тем более размытой будет тень.
4. Цвет тени: используется rgba(0, 0, 0, 0.25), где rgba - это цвет в формате красный/зеленый/синий/альфа. Здесь тень будет черной с прозрачностью 25%.
Вы можете настроить эти значения в соответствии с вашими потребностями и предпочтениями, чтобы создать различные визуальные эффекты тени. Также, помимо указания отдельных значений, можно использовать ключевые слова, такие как "inset" (тень внутри элемента) или "none" (тень нет), чтобы создать разные эффекты.
Кроме того, с помощью свойств spread и blur вы можете создавать более сложные визуальные эффекты тени. Например, свойство spread позволяет расширить размеры тени во всех направлениях, а свойство blur добавляет размытие к тени.
.button {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
В этом примере, значение 0px в spread означает, что размеры тени будут совпадать с размерами элемента, а значение 0px в blur указывает, что тень не будет размытой.
Таким образом, эффект тени в CSS - это возможность добавить визуальное излучение или объемность к элементу, путем применения тени с использованием свойства box-shadow. Вы можете настраивать различные параметры этого эффекта, чтобы получить желаемый результат на кнопках, блоках или других элементах вашего веб-сайта.