3 способа использовать box-shadow в CSS

Animat House

Тени помогают сделать визуальные элементы сайта интересными и эстетически привлекательными. В этой статье описывается свойство box-shadow в CSS и как его настроить.

Что такое свойство box-shadow?

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

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

Первые четыре значения следующие.

x смещение, задающее горизонтальное положение тени.

y смещение, задающее вертикальное положение тени.

радиус размытия, радиус размытия, влияющий на резкость тени. Чем выше значение, тем менее насыщенной является тень, и наоборот.

Четвертое значение определяет распространение тени.

Все значения, кроме радиуса размытия, могут быть отрицательными. Если вы создадите тень, как описано выше, тень появится в нижней части объекта. Однако если значения изменятся на отрицательные, тень окажется сверху.

3 способа использовать box-shadow в CSS

Если разброс установлен на 0px, тень будет иметь тот же размер, что и элемент. Положительные значения делают тень больше, отрицательные — меньше.

Как сделать тень реалистичной

Следующее значение свойства — цвет. Используйте цвет rgba() в альфа-канале для установки непрозрачности. Это важно для реалистичного вида, поскольку тени в светлых областях не являются чисто черными и не слишком темными. Вы можете наблюдать, как ведут себя тени по отношению к источнику света и поверхности, на которой они находятся. Темные тени падают на слои, расположенные ближе к объекту съемки, и размывают их вдали. Таким образом, тени не выглядят как черные контуры.

ЧИТАТЬ ЕЩЁ:  Вирусы в интернете - можно ли подцепить вирус при простом посещении сайта

Почему фильтр dropshadow() не является необходимым

Этот фильтр добавляет тень вокруг изображения. Его функция сильно отличается от функции box-shadow. В этом и заключается разница в коде:

3 способа использовать box-shadow в CSS

Основы теневой растушевки

Для тренировки создайте простой HTML-контейнер.

Вот что вы получите:.

3 способа использовать box-shadow в CSS

Как использовать box-shadow с псевдоклассом :hover и свойством transform

Тени рамки могут быть затронуты псевдоклассом :hover. Добавьте тени к элементам, которые не имеют теней, или измените существующие тени. Использование свойства transform.

Свойство transform создает иллюзию, что блок плавает на странице. Функция translate() изменяет размер окна.

Добавьте ключевое слово inset, чтобы поместить тень в рамку блока или элемента. Благодаря этому блок как бы погружается в страницу.

Вы можете изменять значение сколько угодно. Вот как выглядит тень в примере :

3 способа использовать box-shadow в CSS

Альтернативой translate() является scale(). Если translate() изменяет положение тени по осям x и y, scale() увеличивает размер блока по той же оси. Во втором поле добавьте значение scale() к :hover. Размер блока будет увеличен в 1,1 раза.

Создание многослойных теней

Если значения разделены запятыми, тени будут накладываться друг на друга. Этот метод помогает создать тени, которые плавно переходят в страницу. См.

Значение спреда не указано. В данном случае в этом нет необходимости, но экспериментировать никому не запрещено.

Установив значения Offset и Blur Radius на 0 и добавив одно значение Drop Shadow, вы добавите границу к блоку.

Технически эта граница является тенью, так как блок родительского элемента не занимает никакого пространства. Результаты двух методов показаны ниже. Обратите внимание на плавную, едва заметную тень на левой панели.

3 способа использовать box-shadow в CSS

Свойства можно использовать для любого элемента. Хорошо работает с карточками, полями ввода, изображениями и кнопками.

ЧИТАТЬ ЕЩЁ:  5 решений для доступа к заблокированной панели администрирования WordPress

3 способа использовать box-shadow в CSS

Создание неоновых теней

На практике тени часто бывают серыми или черными, с разной степенью прозрачности. Чтобы изменить цвет тени, необходимо изменить источник света. В Интернете используйте box-shadow. Давайте попробуем на примере:.

3 способа использовать box-shadow в CSS

Если тени многослойные, их можно сделать ярче.

3 способа использовать box-shadow в CSS

Такие тени лучше всего смотрятся, когда контрастные цвета нанесены на темный фон. Вы можете изменить яркость с помощью прозрачности.

3 способа использовать box-shadow в CSS

Создание новых форм теней

Визуально интересные эффекты, имитирующие реальные объекты, как в 3D с минимальными настройками. Первые два создаваемых эффекта включают плоские элементы, которые как бы парят над страницей, отбрасывая тени на фон. Это все равно, что смотреть на наложенное изображение.

Рельеф также может быть направлен в глубину: изображение теперь больше похоже на тень.

Вот результат. Белая тень указывает направление "источника света" и действует как блик. Это похоже на реальный мир:

3 способа использовать box-shadow в CSS

Давайте создадим переключатель, который пользователь может "нажать".

3 способа использовать box-shadow в CSS

Сначала создайте блок управления.

Добавьте значок. В данном примере иконка взята из Font Awesome.

Укажите свойства, которые необходимо отображать при нажатии на кнопку. Добавьте тень от коробки внутрь круга, чтобы создать два вложенных слоя.

Установите цвет значка после щелчка.

3 способа использовать box-shadow в CSS

Поддержка box-shadow в браузерах

К сожалению, не все браузеры, особенно старые, поддерживают box-shadows. Поэтому необходимо использовать расширения webkit.

Например, Chrome версий от 4 до 9 требует префикс -webkit- для корректного отображения. Mozilla Firefox версий 2 и 3 не поддерживает свойство webkit и поддерживает части версий 3.5 и 3.6 (с префиксом -moz-). Safari частично поддерживает функции версий 3.1 и 4, с префиксом -webkit-. Opera поддерживает все версии, кроме версии 10.1, а Microsoft Edge работает нормально.

Если браузер не поддерживает тени, они просто не отображаются и не влияют на макет.

ЧИТАТЬ ЕЩЁ:  15 лучших сервисов и сайтов для изучения английского новичками

Тени — это здорово, но при неправильном использовании они могут испортить весь проект. Вот несколько советов, которые следует иметь в виду при формировании теней

Чем меньше вы используете, тем лучше. Когда применяются тени, браузер выполняет больше работы. Это не является проблемой на современных устройствах, но, возможно, если вы создаете проект для старого устройства или аудитории с плохими условиями доступа в Интернет, не переусердствуйте.

Необходима логика. Не перемещайте тени случайным образом. Должен быть источник света, который воздействует на объекты на странице. Поэтому в размещении теней есть своя логика.

Анимация отсутствует. Анимируйте тени кадров, производительность пострадает. Затем сверху появляется движущаяся тень.

Используйте инструменты для нанесения тени. Если вы устали писать много строк кода и вам нужна многослойная тень, попробуйте shadows.brumm.af. Добавьте до 10 уровней затенения объекта и сэкономьте время на ручном вводе нескольких значений.

Оцените статью