Как сделать тень на изображении css

Обновлено: 05.07.2024

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

Свойство принимает составное значение из пяти разных частей: горизонтальное смещение, вертикальное смещение, размытие, растяжение, цвет тени. К тому же можно указать будет ли тень внешней или внутренней.

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Первое значение offset-x - смещение тени по оси X. Положительное значение сместит тень вправо, а отрицательное — влево.

Вертикальное смещение (по оси Y)

Второе значение offset-y - смещение тени по оси Y. Положительное значение сместит тень вниз, а отрицательное — наверх.

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.

Внешняя/внутренняя

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

Несколько теней

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

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.

Эффект парения элемента с помощью box-shadow

Мы можем добавить тень к псевдоэлементу :after и создать тень ниже элемента. Тем самым создавая иллюзию, что элемент был поднят вверх, а потом упал.

Тень и свойство clip-path

Тень возможно сделать не только на элементах в виде блока или круга, но и на более сложных формах с использованием свойства clip-path . Правда свойство box-shadow при этом не сработает и нам придется заменить его другим. Приступим, создадим элемент box-1.

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow() . Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.

Профессиональная разработка сайтов под заказ

Прекрасный способ визуально выразить главную мысль

Полезные инструменты для веб разработчиков

Делимся в опытом и знанием в IT сфере

В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow. Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before, которые поместим за основным объектом (div с классом block).

Взгляните на HTML код, для которого мы будем создавать CSS3 тень:

Далее вы сможете посмотреть готовые примеры и код, необходимый для их реализации. С целью минимизации текста на странице, мы опустим CSS свойства с браузерными префиксами. Полный код можно увилдеть, нажав на соответствующую примеру ссылку "Пример".

Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.

Как сделать тень блока с помощью свойства box-shadow

Поддержка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис свойства box-shadow

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

Каждая тень является отдельной тенью, представленной от 2 до 4-х значений длины, необязательным цветом и необязательным ключевым словом inset . Допустимые длины 0 ; опущенные цвета по умолчанию равны значению свойства color .

Свойство не наследуется.

Рис. 1. Синтаксис свойства box-shadow

box-shadow
Значения:
x-offset	Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево.
y-offset	Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх.
blur	Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени.
растяжение	Задает расстояние, на которое тень увеличивается. Положительные значения заставляют тень расширяться во всех направлениях на указанный радиус. Отрицательные значения заставляют тень сжиматься. Для внутренних теней расширение тени означает сжатие формы периметра тени.
цвет	Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color. Для Safari цвет тени указывать обязательно.
inset	Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.
none	Значение по умолчанию, означает отсутствие тени.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие элементы или их тени. С точки зрения контекстов укладки и порядка рисования внешние тени элемента рисуются непосредственно под фоном этого элемента, а внутренние тени элемента рисуются непосредственно над фоном этого элемента (ниже border и border-image , если таковые имеются).

Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

В сегодняшнем небольшом посте хочу разобрать чисто рабочую ситуацию с которой однажды столкнулся. Попадает мне в работу очередной макет для верстки шаблона. В нем присутствовали картинки (png формата) на которых было изображение на прозрачном фоне, вроде бы ничего необычного, но нарисованный элемент был окантован элегантной тенью.

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

Решив эту задачу, она на самом деле не является мега сложной, но как мне кажется может быть весьма полезной и помочь вам если вы однажды столкнетесь с подобны таском 🙂

Да просто добавим box-shadow и делов то …

Обычно в макетах присутствую тени на блоках или jpg картинках, вот для них использование CSS свойства box-shadow является отличным решением проблемы. В нашем же случае применить такое свойство к изображению с прозрачным фоном, не даст нам желаемого результата.

Ниже я добавил пример:

Если открыть вкладку Result в примере выше, то станет понятно, что тень обрамила нашу картинку по периметру, а нам всеже хочется дать тень непосредственно нарисованному объекту.

Даем тень нарисованной картинке

К счастью есть весьма элегантное решение этой задачи. Мы воспользуемся свойством filter.

Синтаксис очень прост: мы задаем первой парой параметром смещение по осям X и Y соответственно, третье значение – это размытие тени, а четвертое собственно цвет в возможных форматах (HEX, rgb(a), hsl(a)).

Вот такое решение поставленной задачи, надеюсь вам это тоже будет полезно и поможет в ежедневной работе, если остались вопрос или свои варианты решения, оставляйте их в комментариях к данному посту – пообщаемся!

От автора: поговорим о тенях в веб-дизайне. Тени добавляют текстуру, перспективу и подчеркивают размеры объектов. В веб-дизайне использование света и тени может добавить физического реализма и может использоваться для создания насыщенных тактильных интерфейсов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Свет и тени

Как мы только что видели, глубина тени может улучшить контент. А что именно создает тень? Свет! Невозможно говорить о тени, не вспоминая о свете. Он контролирует направление тени, а также то, насколько глубокой или неглубокой будет тень. Одно невозможно без другого.

Система дизайна Google Material Design — хороший пример эффективного использования света и тени. Вы наверняка сталкивались с эстетикой Material Design, потому что Google использует ее почти во всех своих продуктах.

Система дизайна берет реплики из физического мира и выражает интерфейсы в трехмерном пространстве с помощью света, поверхностей и отбрасываемых теней. Их рекомендации по использованию света и тени подробно описывают это.

В среде Material Design виртуальный свет освещает пользовательский интерфейс. Ключевые источники света создают более четкие, направленные тени, называемые ключевыми тенями. Окружающий свет появляется со всех сторон, создавая размытые мягкие тени, называемые окружающими тенями.

Тени — это основной компонент материального дизайна. Сравните эти рекомендации с рекомендациями Apple по человеческому интерфейсу для macOS, в которых полупрозрачность и размытость в большей степени являются движущими факторами для создания глубины.

В этом случае свет по-прежнему является важным фактором, поскольку он позволяет элементам сливаться с рабочим столом или даже с другими панелями пользовательского интерфейса. Опять же, это дизайнерский выбор, чтобы использовать такой приём в нашем интерфейсе. В любом случае вы можете увидеть, как свет влияет на визуальное восприятие глубины.

Источники света и цвет

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

Есть два типа теней, которые возникают, когда свет падает на объект: отбрасываемая тень и тень фигуры.

Отбрасываемая тень

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

Тон — это оттенок, смешанный с серым. Значение описывает общую яркость или темноту цвета. Значение тона очень важно в живописи, поскольку это то, как художник переводит свет и отношения между объектами в цвет.

В мире веб-дизайна аспекты цвета являются неотъемлемой частью пользовательского интерфейса средства выбора цвета.

Тень фигуры

С другой стороны, тень фигуры — это сторона объекта, обращенная от источника света. Форма тени имеет более мягкие, менее четкие края. Тени фигуры отображают объем и глубину объекта.

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

Если поверхность находится близко к объекту, тень будет более резкой. Если поверхность находится дальше, тень будет слабее. Это не какие-то абстрактные научные вещи. Это то, с чем мы сталкиваемся каждый день, понимаете вы это или нет.

Свет также может отражаться от сторон объекта или другой поверхности. Яркие поверхности отражают свет, темные — поглощают свет.

Это наиболее ценные аспекты света, которые нужно понимать для веб-дизайна. Физика света — сложная тема, я лишь слегка коснулся ее здесь. Если вы хотите увидеть явные примеры того, какие тени отбрасываются на основе разных источников света, это руководство по рисованию теней для комиксов будет поучительным.

Расположение источников света

Помните, что тени идут рука об руку со светом, поэтому определение источника света — хотя технически его нет — способ создать впечатляющие эффекты тени. Хитрость заключается в том, чтобы последовательно добавлять тени относительно источника света. Источник света, расположенный над элементом, отбрасывает тень под элементом. Размещение источника света слева от элемента отбрасывает тень справа. Размещение нескольких источников света сверху, снизу, слева и справа от элемента фактически убирает тени!

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

Высота

Тени также могут передавать высоту. Еще раз, Material Design — хороший пример, потому что он демонстрирует, как тени используются для создания воспринимаемого разделения между элементами.

Внутренние тени

Говоря о высоте, свойство box-shadow — единственное свойство, которое может создавать внутренние тени для эффекта утопления. Таким образом, вместо того, чтобы подниматься вверх, элемент кажется вдавленным. Это делается благодаря ключевому слову inset.

Это хорошо видно на эффекте, когда кажется, что нажатие кнопки физически нажимает на нее.

CodePen Embed Fallback

Наложение теней

Мы не ограничены одной тенью на элемент! Например, мы можем предоставить список теней, разделенных запятыми для свойства box-shadow. Зачем нам это нужно? Например, более гладкие тени.

CodePen Embed Fallback

Интересные эффекты — другое.

CodePen Embed Fallback

Слои теней могут даже улучшить типографику с помощью свойства text-shadow.

CodePen Embed Fallback

Просто знайте, что наслоение теней немного отличается от filter: drop-shadow(). Его синтаксис также принимает список, но он разделен пробелами, а не запятыми.

Тени накладываются друг на друга в том порядке, в котором они объявлены, где верхняя тень является первой в списке.

Вы, наверное, догадались, что здесь drop-shadow() работает немного иначе. Тень добавляется в геометрической прогрессии, то есть 2^number of shadows — 1. Вот как это работает:

1 тень = (2 ^ 1 — 1). Визуализируется одна тень.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

2 тени = (2 ^ 2 — 1). Визуализируются три тени.

3 тени = (2 ^ 3 — 1). Отрисовано семь теней.

Элемент работает точно так же для SVG.

Тени и доступность

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

увеличивают простоту и скорость поиска компонента при сканировании страниц, и

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

Это не было широкомасштабным научным исследованием или чем-то подобным, так что давайте вернемся и посмотрим, что W3C говорит в своих рекомендациях по стандартам WCAG 2.0:

[…] Дизайнер может затемнить фон за буквой или добавить тонкий черный контур (шириной не менее одного пикселя) вокруг буквы, чтобы сохранить коэффициент контрастности между буквой и фоном выше 4,5: 1.

Речь идет о светлом тексте на светлом фоне. WCAG рекомендует коэффициент контрастности не менее 4,5: 1 между текстом и изображениями. Вы можете использовать тени для текста, чтобы усилить контраст между ними.

Тени и производительность

Прежде чем добавить тени ко всем вещам, стоит отметить, что они действительно влияют на производительность.
Например, для filter: drop-shadow некоторые браузеры поддерживают аппаратное ускорение. Для этого элемента может быть создан новый слой композитора и выгружен в графический процессор. Вы не хотите иметь слишком много слоев, так как это занимает ограниченную память графического процессора и в конечном итоге снижает производительность. Вы можете оценить это в DevTools своего браузера.

Размытие — затратная операция, поэтому используйте ее экономно. Когда вы что-то размываете, это смешивает цвета пикселей по всему выходному пикселю, чтобы получить размытый результат. Например, если ваш параметр blur-radius — 2 пикселя, тогда фильтр должен искать на два пикселя в каждом направлении вокруг каждого выходного пикселя, чтобы генерировать смешанный цвет. Это происходит для каждого выходного пикселя, что означает множество вычислений, которые увеличиваются по экспоненте. Таким образом, тени с большим радиусом размытия обычно обрабатываются медленнее, чем другие тени.

Знаете ли вы, что.

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

А знаете ли вы, что у тени неявно есть элементы z-index? Вот почему тени располагаются ниже других элементов.

А что насчет обрезки и маскировки? Если элемент с box-shadow обрезан (с помощью clip-path) или использует маску (с помощью mask), тень не отображается. И наоборот, если элемент с text-shadow или filter: drop-shadow() обрезан, тень отображается, пока она находится в области обрезки.

И еще одно: мы не можем создавать наклонные тени (с диагональными линиями) с помощью свойств тени. Для этого необходимо создать теневой элемент и использовать для него transform:skew().

CodePen Embed Fallback

Да, и еще: box-shadow следует за border-radius. Если у элемента есть закругленные углы, скругляется и тень. Другими словами, тень отражает форму блока. С другой стороны, filter: drop-shadow() может создавать неправильную форму, поскольку соблюдает прозрачность и повторяет форму содержимого.

Лучшие варианты использования различных типов теней

Практически все в Интернете может иметь тень, и есть несколько свойств и функций CSS, которые создают тень. Но правильный выбор тени — вот что делает тень эффективной. Оценим варианты:

box-shadow: Это свойство CSS создает тени, соответствующие ограничивающей рамке элементов. Он универсален и может использоваться на чем угодно, от карточек до кнопок и практически на всем, где тень просто должна следовать за границей элемента.

text-shadow: Это свойство CSS, которое создает тени специально для текстовых элементов.

filter: drop-shadow(): Свойство CSS является по сути фильтром, но то, что создает тень — это функция drop-shadow, которую оно принимает. Что отличает этот тип тени от, скажем box-shadow , так это то, что он повторяет визуализированную форму любого элемента.

feDropShadow: На самом деле это элемент SVG, а все остальное — свойства CSS. Таким образом, вы могли бы использовать это для создания теней непосредственно в разметке SVG.

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

CodePen Embed Fallback

То же самое и с тенями для текста.

CodePen Embed Fallback

Тени в дикой природе

CodePen Embed Fallback

CSS полагается на существующую структуру DOM в браузере. Невозможно создать новые элементы, кроме ::before и ::after. Иногда мне очень хочется, чтобы у CSS была возможность сделать это напрямую. Тем не менее, мы можем частично компенсировать это, создавая различные тени и градиенты полностью в CSS. Вот почему так интересно работать с drop-shadow. Вместе с text-shadow и box-shadow мы можем сделать гораздо больше.

Просто посмотрите, как он использует тени для создания замысловатых узоров.

CodePen Embed Fallback

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

А как насчет псевдо-элементов?

О да, свойства тени поддерживаются псевдоэлементами ::before и ::after. Другие псевдо-элементы, примающие тени? Псевдо-элемент ::first-letter принимает box-shadow и text-shadow. Псевдо-элемент ::first-line принимает text-shadow.

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

CodePen Embed Fallback

Анимация теней

Да, мы можем заставить их двигаться! Свойства и функции, которые мы здесь рассмотрели, полностью совместимы с анимацией и переходами CSS. Это означает, что мы можем перемещать тени, размывать тени, увеличивать / уменьшать тени (с помощью box-shadow) и изменять цвет.

Анимация тени может дать пользователю сигнал о том, что элемент является интерактивным или что произошло действие. Ранее мы видели в нашем примере кнопки, где тень показывала, что кнопка была нажата. Еще один распространенный шаблон анимации — подъем карты при наведении курсора.

CodePen Embed Fallback

Если вы хотите оптимизировать производительность анимации, избегайте анимации box-shadow! Анимируйте более производительно с помощью drop-shadow(). Но если вам нужна максимально плавная анимация — добавьте псевдоэлемент ::after с большим размером box-shadow и opacity.

CodePen Embed Fallback

Конечно, вы можете анимировать гораздо больше. Я оставлю это исследование на ваше усмотрение!

Заключение

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

Читайте также: