Возможно ли такое реализовать на табличной вёрстке?

Question

[Cоломон Геннадьевич]

Решил сверстать HTML письмо, набросал дизайн в ФШ и тут бац! столкнулся с проблемой.



Я хотел чтобы "заголовок" был поверх желтой линии и белой обводкой текст сделать, чтобы "разрывы" по бокам такие получились. Но не получается никак реализовать. Это вообще реально? Где можно подучить табличную верстку?

Answer 1

[Антон Неверов]

Я вижу вёрстку таблицы вот так:


Т.е. декор - это отдельные ячейки таблицы, внутри них - картинки с белым/прозрачным фоном, текст посередине - так же ячейка, а стена текста - это colspan="3".

Comments

[Cоломон Геннадьевич]

Так а если заголовок меняется? Он не будет всегда одним и тем же словом. Там могут быть и 3 буквы и 10

[Антон Неверов]

Тут сложнее, нужно отестировать.
Но, думаю, можно сделать боковые полосы с помощью background-image. И background-size: 100%. И привязать их к краям. Левую - к правому краю, правую - к клевому, с помощь background-position. Таким образом, если центральная колонка будет расширятся или сужаться, то боковые будут ездить туда-сюда, обрезаясь, как нужно.

Answer 2

[Евгений]

Реально.

Answer 3

[Perfecto Web]

Табличную верстку вовсе нужно оставить в покое, уже как лет 8. А для писем, на 2019г. вполне реально использовать обычную, адаптируемую верстку без таблиц. Более 98% любых современных вьюверов/почтовых ящиков и т.д. поддерживают все это.

Относительно заголовка.
Самое банальное и первое (без canvas и прочего), что приходит в голову, это порезать 2 картинки боков, включая все 3 цвета и полоски. Далее через CSS :before + :after поставить у заголовка.



Логика:
PS: в реальности подбирать все самому.

HTML:
<h1><span>ЗАГОЛОВОК</span></h1>

CSS:

h1 {
height: 60px;
background: #f7ce46;
text-align:center;
}
h1 span {
position: relative;
background #fff;
padding:0 20px;
}
h1 span:after {
 position: absolute;
display: inline-block;
background url(../path/to/left.png) no-repeat;
background-size: Npx Mpx; /* цифры подбирать на месте */
left: -20px; /* цифры подбирать на месте */
}
h1 span:before {
 position: absolute;
display: inline-block;
background url(../path/to/right.png) no-repeat;
background-size: Npx Mpx; /* цифры подбирать на месте */
right: -20px; /* цифры подбирать на месте */
}

Comments

[Полина Емельянова]

НАСТОЯТЕЛЬНО не рекомендую использовать данное решение.
https://www.campaignmonitor.com/css/selectors/before/

Поддержка псевдоэлементов у Почтовых Клиентов очень слабая.
Тут, по уму, или градиентом или имиджем отбиваться надо.

Answer 4

[Максим Елизаров]

Вполне себе реально =)

Резать шаблон нужно как показал Антон Неверов в первом ответе
Для верстки писем используйте mjml
Вот ТУТ набросал на скорую руку одно из решений, там можно поиграть и html получить