Народ, всем привет. Сегодня мы немного поговорим о тени, и обсудим важные моменты, ведь довольно часто начинающие разработчики и дизайнеры не до конца понимают все возможности данного инструмента. Ну и конечно, совершают ошибки, о которых мы тоже сегодня вспомним. Мы не будем сильно вдаваться в подробности и в примеры использования тени, но все же обговорим несколько базовых нюансов. Во-первых, тень можно создать одним простым способом, использовать box-shadow.
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
- первый показатель: x-offset, определяет горизонтальное положение тени;
- второй показатель: y-offset, определяет вертикальное положение тени;
- третий: радиус размытия, который влияет на резкость тени. Чем выше значение, тем менее насыщенные тени, и наоборот;
- и наконец, четвёртое значение определяет распространение тени.
Все значения, кроме радиуса размытия, могут быть отрицательными. Если установить распространение на 0px, тень будет такого же размера, что и элемент. Положительное значение сделает тень больше, отрицательное — уменьшит. Кстати, последнее значение в свойстве — цвет. Используйте цвета rgba() с альфа-каналом, чтобы указывать непрозрачность: это важно для стилизации под реальность, ведь тени в хорошо освещённых местах не чисто чёрные и не слишком плотные.
Кстати, Вам может быть это интересно:
Еще один способ сделать тень, это использовать фильтр и его свойство dropshadow()
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
По сути кажется, что это одно и тоже, но на самом деле это не совсем так. Box-shadow отображает тень вокруг всего элемента, блочного элемента, а filter: drop-shadow() создает тень вокруг внутренней части без прозрачной оболочки. Простыми словами, проще всего объяснить на тексте. Первый создать общую тень вокруг всего текстового элемента, как бы бокса, куда этот текст размещен. А второй создаст тень именно к самому тексту, буквам.
Но по большей части, именно для текста filter: drop-shadow мы и используем, тогда как для всего остального лучше всего подходит именно box-shadow. Ну либо если нам вдруг надо отобразить тень внутри картинки или отдельного элемента.
Чаще всего тени используют для создания вплывающих окон, выразительных элементов и кнопок. И вот тут данный инструмент раскрывается в полной красе, особенно если уметь его использовать. И использовать его нужно с псевдоквасом :hover и свойством box-shadow
.box: hover{
box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
transform: translateY(-5px);
}
Именно в таком сочетании визуально будет эффект нажатия кнопки и ее плавного небольшого смещения, как будто она проваливается во внутрь. Кстати, ключевое слово inset, помогает поместить тень внутрь рамки блока или элемента. Так блок будет казаться погружённым в страницу.
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
Еще некоторые интересные способности теней:
- создание многословной тени, когда вы можете использовать для одной тени сразу несколько значений. Это позволит создать более плавные или объемные тени, или окружить объект тенями со всех сторон.
- важно не забывать, что тени могут быть не только черные, но и, например белые, а если провернуть это дело на черном фоне, да с небольшой синевой, и наложить несколько теней, то можно сделать неоновую тень:
box-shadow: 0px 1px 2px 0px rgba(0,255,255,0.7),
1px 2px 4px 0px rgba(0,255,255,0.7),
2px 4px 8px 0px rgba(0,255,255,0.7),
2px 4px 16px 0px rgba(0,255,255,0.7);
- еще момент, если сделать вверху светлую тень, а внизу темную, то получиться интересный эффект 3D объекта
box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5),
inset 10px 10px 15px rgba(70, 70, 70, 0.12);
Немного о важных замечаниях и ошибках
Один из самых важных – это сохранение источника света. Помните, что все тени на вашей странице в одном дизайне (и даже лучше на всем сайте) должны быть в одну сторону и с одинаковым смещением (распространением). Считайте, что у вас в комнате висит лампочка, которая и дает эти эффекты тени на всем вашем сайте, и они должны быть одинаковыми. Не надо сильно заворачиваться, и строить их в зависимости от удаления от источника, это уже перебор, но общую концепцию надо соблюдать.
Также лучше не переборщить, не надо делать теней много, или пихать их на каждый элемент. И уж тем более текст, это смотримся убого, и мешает читабельности. И еще – не делайте анимированную тень – смотрится еще хуже. Да и не забывайте, что тени сильно воруют скорость загрузки сайта и влияют на производительность.
И напоследок – не надо изобретать велосипед. На просторах интернета полно ресурсов, на которых вы сможете в реальном времени построить тень для объекта, многослойную или однослойную. поэтому пользуйтесь на здоровье.