Как сделать тень для картинки в css
Перейти к содержимому

Как сделать тень для картинки в css

  • автор:

CSS — два способа создания тени для картинки

Столкнулся с интересным примером или задачей — не знаю, как сказать.

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

box-shadow
text-shadow

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя — повторение мать учения, как говорится.

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

Первый способ — это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут — не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

Картинка, обернутая в блок

.block2 box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6); width: 481px; height: 361px; background: url(images/charlize_theron_2.jpg) 0 0 no-repeat; >

Картинка — результат работы этого кода:

Картинка, вложенная в блок в качестве фонового изображения

Код более краткий. Единственный минус — изображение должно быть только в качестве фона для блока.

Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта. … Continue reading

Как наложить тень на картинку?

Есть картинка. Нужно наложить на нее как-бы прозрачную, черного цвета пленку, чтобы картинка была тусклой.
Я написал так:

Но почему-то не работает. Что я пишу не так?
Отслеживать
user262779
задан 27 фев 2019 в 15:01
319 1 1 серебряный знак 12 12 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

А Вы точно уверены, что Вам нужна тень? Или всё-таки равномерный полупрозрачный слой поверх всей картинки? Если слой, то с помощью box-shadow Вы такого эффекта не добьётесь — придётся использовать дополнительный элемент.

К сожалению, у img нет своих псевдоэлементов, поэтому как вариант — обернуть картинку в блок и уже с помощью его :after наложить плёнку на изображение:

.img-wrap < float: left; position: relative; >img < max-width: 100%; display: block; margin: 0; >.img-wrap:after
 

Функция drop-shadow()

Стилевая функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Синтаксис

filter: drop-shadow(   );
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

<сдвиг по x>Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр. <сдвиг по y>Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр. Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой. Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color .

Пример

Корзина с тенью

drop-shadow() .shadow

Результат данного примера показан на рис. 1. Обратите внимание, что тень повторяет линии изображения.

Тень в изображении

Рис. 1. Тень в изображении

Примечание

Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

13 18 53 15 40 6 9.1 35
4.4 35 37 6.1 9.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • backdrop-filter
  • filter
  • Фильтр
  • Функция blur()
  • Функция brightness()
  • Функция contrast()
  • Функция grayscale()
  • Функция hue-rotate()
  • Функция invert()
  • Функция opacity()
  • Функция saturate()
  • Функция sepia()

Рецепты

  • Как размыть изображение?
  • Как размыть текст?
  • Как размыть фоновую картинку?
  • Как сделать картинку чёрно-белой?

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

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

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

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

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

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

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

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

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

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

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *