Как сделать тени в письме?

Question

[nwtoneseo]

Нужно сделать тени для блоков в email вёрстке, который будут работать на всех почтовых клиентах, включая адаптивные версии, важно учитывать что необходимо иметь одинаковую тень со всех 4 сторон.

Код тени:

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.10);

Пример блока:

Answer 1

[Артур Кох]

Объясни заказчику, что реализовать это везде не получится.

Мотивация:
- Тени работают не во всех почтовых движках рендеринга
- Рисовать тени картинками ненадежно, так как письмо станет очень чувствительным к контенту и рассыпется при малейшем чихе

Самое элегантное решение:
- Реализовать тень через box-shadow
- Прописать border 1px solid таким цветом, чтобы он сливался с css-тенью. Таким образом там, где css свойство box-shadow не поддерживается, останется аккуратная рамка вместо пустого белого фона.

Этот принцип называется graceful degradation. Мы нежно сглаживаем проблемы там, где отсутствует современная поддержка.

Comments

[Артур Кох]

Также уйди от использования rgba указания цвета в сторону #xxx. Это будет более надежным

Answer 2

[Евгений]

селектор {
box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет;
}

Answer 3

[Saboteur]

Нет, нельзя так сделать чтобы во всех клиентах.

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

Answer 4

[CityCat4]

Нужно сделать тени для блоков в email вёрстке, который будут работать на всех почтовых клиентах

Задача не имеет решения. Поступившее мне письмо я имею полное право пропустить через фильтр, который "обдерет" с него весь html, оставит только голый текст. Многие корпоративные почтовики именно так и делают.
Почту читают гораздо большим числом способов, чем браузерный клиент.

Answer 5

[Артем Чуканов]

"На всех почтовых клиентах" не получится. MS Outlook и браузерная Яндекс-Почта не поддерживают box-shadow и тени там при крайней необходимости можно делать только через полупрозрачные пнг-изображения.