Тень от картинки, а не от блока?

Question

[Olexandr Strykhotskyi]

Здравствуйте. На изображении ниже представлен скриншот с каталога товаров моего ИМ. Работает это следующим образом: есть сами стикеры, вместе с тенью, в png24, и фон, джипегом, который пропадает при наведении.
Эти пе-ен-гэ с тенью весят довольно много, что не странно, поэтому хотелось бы узнать, можно, ли как то реализовать эту тень внутри пнг средствами css?

Answer 1

[dom1n1k]

Средствами CSS это сделать нельзя.

Можно через Canvas, но это будет довольно муторно и громоздко.

Ещё умеют отбрасывать тени SVG-картинки, но векторные. Чисто теоретически... можно попробовать поковыряться в сторону того, чтобы завернуть PNG в SVG контейнер, потом фильтрами наложить маску и отбросить тень. Но если и получится, то будет опять-таки громоздко. И почти наверняка не будет работать в IE10-.

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

Но вообще, кмк, всё же лучше не морочить себе голову, а оставить картинки как есть.

Answer 2

[Андрей Хохлов]

Ну гуглится же моментально: stackoverflow.com/questions/3186688/drop-shadow-fo...

А ещё сравните вес pngшек ваших с тенью и без, стоит ли игра свеч.