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

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

5d46f323457c4185616868.png

Я хотел чтобы "заголовок" был поверх желтой линии и белой обводкой текст сделать, чтобы "разрывы" по бокам такие получились. Но не получается никак реализовать. Это вообще реально? Где можно подучить табличную верстку?
  • Вопрос задан
  • 164 просмотра
Пригласить эксперта
Ответы на вопрос 4
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
Я вижу вёрстку таблицы вот так:
5d46f56846fc4852337470.jpeg

Т.е. декор - это отдельные ячейки таблицы, внутри них - картинки с белым/прозрачным фоном, текст посередине - так же ячейка, а стена текста - это colspan="3".
Ответ написан
iamd503
@iamd503
Верстальщик
Ответ написан
Комментировать
PerfectoWeb
@PerfectoWeb
Создание сайтов любой сложности
Табличную верстку вовсе нужно оставить в покое, уже как лет 8. А для писем, на 2019г. вполне реально использовать обычную, адаптируемую верстку без таблиц. Более 98% любых современных вьюверов/почтовых ящиков и т.д. поддерживают все это.

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

5d46f6902995d827952944.png

Логика:
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; /* цифры подбирать на месте */
}
Ответ написан
@maximkinn
азъ есмъ
Вполне себе реально =)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы