Цвет текста и фона

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML-письмах фон обычно устанавливается с помощью встроенных стилей CSS. Однако стоит помнить, что многие почтовые клиенты имеют свои особенности и ограничения в поддержке CSS, поэтому нужно выбирать подход, который будет наиболее совместим с большинством почтовых клиентов.","type":"unstyled","key":"5df1t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот несколько методов установки.","type":"unstyled","key":"8vlie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"background-color. Позволяет установить цвет для элемента или другого контейнера в письме.","type":"unordered-list-item","key":"6qnbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"background-image. Можно использовать фоновое изображение. Однако следует учитывать, что не все почтовые клиенты поддерживают эту функцию, и изображение может быть заблокировано некоторыми системами безопасности.","type":"unordered-list-item","key":"e3s51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"base64. Чтобы быть уверенным, что изображение будет отображаться во всех почтовых клиентах, его можно встроить непосредственно в HTML с помощью этого кода.","type":"unordered-list-item","key":"8g7e1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"background-repeat. Если нужно повторить фоновый рисунок, используйте данный параметр.","type":"unordered-list-item","key":"a1p9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"background-attachment. Подходит для создания эффекта фиксированного фона (при прокрутке содержимого страницы он остается неподвижным).","type":"unordered-list-item","key":"1c4i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните, что важно тестировать отображение вашего HTML-письма в различных почтовых клиентах, чтобы убедиться, что всё отображается корректно.","type":"unstyled","key":"1u6q4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно ли использовать только HTML","type":"header-two","key":"6papo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да, можно использовать только HTML, но в этом случае вам придётся ограничиться базовыми возможностями HTML без использования CSS.","type":"unstyled","key":"einr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Свойство background. HTML 5 включает атрибут background для элемента , который позволяет задавать цвет, изображение фона или оба сразу.","type":"unstyled","key":"3fl24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5sn9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Атрибут bgcolor. Задаёт цвет элемента .","type":"unstyled","key":"5p15n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d95uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако стоит отметить, что использование только HTML для стилизации веб‑страниц ограничено, и вы не сможете достичь сложных эффектов и адаптивной вёрстки. CSS обеспечивает более гибкий и мощный способ управления стилями, включая фоновые изображения, повторение, размер и положение, поэтому рекомендуется использовать CSS для стилизации веб‑страниц.","type":"unstyled","key":"83m0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать фон в HTML","type":"header-two","key":"5bm6k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвета в письмах прописывают в виде шестнадцатеричных чисел формата HEX (#444444). Важно помнить, что сокращения HEX обрабатывают не все почтовики, поэтому их в вёрстке рассылок использовать не стоит. Цвета формата RGB тоже работать не будут.","type":"unstyled","key":"21v6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":82,"offset":0,"style":"BOLD"}],"text":"При вёрстке фон задают через атрибуты background=»» и bgcolor=»» для тега .","type":"unstyled","key":"98qcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не все почтовые клиенты обработают фон страницы, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.","type":"unstyled","key":"eqpu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bdou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8ksnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aahgj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвет текста и фона","type":"unstyled","key":"quuv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2t5ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b6pi6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a4acm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cfcl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"4b8h4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"8cjqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dlsu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"l55f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4ec64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используем один цвет","type":"header-two","key":"3ovrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать фон в html выделяющимся и быть уверенным, что","type":"unstyled","key":"1f47v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"он не помешает чтению? Используйте один цвет. Мы рекомендуем сочетать изображения и прописанный код.","type":"unstyled","key":"akifc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Письма, состоящие только из рисунков часто попадают в спам или вовсе не отображаются, если у пользователя отключён просмотр изображений в почтовом ящике.","type":"unstyled","key":"flj7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы ваше письмо выглядело органично должны совпадать три элемента:","type":"unstyled","key":"9ll0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"цвет фона фотографий;","type":"unordered-list-item","key":"vj1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"цвет HTML-блока с текстом;","type":"unordered-list-item","key":"8ate2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"цвет фона alt, если изображения не отображаются.","type":"unordered-list-item","key":"54qh7"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":110}],"inlineStyleRanges":[],"text":"Если вы верстальщик на аутсорсе, до дизайнера не добраться, а гармоничное письмо сделать хочется, используйте этот сервис. Он поможет «вытащить» все необходимые цвета из картинки в уже HEX-формате.","type":"unstyled","key":"3v6hg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Несколько цветов","type":"header-two","key":"62jge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвет может использоваться не только для красоты, но и для упорядочивания блоков письма. Градиент или цветовые разделители отлично подходят для создания «иерархичности» контента и здорово управляют вниманием читателя.","type":"unstyled","key":"6u4t4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хочется сделать блоки письма разного цвета, логично прописать их через атрибуты background=»» и bgcolor=»» в

для каждого.","type":"unstyled","key":"7soc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Совсем простой способ","type":"header-two","key":"c0deo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если только что вы запутались в кодах, рекомендуем обращаться к конструкторам писем — таким как Letteros.","type":"unstyled","key":"9eu1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь перекрасить блоки можно в один клик. А вторым кликом — отформатировать блок в изображение, если это необходимо.","type":"unstyled","key":"9g6tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изображения в качестве фона для письма","type":"header-two","key":"24olv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Некоторые конструкторы позволяют сделать изображения фоном блоков письма. Так можно и в Letteros.","type":"unstyled","key":"974ft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно использовать рисунок как фон и для всего письма. Но его будет видно подписчикам только с десктопа. На большинстве мобильных устройств эти изображения вообще не отображаются. Благодаря картинкам на фоне всего письма ваши рассылки будут более впечатляющими и тематическими.","type":"unstyled","key":"dbslr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На тело письма такая масштабная картинка никак не повлияет. Вы всё также можете размещать поверх неё баннеры, товарные раскладки, рамки, футер, хедер и любые другие блоки.","type":"unstyled","key":"d4mt5"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":14,"offset":164}],"inlineStyleRanges":[],"text":"Подбирая картинку на фон, важно помнить о стыках. Это как с обоями в комнате: паттерн должен хорошо смотреться, если отойти подальше и смотреть на всю комнату. \nНа этой платформе от Campaign Monitor вы можете подобрать «пуленепробиваемый» фон для вашей рассылки и быть уверенным, что он будет выглядеть отлично на всех ОС. Здесь же прописаны HEX-цвета для кода и сам кусочек кода, который вставляется в .","type":"unstyled","key":"dodtv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правила работы с фоном‑картинкой","type":"header-two","key":"eoeng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При добавлении фоновых изображений в имейлы важно помнить о некоторых особенностях.","type":"unstyled","key":"fi39n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Картинки, которые вы выбираете, должны быть тематическими и не отвлекать от основного сообщения письма.","type":"unordered-list-item","key":"81hqp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляйте только одно изображение как фон для всего имейла. Это повышает читабельность, в то время как разные рисунки только «намусорят» в письме.","type":"unordered-list-item","key":"4e85s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если используете конструктор, включайте адаптивность. Это поможет корректно отображать фон на мобильных и десктопных устройствах.","type":"unordered-list-item","key":"a9tog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текстура","type":"header-two","key":"2il0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы сделать фон страницы в HTML текстурным, можно использовать фоновое изображение с текстурой.","type":"unstyled","key":"524or"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала нужно выбрать подходящее изображение с текстурой, которую вы хотите использовать в качестве фона. В интернете есть множество бесплатных текстурных рисунков, или вы всегда можете создать свой собственный вариант.","type":"ordered-list-item","key":"8ftqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убедитесь, что выбранное изображение имеет подходящий размер и пропорции. Обычно текстурные изображения небольшого размера с повторяющимся узором.","type":"ordered-list-item","key":"ebrlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того, как вы выбрали текстурное изображение, вставьте его в качестве фонового изображения для элемента вашего HTML-документа.","type":"ordered-list-item","key":"9ic78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В CSS вы можете также уточнить параметры фонового изображения: повторение, положение, размер и другие. Можно использовать `background-repeat: repeat-x;` для повторения текстуры только по горизонтали или `background-size` для изменения размера.","type":"ordered-list-item","key":"c83gv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно протестировать отображение текстуры в различных браузерах и на разных устройствах, чтобы убедиться, что она отображается корректно и выглядит эстетично.","type":"ordered-list-item","key":"dnhrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полупрозрачный фон","type":"header-two","key":"nit0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В CSS можно использовать свойство background-color с указанием значения RGBA (красный, зелёный, синий и альфа‑канал). Альфа‑канал определяет прозрачность цвета, где 0 означает полную прозрачность, а 1 — полную непрозрачность.","type":"unstyled","key":"8o7gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот пример, как это можно сделать:","type":"unstyled","key":"fihtq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".transparent-bg {","type":"unstyled","key":"6dphj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью 0.5 */","type":"unstyled","key":"1dcj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4oe4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере rgba(255, 255, 255, 0.5) указывает белый цвет с прозрачностью 50%. Вы можете изменить значения красного, зелёного и синего каналов (первые три числа) в соответствии с вашими предпочтениями, а также изменить значение альфа‑канала (последнее число) для управления уровнем прозрачности.","type":"unstyled","key":"4id9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы также можете использовать шестнадцатеричное значение альфа‑канала, где 00 означает полную прозрачность, а FF — полную непрозрачность.","type":"unstyled","key":"1v1c4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".transparent-bg {","type":"unstyled","key":"5v28s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background-color: #ffffff80; /* Белый цвет с прозрачностью 50% */","type":"unstyled","key":"bkd97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4veg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере #ffffff80 означает белый цвет с прозрачностью 50% (80 в шестнадцатеричном формате).","type":"unstyled","key":"8gfah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Грамотно выбранный фон очень важен, поэтому стоит с особой внимательностью отнестись к его выбору и разработке.","type":"unstyled","key":"cfilb"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":30,"offset":0}],"inlineStyleRanges":[],"text":"Попробовать Letteros бесплатно","type":"unstyled","key":"crr01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"3smeA4FWjiuJ3vcWpW2k"}],"entityMap":{"0":{"data":{"href":"https://html-color-codes.info/colors-from-image/","url":"https://html-color-codes.info/colors-from-image/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://backgrounds.cm/","url":"https://backgrounds.cm/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://dzen.ru/away?to=http%3A%2F%2Fapp.letteros.com%2F","url":"https://dzen.ru/away?to=http%3A%2F%2Fapp.letteros.com%2F"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}