Как добавить тень прозрачной картинке через CSS свойства?

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

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

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

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

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

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

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

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

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

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

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

Метки: CSS

Рубрика: CSS, Как сделать?