Как сверстать такой эелемени?

Question

[One of Us]

Добрый день!

У меня возникла такая сложность в простом LP сверстать вот эти картинки с тенью.
В фотошопе, если растрировать тень и картинку, объединить слои, то при экспорте он сохраняет картинку, как на третьем рисунки. Но мне нужна именно тень как на макете. А на втором рисунке так выглядит тень еще до растрирования, если ей убрать эффекты. Подскажите как можно нормально сохранить такую картинку, и как лучше сверстать этот отрезок макета?

Comments

[Ярослав Иванов]

Дизайнеру руки оторвите, который так макет собирает.

[HamSter]

Обратитесь к дизайнеру! Это недопустимо! Пусть переделывает! Либо если уж все так плохо, наложите текст(position ... z-index) вариантов есть несколько. Либо фоном делайте эту картинку.

[One of Us]

HamSter: Спасибо большое, попробую)

Answer 1

[Данил Сысоев]

Может я сбредил, но мне кажется, что в этой ситуации очень хорошо справится SVG.
А потом fill: linear-gradient();
Во-первых, качество не потеряется даже на самом широком экране.
Во-вторых, меньше картинок подгружаем.
В-третьих, если вдруг захотите изменить цвет, то Вам не нужно будет изменять картинку и грузить новую, просто измените цвет в css.

Comments

[Максим]

самый дельный совет , на свг и не надо всякой шляпы ... +5

Answer 2

[Urvin]

Создать новый пустой слой под слоями с эффектами и merge down (так Ctrl+E называется?)

Comments

[One of Us]

Я в фш не шарю до такой степени) ПОпробую порыскать и сделать) спасибо)