Фон в html: Как сделать фон в html: порядок действий

Содержание

Добавляем фон в HTML

admin 18.02.2016 Основы HTML Оставить комментарий 1,765 Просмотры

Фон, это та же картинка, только загнанная под текст и другие картинки. Фон нельзя выделить мышкой, в отличие от картинок, выделяемых вместе с текстом. В этом одновременно его преимущество и недостаток — в некоторых случаях. Фон простирается в пределах тега таблицы или же всей странички, если указан в теге <body>. Первое, конечно, предпочтительнее.
Прописываем фон:

<td background=»/картинка фона.gif«>
— фоном может быть любая картинка. Вот только став фоном она приобретет интересные возможности.
Например, как вы думаете сделаны дырдочки по краям этого клетчатого «листа»? Это не длинная картинка, это один небольшой квадратик с одной «дырочкой». Просто, как и всякий фон, он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа — темная полоска по краю — это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек.

Естественно, если я бы не назначил четкую ширину полям с этим фоном, у меня бы получилось тиражирование фонового изображения не только вверх, но и в стороны:

а поверх фона можно чего-нить написать!
главное, чтобы фон это не перекрывал

— вот он, этот самый фон. Кто особо любопытен, может попробовать сохранить его как картинку :0) Если получится. Конечно, придется покопаться в коде — если у вас Ехплорер :0) Ну а счастливым владельцам Мозиллы, конечно, достаточно глянуть «состав HTML», чтобы увидеть всю задействованную в нем графику с соответствующими линками.
В чем удобство фона, кроме многими ругаемого «украшательства»? Да в том, что правильно подобранный фон, мелкие, не затрудняющие загрузку детали-«примочки» и прочее, что у нас принято именовать гордым словом «дизайн», призвано скрасить однообразие, облегчить восприятие и вообще… С ним приятнее.

Хотя, конечно, и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять — оптимально, чтобы вся графика на странице, все украшательства не весили больше 30 кб. И то это много… У меня, например, все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не «тонет» в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированным, например, флэшем, но для начала лучше .gif`ом, поскольку он наиболее прост и легок в изготовлении.

Из фона можно изготавливать и рамочки и уголки к ним — закругленные, завернутые и всяко-разные другие. Главное, не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания — особенно это касается частенько встречающейся назойливой непрекращающейся анимации всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетантских страничек начинающих вебоделов.

Совет — фон старайтесь ориентировать либо вертикально, либо горизонтально. Это упростит растягивание в ту или иную сторону, чтобы дизайн наш при стискивании или растягивании окошка не «плыл».
При назначении фона вполне можно ограничиться картинкой со стороной 1 пиксель на 5-15.
Конечно, кроме перечисленных свойств, у фоновых изображений огромное количество возможностей, но подробности — в разделе

стили

Если Вам понравилась статья, пожалуйста, поставьте лайк! Следите за новой информацией на нашем канале. Подписывайтесь на нас в группе: подписаться

Добавляем фон в HTML — Новостной портал

<td background=”/картинка фона.gif“>
— фоном может быть любая картинка. Вот только став фоном она приобретет интересные возможности.
Например, как вы думаете сделаны дырдочки по краям этого клетчатого «листа»? Это не длинная картинка, это один небольшой квадратик с одной «дырочкой». Просто, как и всякий фон, он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа — темная полоска по краю — это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек.
Естественно, если я бы не назначил четкую ширину полям с этим фоном, у меня бы получилось тиражирование фонового изображения не только вверх, но и в стороны:

а поверх фона можно чего-нить написать!
главное, чтобы фон это не перекрывал

Хотя, конечно, и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять — оптимально, чтобы вся графика на странице, все украшательства не весили больше 30 кб. И то это много… У меня, например, все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не «тонет» в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированным, например, флэшем, но для начала лучше . gif`ом, поскольку он наиболее прост и легок в изготовлении.

Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении — увы, только так можно спасти свои глаза от надругательства многими современными «вебмастерами».
Из фона можно изготавливать и рамочки и уголки к ним — закругленные, завернутые и всяко-разные другие. Главное, не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания — особенно это касается частенько встречающейся назойливой непрекращающейся анимации всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетантских страничек начинающих вебоделов.

Электронная почта в темном режиме: полное практическое руководство

Перейти к основному содержанию

Дизайн электронной почты

Темный режим. Технологическая индустрия заговорила об этих двух словах еще тогда, когда Apple добавила темный режим в свой почтовый клиент для настольных компьютеров в 2018 году. В следующем году темный режим появился в iOS Mail, а другие тяжеловесы отрасли, включая Gmail, объявили о поддержке темного режима.

Отчет Litmus «Тенденции взаимодействия с электронной почтой» показывает, что из отслеживаемых открытий около 34% использовали темный режим по состоянию на август 2022 года, что свидетельствует о стабильном внедрении из года в год.

Темный режим укрепил свое законное место в папке «Входящие», но обеспечение того, чтобы электронные письма хорошо выглядели в этой среде чтения, может стать серьезной проблемой для маркетологов электронной почты.

Считайте, что это ваш универсальный центр для всего, что связано с Dark Mode, включая код Dark Mode и хаки, разработанные Litmus и сообществом электронной почты, а также список полезных инструментов Dark Mode, которым доверяют и которые часто используют почтовые гики.

Часть 1: Полное руководство по темному режиму (публикация в блоге)

Что такое темный режим и почему люди его используют

Темный режим — это более темная цветовая палитра для условий низкой освещенности или ночного времени. Эта перевернутая цветовая схема использует светлую типографику, элементы пользовательского интерфейса и значки на темном фоне — и это одна из самых горячих тенденций цифрового дизайна в последние годы. От ОС Apple до таких приложений, как Twitter, Slack или Facebook Messenger, самые популярные операционные системы и приложения теперь позволяют пользователям переключаться в темный режим.

Темный режим — горячая тема, и на то есть веские причины. Многие люди предпочитают темный режим, потому что:

легче для глаз . Светлый текст на темном фоне значительно снижает нагрузку на глаза, особенно в условиях низкой освещенности.
Уменьшает яркость экрана , экономя заряд батареи.
Он может улучшить разборчивость контента и облегчить некоторым пользователям использование контента на настольных и мобильных устройствах.

Они могут просто предпочитать более темные интерфейсы .

3 способа, как настройки темного режима влияют на дизайн электронной почты

Как клиенты применяют темный режим к моим электронным письмам?

На данный момент существует три принципиально разных цветовых схемы, которые почтовые клиенты используют для применения темного режима к электронным письмам. Давайте рассмотрим их один за другим (или сразу перейдем к таблице поддержки клиентов электронной почты в темном режиме).

Цвет не меняется

Да, вы не ошиблись. Некоторые почтовые клиенты позволяют изменить их пользовательский интерфейс на темный режим, но это не так.0055 любое влияние на то, как отображается ваше электронное письмо в формате HTML . Независимо от того, настроено ли приложение на светлый или темный режим, ваша электронная почта будет выглядеть точно так же. Вот список этих клиентов:

Apple Mail*
Gmail Desktop
AOL
Yahoo mail

*Цветовые режимы не меняются, если не указать метатеги темного режима. Если вы включите метатеги темного режима, но не добавите никаких стилей, они дадут вам частичную инверсию.

Посмотрите этот пример электронной почты в Apple Mail: дизайн электронной почты остается точно таким же, независимо от того, просматриваете ли вы его в темном или светлом пользовательском интерфейсе почтового клиента:

У Apple Mail есть несколько исключений из этого: во-первых, сообщений электронной почты с открытым текстом до запускают применение темы темного режима , а минимальный код, который блокирует применение темного режима к письму с открытым текстом, — это 2× 1 изображение — это необходимо для того, чтобы вы могли включить пиксель отслеживания 1 × 1, сохраняя при этом ощущение «простого текста».

Во-вторых, если вы включите темный режим, как описано ниже, Apple Mail автоматически преобразует вашу электронную почту в версию с темным режимом, используя частичную инверсию (также описанную ниже).

Параметры темного режима: по умолчанию или пользовательский

Существует довольно много почтовых клиентов, которые автоматически активируют свой темный режим по умолчанию в вашей электронной почте, если вы вообще ничего не делаете. Но если вы похожи на большинство из нас и не являетесь поклонником этих стилей по умолчанию, вы можете выбрать третий вариант: разработать и запрограммировать собственную тему темного режима. Ниже вы можете увидеть рядом электронное письмо с темой светлого режима и пользовательской темной темой.

Прежде чем мы рассмотрим, как подойти к пользовательской теме темного режима, давайте посмотрим, как другие почтовые клиенты обрабатывают свои темные режимы по умолчанию.

Темные режимы по умолчанию: частичная инверсия цвета

Первая тема темного режима — это то, что мне нравится называть «Частичная инверсия цвета». Он обнаруживает только области со светлым фоном и инвертирует их, так что светлый фон становится темным, а темный текст становится светлым.

Обычно он оставляет только области с темным фоном, что приводит к полностью темному дизайну. К счастью, большинство почтовых клиентов, которые используют этот метод , а также , поддерживают таргетинг на темный режим, поэтому вы можете переопределить темную тему клиента по умолчанию.

Outlook.com — это почтовый клиент, который частично инвертирует цвета, как вы можете видеть на этом снимке экрана:

Темные режимы по умолчанию: полноцветная инверсия

Полноцветная инверсия — наиболее инвазивная цветовая схема: она не только инвертирует области со светлым фоном, но влияет и на темный фон.

Итак, если вы уже разработали для своих электронных писем темную тему, эта схема по иронии судьбы заставит их стать светлыми . К сожалению, в настоящее время эта тактика используется некоторыми наиболее популярными почтовыми клиентами, такими как приложение Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) и Почта Windows.

В приведенных ниже примерах вы можете видеть, что светлые фоны были преобразованы в темные версии исходных цветов и . Области, которые ранее имели темный фон со светлым текстом, теперь стали светлыми с темным текстом.

Мало того, что эта схема Full Color Invert наиболее радикально меняет вашу электронную почту, но и почтовые клиенты, которые используют эту логику , также не разрешают таргетинг на темный режим в данный момент.

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

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

Различные методы таргетинга в темном режиме

Как настроить таргетинг на пользователей темного режима с помощью собственных стилей?

Как отмечалось выше, то, как почтовые клиенты в темном режиме обрабатывают ваши обычные электронные письма в формате HTML, будет различаться. Но что, если вы хотите применить свои собственные стили темного режима, которые могут сильно отличаться от цветовых схем почтовых клиентов по умолчанию? Есть два метода, которые вы можете использовать.

@media (prefers-color-scheme: dark)

Этот метод работает почти так же, как применение блока стилей в запросе @media для вашего мобильного представления, за исключением того, что этот блок CSS предназначен для любого пользователя. интерфейс, для которого установлен темный режим. @media (prefers-color-scheme: dark) позволяет вам создавать самые надежные пользовательские темы темного режима, в которых вы можете реализовать все, что угодно, от смены изображений, характерных для темного режима, эффектов наведения, фоновых изображений . .. в основном почти все, что вы можете сделать с традиционный CSS! Этот метод требует, чтобы вы добавили метатеги и стили Dark Mode в вашей электронной почты для работы в Apple Mail.

[data-ogsc]

Марк Роббинс впервые обратил наше внимание на этот метод для приложения Outlook. Не каждый стиль работает с ним, но он работает для обмена изображениями на Outlook.com. Хотя это кажется довольно узкой долей рынка, относительно легко просто скопировать @media (prefers-color-scheme: dark) стилей, которые вы уже применили, и просто добавить соответствующие [data-ogsc] 9Префиксы 0008 для каждого правила CSS.

Какие почтовые клиенты поддерживают темный режим?

Эти клиенты и приложения в настоящее время предлагают темный режим — либо в качестве параметра, который пользователь может установить вручную, либо путем автоматического определения предпочтительной цветовой схемы пользователя: )

Приложение Gmail (iOS)

Приложение Outlook (Android)

Клиенты для настольных ПК

Apple Mail
Outlook 2021 (Mac OS)
Outlook 2021 (Windows)
Office365 (MacOS)
Office365 (Windows)
Windows Mail

Веб-клиенты 9 0059

Outlook. com

Но только потому, что все эти почтовые клиенты предлагают способ настроить свой пользовательский интерфейс на темную цветовую схему, это не означает, что они обрабатывают ваши электронные письма одинаково. Рендеринг электронной почты сложен. Электронное письмо, которое отлично выглядит в одном клиенте, может выглядеть неработающим в другом. Теперь Dark Mode добавляет еще один уровень сложности. Как мы уже показали, существуют различные способы работы почтового клиента в темном режиме с вашим кодом.

Также нет последовательной поддержки различных методов таргетинга. Итак, какой почтовый клиент следует какой цветовой схеме по умолчанию? В то время как некоторые почтовые дизайнеры не предлагают разработчикам электронной почты возможности нацеливаться на темный режим для оптимизации чтения, некоторые почтовые клиенты могут быть настроены либо с помощью методов @media (prefers-color-scheme: dark) , либо [data-ogsc] .

Мы протестировали настройки темного режима в следующих почтовых клиентах, чтобы увидеть, как они влияют на обычную электронную почту, которая не включает какой-либо таргетинг на темный режим, а также поддержку таргетинга на темный режим. Вот что мы нашли…

Поддержка почтового клиента для темного режима
График поддержки почтового клиента темного режима (по состоянию на декабрь 2022 г.)
902 15 902 15 9 0216
Windows Mail
Темный режим
@media support
Поддержка [data-ogsc]
Поддержка принудительного выбора цвета фона**
Причуды
Apple Mail (MacOS) 9 0009
Без изменений*
✓ Да
✘ Нет
✓ Да
90 006 * Чисто белые (#ffffff) фоновые изображения будут инвертированы, если присутствует
iPhone / iPad (iOS 16)
Без изменений*
✓ Да
✘ Нет
✓ Да
* Чисто белые (#ffffff) фоновые изображения будут инвертированы, если присутствует
Outlook. com
Частичная инверсия
✘ Нет
? Частично*†
✘ Нет
*Светлые цвета фона будут затемнены
† Замена изображения работает, если изображение связано
900 06 Outlook 2021 (WinOS)
Полная инверсия*
✘ №
✘ №
✘ №
* Для разделов VML возможен специальный таргетинг.
Приложение Outlook (iOS)
Частичное инвертирование
✘ Нет
9000 6 ? Частично*†
✘ Нет
*Светлые цвета BG будут затемнены, а светлые шрифты на темном фоне могут быть затемнены
† Замена изображения работает, если изображение связано
Приложение Outlook (Android )
Частичная инверсия
✘ Нет
? Частично*†
✘ Нет
*Светлые цвета BG будут затемнены, а светлые шрифты на темном фоне могут быть затемнены
† Замена изображения работает, если изображение связано
Приложение Gmail (iOS )
Полная инверсия*
✘ Нет
✘ Нет
✓ Да
*Для некоторых цветов и шрифтов возможен специальный таргетинг!
Приложение Gmail (Android)
Частичная инверсия
✘ Нет
90 006 ✘ Нет
✓ Да
Office 365 (Win)
Полный инвертор
✘ №
✘ №
✘ №
Office 365 (mac)
Частичная инверсия
? Частично*
✘ Нет
✓ Да
*Светлые фоновые цвета будут затемнены
Полная инверсия
✘ Нет
✘ №
✘ №

**Принудительное сохранение одного и того же цвета фона не влияет на цвет шрифта, и он все равно инвертируется. Единственным исключением могут быть клиенты, которые полностью поддержка @media или [data-ogsc] ; или приложение Gmail, где работает исправление смешения цветов.
Gmail iOS и Outlook ориентированы на Windows
Некоторые #EmailGeeks разработали блестящие обходные пути для управления некоторыми из Full Invert Default Themes , с которыми мы боролись. Каждое из этих решений настолько тщательное, что требует собственных руководств, поэтому обязательно ознакомьтесь с ними для получения полного объяснения!
Реми Парментье придумал руководство «Устранение проблем темного режима Gmail с помощью режимов наложения CSS», объединив mix-blend-mode и хак Gmail от HowToTarget.email, чтобы сохранить исходный цвет фона и текста для приложения Gmail iOS.
Николь Мерлин применила свое мастерство работы с электронной почтой в статье «Как исправить проблемы с темным режимом Outlook», создав два метода для работы с темным режимом Outlook для Windows со специфическими для MSO свойствами градиента CSS и очень изящным приемом VML (язык векторной разметки). .
Предостережение при изучении этих хаков: поскольку оба эти метода имеют предполагаемый эффект принуждения почтового клиента к отображению исходного текста в светлом режиме и / или цветов фона, где они применяются, вы запускаете риск неуважения предпочтений ваших пользователей в темном режиме, что противоречит духу доступности. Обязательно используйте их экономно, например, улучшайте коэффициент контрастности, когда фон или текст преобразуются в темный режим нечитаемым образом.
Хотя эти методы нацеливания относительно ограничены по сравнению с тем, что вы можете сделать с помощью методов @media (предпочитает цветовую схему: темный) или [data-ogsc] , они по-прежнему являются удобными инструментами для случае, если вам нужно исправить проблемы с темным режимом, которые нарушают разборчивость текста.
Как проектировать и кодировать для темного режима
Как проектировать и кодировать электронные письма в темном режиме
При нацеливании стилей темного режима в разных почтовых клиентах обязательно выполните каждый из этих шести шагов, чтобы улучшить работу с электронной почтой в темном режиме для ваших подписчиков.
1. Оптимизируйте свои логотипы и другие изображения для всех стилей
Добавьте полупрозрачный контур к прозрачным файлам PNG с темным текстом для удобства чтения в почтовых клиентах, где настройка темного режима более ограничена, таких как приложение Gmail и Outlook 2019 (Windows).
Это поможет предотвратить любые проблемы, когда клиент электронной почты может решить использовать настройки частичного инвертирования цвета или полного инвертирования цвета, и упростит работу ваших подписчиков. Выбор прозрачного фона везде, где это возможно, поможет в этом.
Вы даже можете повеселиться с логотипом, оптимизированным для темного режима!
Ниже приведен пример поддельного логотипа, который я сделал, где я не только добавил легкую тень позади текста, чтобы он выделялся на темном фоне, но также добавил звездную текстуру позади него, чтобы соответствовать галактике «NebulaCo». тема.
Любой светопрозрачный элемент, который вы встроите в свой логотип, будет невидим в светлом режиме и будет служить защитной тактикой дизайна. и дают возможность добавить особый фирменный штрих, который можно увидеть только в темном режиме.
Если ваши изображения имеют прозрачность , а не и включают фон, убедитесь, что вокруг точки фокусировки достаточно отступов, чтобы избежать неудобного сопоставления.
Кроме того, поменяйте местами изображения в светлом и темном режимах с помощью методов @media (prefers-color-scheme: dark) и [data-ogsc] , описанных ниже в этом руководстве.
2. Включите темный режим в пользовательских агентах почтового клиента
Включив эти метаданные в ваши , вы можете убедиться, что темный режим включен в вашем письме для подписчиков, у которых включен темный режим:

3. Добавьте стили Dark Mode для @media (prefers-color-scheme: dark)
Добавьте этот мультимедийный запрос Dark Mode во встроенный раздел
для пользовательских стилей Dark Mode в iOS, Apple Почта, Outlook. com, Outlook 2019(MacOS) и приложение Outlook (iOS).
Классы .dark-img и .light-img особенно полезны для отображения логотипа, характерного для темного режима, если логотип с контуром не идеален.
Пример CSS:
@media (предпочитает цветовую схему: темный) { /* Показывает контент только в темном режиме, например изображения */ .dark-img { display: block ! важно; ширина: авто !важно; переполнение: видимо !важно; поплавок: нет !важно; максимальная высота: наследовать! важно; максимальная ширина: наследовать! важно; высота строки: авто !важно; верхняя граница: 0px !важно; видимость: наследовать !важно; } /* Скрывает контент только для облегченного режима, например изображения */ .light-img { дисплей: нет; отображение:нет !важно; } /* Пользовательский цвет фона темного режима */ .darkmode { background-color: #272623 !важно; } /* Пользовательские цвета шрифта темного режима */ h2, h3, p, span, a, b { color: #ffffff !важно; } /* Пользовательский цвет текстовой ссылки темного режима */ .

ссылка {цвет: #91ADD4 !важно; } }
4. Дублируйте стили темного режима с префиксом [data-ogsc]
Добавьте этот стиль для поддержки в приложении Outlook (Android).
Пример CSS :
/* Показывает контент только в темном режиме, например изображения */ [data-ogsc] .dark-img { display: block ! важно; ширина: авто !важно; переполнение: видимо !важно; поплавок: нет !важно; максимальная высота: наследовать! важно; максимальная ширина: наследовать! важно; высота строки: авто !важно; верхняя граница: 0px !важно; видимость: наследовать !важно; } /* Скрывает контент только для облегченного режима, например изображения */ [data-ogsc] .light-img { display:none; отображение:нет !важно; } /* Пользовательский цвет фона темного режима */ [data-ogsc] .darkmode { background-color: #272623 !важно; } /* Пользовательские цвета шрифта темного режима */ [data-ogsc] h2, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !важно; } /* Пользовательский цвет текстовой ссылки темного режима */ [data-ogsc] .
link {цвет: #91ADD4 !важно; }
5. Примените стили только для темного режима к своему телу HTML
Убедитесь, что во все ваши HTML-теги вставлены соответствующие классы темного режима. Вот пример классов .dark-img и .light-img , как они появляются в логотипах Light Mode и Dark Mode.
Пример HTML
:

6.
АБТ: всегда проводите тестирование!
Как мы всегда упоминали, почтовые клиенты постоянно меняются. Особенно с такой функцией, как Dark Mode, часты настройки логики рендеринга. Единственный способ быть на вершине всего этого? Проверяйте каждое электронное письмо с помощью такого инструмента, как Litmus.
Контроль качества проверяет ваши электронные письма в темном режиме
Вы все сделали правильно? Узнайте с бесплатной пробной версией Litmus. Предварительный просмотр того, как ваши электронные письма выглядят в более чем 100 почтовых клиентах, приложениях и устройствах. И каждый раз следите за тем, чтобы ваши электронные письма были фирменными и безошибочными.
НАЧАТЬ БЕСПЛАТНУЮ ПРОБНУЮ ПРОБНУЮ ВЕРСИЮ

Уважайте предпочтения пользователя, когда речь идет о темном режиме
причины. Но дело не в темном режиме или светлом режиме. Вопрос в том, чего хотят ваши подписчики — будь то темный или светлый опыт. Нет правильного или неправильного ответа.
Итак, если ваши подписчики принимают осознанное решение просматривать электронные письма в темном режиме, лучше уважать это. Точно так же, как вы хотите добавить текст ALT на случай, если ваши подписчики предпочитают отключать изображения по умолчанию, вы также должны создавать электронные письма, которые учитывают более темные интерфейсы.
Первоначально опубликовано 20 ноября 2019 г. Алисой Ли. Последнее обновление: 17 января 2022 г.
Часть 2: 9 Фрагментов кода темного режима
Часть 3: Электронная почта Избранные инструменты и советы сообщества
Что Лучшие практики, инструменты и ресурсы темного режима помогут вам #EmailGeeks полагаются на то, чтобы узнать больше и преодолеть свои проблемы?
Ознакомьтесь с постоянно растущим списком внешних источников, рекомендованных сообществом электронной почты.
Ваш любимый инструмент Dark Mode отсутствует в этом списке? Дайте нам знать в Твиттере или на hello@litmus. com — мы хотим, чтобы этот список был полезен для всех пользователей и был актуален.
1. Чтобы узнать о темном режиме в электронной почте ⚡AMP
, посетите https://dev.to/bdjang/exploring-dark-mode-in-amp-email-5gm7.
Авторы и права: Бенджамин Джанг
2. Сохраняйте текстовое содержимое в виде черного текста на белом фоне
«Одна простая вещь, которая хорошо работает, — это сохранить текстовое содержимое в виде черного текста на белом фоне. Это накладывает некоторые ограничения на ваш дизайн, но у вас все еще есть много возможностей проявить творческий подход к внешней части текста и сделать так, чтобы все выглядело великолепно».
Автор: Марк Роббинс
3. Установите базовые стили для темного режима, обновите цвета в зависимости от дизайна
darkbg { background-color: black !important; } .h2 { цвет: белый !важно; } .h3 { цвет: белый !важно; } .button {цвет фона: белый! важно; цвет: черный !важно; }
Кредит: Emmanuel Arizmendi
4.
Ресурсы для автоматических почтовых клиентов
@outlook: https://webdesign.tutsplus.com/tutorials/how-to-fix-wlook-dark-l проблемы с режимом – cms-37718
@Gmail: https://hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/
Кредит: Эммануэль Арисменди
5. Чтобы создать Электронная почта в формате HTML который реагирует на темную и светлую кнопку Outlook.com
Посетите https://www.hteumeuleu.com/2021/emails-react-outlook-com-dark-mode/.
Предоставлено: Rémi Parmentier через Wilbert Heinen
проблемы – cms-37718.
Авторы и права: Николь Мерлин
Часть 4: Инструментарий темного режима
Инструментарий темного режима
Мы собрали наш любимый Ресурсы темного режима в нашем наборе инструментов темного режима. Вот что вы получите:
Полное руководство по электронной почте в темном режиме , наше исчерпывающее руководство по всему, что вам нужно знать о темном режиме
Часовая запись, показывающая , как закодировано электронное письмо в темном режиме в режиме реального времени
Фрагменты кода , которые помогут вам добавить поддержку темного режима в ваши существующие электронные письма
И шаблон , готовый к темному режиму , чтобы вы могли сразу начать работу
Загрузите инструментарий темного режима и начните повысь уровень своей игры в темном режиме уже сегодня.
ПОЛУЧИТЕ ИНСТРУМЕНТАРИЙ
Вам также может понравиться Электронный маркетинг стал лучше
4.10. Отделение объекта от фона
4.10. Отделение объекта от фона
Рисунок 3.39. Объект с фоном

Иногда вам нужно отделить предмет изображения от его фон. Вы можете захотеть, чтобы объект был однотонным, или оставить фон прозрачный, поэтому вы можете использовать его на существующем фоне или любая другая вещь, которую вы имеете в виду. Для этого нужно сначала использовать Инструменты выбора GIMP, чтобы нарисовать выделение вокруг вашего предмет. Это непростая задача, и правильный выбор инструмента ключевой. Для этого у вас есть несколько инструментов:

«Свободный выбор Инструмент» позволяет рисовать границу с помощью от руки или прямые линии. Используйте это, когда объект имеет относительно простая форма. Подробнее об этом инструменте читайте здесь: Раздел 2.4, «Свободный выбор (лассо)»
Рисунок 3.40. Бесплатный инструмент выбора

Интеллектуальный выбор ножниц инструмент» позволяет выбрать границу от руки и использует алгоритмы распознавания краев, чтобы лучше соответствовать границе вокруг объект. Используйте это, когда тема сложная, но достаточно отчетливая. на его нынешнем фоне. Подробнее об этом инструменте читайте здесь: Раздел 2.7, «Умные ножницы»
Рисунок 3.41. Интеллектуальные ножницы Select Tool

«Выбор переднего плана Инструмент» позволяет помечать области как «Передний план» или «Фон» и уточняет выбор автоматически. Подробнее об этом инструменте читайте здесь: Раздел 2.8, «Выбор переднего плана»
Рисунок 3.42. Инструмент выбора переднего плана

4.10.1. После того, как вы выбрали тему
После того, как вы успешно выбрали тему, используйте Выберите → Инвертировать. Сейчас, вместо предмета выбирается фон. Что ты сейчас делаешь зависит от того, что вы намеревались сделать с фоном:
Чтобы заполнить фон одним цветом:
Щелкните образец цвета переднего плана (верхний левый из двух перекрывающиеся цветные прямоугольники) на панели инструментов и выберите желаемый цвет. Затем используйте Раздел 3.4, «Заполнение ведра». чтобы заменить фон выбранным цветом.
Рисунок 3.