Черный фон html: Как изменить цвет фона и текста веб-страницы?

Шаг 1 Щелкните правой кнопкой мыши клип на временной шкале редактирования > Редактировать свойства.

Шаг 2 Выберите цветовое меню > Дополнительно.

Шаг 3 Настройка параметров цвета.

Нажмите кнопку «Настроить» в левом верхнем углу, прокрутите вниз до виньетки, а затем уменьшайте количество и размер до тех пор, пока объект не будет окружен овалом.

Прокрутите вверх до параметров цвета и увеличьте контрастность до 100.

Перейдите в меню «Освещение», затем уменьшите тени, чтобы скрыть все оставшиеся светлые пятна.

Часть 2. Советы: Как улучшить видео с обзором продукта

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

1) Убедитесь, что ваше видео имеет правильное разрешение и масштаб

Наличие правильного разрешения и масштаба для вашего видео гарантирует, что оно будет иметь разрешение высокой четкости (HD) или высокое качество. Кроме того, это гарантирует, что ваше видео будет правильного размера при экспорте.

Если масштаб отличается от разрешения, то пустое пространство будет заполнено черным цветом, и вы получите черную рамку, которая делает ваше видео меньше.

2) Используйте правильное освещение, чтобы ваше видео выглядело четким и ярким

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

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

3) Убедитесь, что качество звука вашего видео хорошее

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

Итог

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

Большой черный фон — 55 фото

Арт

Автомобили

Аниме

Девушки

Дети

Животные

Знаменитости

Игры

Красота

Мужчины

Природа

Фантастика

Фильмы

Фэнтези

Фоны 2 698 25 августа 2022

1

Черный фон для ВК

2

Черный фон

3

Черный квадрат фон

4

Глубокий черный цвет

5

Черный фон

6

Чистый черный

7

Черный цвет

8

Черная ткань текстура

9

Чёрный фон для телефона

10

Черный экран сплошной цвет

11

Черная картина на весь экран

12

Черный фон длинный

13

Красивый темный фон

14

Черный фон на рабочий стол

15

Черный фон

16

Черная кошка на черном фоне

17

Темный фон

18

Черный фон

19

Карбоновый фон

20

Чёрный фон без ничего

21

Черные обои

22

Черные обои

23

Чёрный фон без ничего

24

Черная матовая текстура

25

Чёрный фон без ничего

26

Черная текстура

27

Живой фон черный

28

Сплошной черный цвет

29

Темно серый градиент

30

Черный фон градиент

31

Черный фон на рабочий стол

32

Чисто черный фон для фотошопа

33

Черный фон

34

Бэкграунд черный стильный

35

Чёрный фон без ничего

36

Черный градиент

37

Прикольный фон

38

Чёрный фон без ничего 16 на 9

39

Черный глянцевый фон

40

Черная текстура

41

Глубокий черный фон

42

Черное небо со звездами

43

Фон космос Звездные войны

44

Черный однотонный

45

Чёрный фон без ничего матовый

46

Тёмный фон без ничего

47

Черный фон на рабочий стол

48

Черный фон

49

Фон темно серый черный

50

Красивый черный фон

51

52

Абсолютно черный фон

53

54

Оставить комментарий

Жалоба!

Еще арты и фото:

Шикарные обои на самого высокого качества! Выберайте обои и сохраняйте себе на рабочий стол или мобильный телефон — есть все разрешения! Огромная коллекция по самым разным тематикам только у нас! Чтобы быстро найти нужное изображение, воспользутесь поиском по сайту. В нашей базе уже более 400 000 шикарных картинок для рабочего стола! Не забывайте оставльять отзывы под понравившимися изображениями.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Apple Mail*
• Gmail Desktop
• AOL 
• Yahoo mail

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

Посмотрите этот пример электронной почты в 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.

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

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

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

• 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: Инструментарий темного режима

Инструментарий темного режима

Мы собрали наш любимый Ресурсы темного режима в нашем наборе инструментов темного режима. Вот что вы получите:

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

Загрузите инструментарий темного режима и начните работу или повысь уровень своей игры в темном режиме уже сегодня.

ПОЛУЧИТЕ ИНСТРУМЕНТАРИЙ

Вам также может понравиться Маркетинг по электронной почте стал лучше

Что такое темный режим для электронной почты и влияет ли он на рендеринг?

Разработка электронной почты 16 августа 2021 г.

---

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

Впервые мы написали о темных письмах около года назад. Затем мы посвятили целый месяц изучению его влияния на электронный маркетинг. (Ознакомьтесь с материалами от Darktober, включая наш веб-семинар Designing Emails for Dark Mode ).

Опрос 2021 года о темном режиме, проведенный Pathwire и Ascend2, показал, что 44% маркетологов электронной почты рассматривают более темный UX, а еще 28% планируют сделать его частью процесса создания электронной почты в ближайшее время.

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

Давайте рассмотрим, что вы можете сделать, чтобы решить некоторые из основных проблем электронной почты в темном режиме.

Перейти к разделу этой статьи:

• Что такое темный режим?
• Что делает темный режим для электронной почты?
• Оптимизация электронной почты для темного режима
• Темный режим для фрагментов кода электронной почты
• Темный режим и поддержка почтового клиента

Что такое темный режим?

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

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

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

Многие популярные приложения имеют параметр темного режима для пользовательского интерфейса. Это включает в себя почтовые приложения. Но (и это неудивительно) почтовые клиенты по-разному работают с темным режимом. Вот где возникают самые большие проблемы.

Что делает темный режим для электронной почты?

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

Темный режим меняет цвет фона и шрифта электронной почты на светлый на темный. Для этого он проверяет любой цвет или цвет фона со свойством CSS, равным 9.0677 background, color, background-color или HTML-атрибут bgcolor или color .

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

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

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

Давайте посмотрим на кампанию Email on Acid, которая выглядела хорошо в светлом режиме, но работа с электронной почтой в темном режиме была далеко не идеальной.

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

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

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

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

Оптимизация электронной почты для темного режима

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

1. Используйте PNG с прозрачным фоном

Использование прозрачных PNG для ваших изображений позволяет изменять цвет фона в темном режиме, чтобы он выглядел бесшовным. Таким образом, какой бы цвет фона ни изменился, он будет отражаться на фоне изображения.

Как вы, наверное, заметили в приведенных выше примерах темного режима Email on Acid, у двух наших изображений (включая наш логотип) не было прозрачного фона.

Использование прозрачных изображений png в электронных письмах, что является хорошей практикой для дизайнеров электронной почты. Но вы должны остерегаться черного текста и значков. Это подводит нас ко второму совету…

2. Используйте белые штрихи вокруг черных элементов дизайна

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

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

Темный режим для фрагментов кода электронной почты

Эти простые оптимизации важны, но они могут не решить все проблемы с электронной почтой в темном режиме. У разработчиков электронной почты и дизайнеров есть несколько вариантов:

1. Пассивно примите тот факт, что ваши электронные письма не всегда будут идеально отображаться в темном режиме.
2. Попробуйте взломать темный режим и заставить клиентов отображать нужные вам цвета.
3. Начните создавать свои электронные письма с темной и светлой темой.

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

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

Сначала добавьте эти метатеги и стили селектора :root в электронное письмо:

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

 

<тип стиля="текст/CSS">
:корень {
Цветовая гамма: светлый темный;
поддерживаемые цветовые схемы: светлый темный;
}

 

Затем добавьте этот медиа-запрос в CSS письма:

Настройте цвета для предпочитаемой темной темы вашего бренда.

 @media (предпочитает цветовую схему: темный) {
 .тело {
background-color: #CCCCCC !важно;
 }
h2, h3, h4, тд {
цвет: #9ea1f9 !важно;
отступы: 0px 0px 0px 0px !важно;
}
}
 

В этом медиа-запросе предпочитает цветовую схему: темный подтверждает настройку темного режима, а тег body обращается к основному цвету всего сообщения электронной почты. Таким образом, когда электронное письмо с этим утверждением открывается в Outlook. com или Office 2019 с включенным темным режимом, определенные теги .body и h2, h3, h4, td вступают в силу.

Однако в этом подходе есть одно важное предостережение. Медиа-запрос ( предпочитает цветовую схему ) поддерживается не всеми почтовыми клиентами. Он работает только с клиентами, использующими WebKit в качестве механизма рендеринга. На момент написания этой статьи запрос CSS будет работать с Apple Mail, Thunderbird и некоторыми версиями Outlook, но Gmail его не поддерживает. Чтобы узнать последние новости, посетите этот ресурс на CanIEmail.com.

Теоретически вы можете использовать (prefers-color-scheme), чтобы «отменить» темный режим и заставить его использовать светлый цвет фона. Однако, если вы собираетесь потратить время на принудительный белый фон, вы можете вместо этого создать темный режим. Кроме того, как уже отмечалось, этот запрос CSS не будет работать для каждого почтового клиента.

Нужно немного вдохновения? Ознакомьтесь с примерами электронных писем в темном режиме с дизайном от ведущих брендов.

Поддержка темного режима и почтового клиента

Самым важным темным режимом для электронной почты является то, что такие клиенты, как Gmail, Apple Mail и Outlook, отображают информацию по-разному.

Некоторые почтовые клиенты автоматически инвертируют цвета, а некоторые нет. Другие автоматически переключают цвета только в определенных ситуациях. Некоторые клиенты поддерживают медиа-запросы для темных и светлых цветовых схем, а другие нет. Вот разбивка:

Почтовый клиент	Автоинвертировать цвета?	Common Dark Mode Challenge
Apple Mail (iPhone/iPad)	Да 9008 1	Автоматическое инвертирование, когда фон прозрачный или чисто белый (#ffffff).
Apple Mail (macOS)	Да	Автоматическое инвертирование, когда фон прозрачный или чисто белый (#fffff).
Outlook (iOS)	Частично	Может сделать цвет фона темнее.
Outlook (macOS)	Частично	Единственный вариант Outlook, который поддерживает @media ( предпочитает цветовую схему). Может сделать цвет фона темнее.
Outlook (Windows)	Да	Единственный параметр Outlook, который постоянно автоматически инвертирует цвета.
Outlook.com (веб-почта)	Частично	Единственный вариант Outlook, в котором работает замена изображений. Может сделать цвет фона темнее.
Gmail (Android)	Да (когда еще не стемнело)	Не поддерживает запрос @media (предпочитает -цветовая схема).
Gmail (веб-почта)	Нет	Не поддерживает запрос @ media (предпочитает цветовую схему).
AOL (веб-почта)	Нет	Нет текущего темного пользовательского интерфейса.
Yahoo! (веб-почта)	Нет	Нет текущего пользовательского интерфейса темного режима.

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

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

Все еще сомневаетесь, стоит ли тратить время и усилия на проектирование и разработку электронных писем для темного режима? Вы также можете использовать Email on Acid, чтобы узнать, какая часть вашего списка просматривает электронные письма в темном режиме.

Когда Email on Acid провел собственный эксперимент, мы обнаружили, что около 14% наших подписчиков используют темный режим. Мы также ожидаем, что это число будет расти по мере роста популярности темного режима.

Чтобы узнать больше о том, как темный режим влияет на мир маркетинга по электронной почте, ознакомьтесь с темным режимом Pathwire для опроса по электронной почте

Делайте больше за меньшее время с электронной почтой на Acid ОК.

No related posts.