Черный фон с текстом: Создать текст на изображении онлайн
Белым по чёрному. Разгружаем глаза / Хабр
Все слышали выражение “чёрным по белому написано”. Пришло оно к нам из бумажного мира и как-бы утверждает, что именно это сочетание цветов для текста и фона дает наилучший контраст и читабельность. Предлагаю опровергнуть это предположение и чаще пользоваться противоположной цветовой схемой. В этой статье я не буду убеждать в целесообразности цветового решения “белым по чёрному” (и некоторые утверждения могут быть спорными). Цель этой статьи сделать обзор инструментов, которые позволяют быстро и удобно инвертировать яркие цвета в часто используемых приложениях с целью уменьшить нагрузку на глаза. А также предлагаю инвертировать упомянутое выражение и в эпоху ЖК дисплеев говорить “белым по чёрномуБелый фон и чёрный текст по инерции сохранился во множестве приложениях, чтобы симулировать визуальное восприятие чернила на белой бумаге. Может быть, эффективность “чёрным по белому” и справедливо относительно бумаги (кстати, откуда на бумаге взялся именно черный и белый?
*А также, когда упоминаю “белым по чёрному” я не имею ввиду абсолютно белый и абсолютно чёрный (и не буду вдаваться в нюансы “чёрности”). Даже наоборот — не рекомендую использовать эти крайности. При слишком большом контрасте сильнее чувствуется рассеивание света в глазах и белые буквы начинают “расползаться” на чёрном фоне. Этот эффект хорошо иллюстрирует оптическая иллюзия иррадиации. Лучше выбирать градации серого (напр., светло серый на темно сером). Главное — удобный контраст. Наверное, правильнее было б называть эту схему ”светлым по темному”, но звучит как-то не очень.
И так, список популярных приложений в которых легко засидеться и где чёрный фон поможет уменьшить нагрузку на глаза:
Браузер
до и послеChrome (Chromium)
Clearly
Если хочется комфортно прочитать статью без лишнего визуального мусора, то для этого ребята из Evernote создали отличное расширение Clearly. Помимо того, что оно удаляет всё кроме главного текста, еще даёт возможность выбирать цвета. Если не нравиться стандартная тёмная схема, то можно создать свою.
Для удобства авто разширения предоставил возможность переключения при помощи горячих клавиш. Лично мне сочетание из трёх клавиш (Ctrl+Alt+?) кажется неудобным. Хром позволяет отдельно настроить горячие клавиши для вызова конкретного расширения: Tools > Extensions, внизу есть Configure Commands (у меня Alt+R).
High Contrast
Более простое решение. Им иногда удобнее пользоваться чем Clearly (напр., на форумах). Есть возможность быстро создать исключение или задать схему по умолчанию.
Существенный минус расширения в том, что цвет изображений также изменяется.
К сожалению, сочетание клавиш (Shift+F11) нельзя поменять в настройках. Но если очень хочется, то можно копнуть исходники. У меня расширение находиться в:
или просто в поиске найти highcontrast.js, довольно уникальное имя для файла. Далее делаем следующие изменения в файлах:
highcontrast.js, строка 12, evt.keyCode == 122 меняем на нужный, и заодно если не нравится Shift, то evt.shiftKey меняем на evt.altKey или evt.ctrlKey.
А также для внешности — в popup.js, строка 100 и в manifest.json, строка 8.
Stylish
Позволяет использовать на посещаемой странице произвольный стиль. Доступно множество готовых на userstyles.org. Минус в том, что их авторы не всегда вовремя обновляют стиль при изменениях на сайте. Полезные тёмные стили: Wikipedia, Google Search, Habrahabr, StackOverflow, YouTube, Facebook.
Theme
Для того, что бы элементы интерфейса браузера не контрастировали с тёмной расцветкой содержимого страницы, лучше также выбрать какую-нибудь тёмную тему. У меня James White.
Что мне не нравиться в Хроме, так это мелькание белого фона при прорисовке страницы. Насколько я понимаю, это происходить на уровне движка, и на пользовательском уровне изменить нельзя, даже если поменять цвета в ОС. Считаю, что на этом месте нужно кинуть камень в огород Хром разработчиков. Почему они цвет канваса определяют самостоятельно, а не берут из системных настроек ОС? То же самое касается Skype и ряда других “серьезных” приложений.
Firefox
Clearly
См. описание выше.
Blank Your Monitor
Похоже на High Contrast.
Stylish
См. описание выше.
Шкуры для лиса. У меня FT DeepDark.
Opera
С Оперой не так густо. Всё, что удалось найти, это расширение Contrast Changer. Или более простой вариант в виде bookmarklet.
Также с недавних пор появился Stylish разширение.
Подбираем тёмную тему. Например, Opera Simple Dark.
альтернатива StylishНа userstyles.org каждый стиль можно сохранить в виде userscript. Складываем все скрипты в одну директорию, переименовываем так, чтобы имена файлов заканчивались на “.user.js” и указываем путь в настройках:
Tools > Preferences > Advanced > Content > JavaScript Options > User JavaScript folder. К сожалению, не все стили отображаются также как в Stylish.
Internet Explorer
С выбором разширений для этого браузера все грустно, ничего путевого не нашел. Но похоже, что цвета можно поменять следующим образом —
Обозреватель документов
Adobe Reader
Позволяет инвертировать цвет документа, но только если не скан/изображение:
Edit > Preferences (Сtrl+K) > Accessibility > Documents Color Options: Replace Document Colors, Use High Contrast Colors. Удобнее читать во весь экран (Ctrl+L), чтобы не мешали яркие элементы интерфейса (или менять цвет этих элементов в ОС).
HotkeysAdobe Reader запоминает последнюю позицию меню в настройках. Если позиция осталась на
WinDjView
Быстрый DjVu обозреватель с возможностями аннотации (только под Windows). Позволяет инвертировать цвет всего документа, включая скан/изображения:
File > Settings (Ctrl+,) > Display: Invert Colors. Удобней читать во весь экран (Ctrl+L).
Текстовый редактор
Microsoft Word 2010
до и после
File > Options > General > User Interface options > Color Scheme: Black. Чтобы изменить цвет бумаги (фон), нужно менять цвета в ОС.
Для старых версий офиса ничем не могу помочь.
Google Docs
после
Удобный, быстрый и богатый текстовый редактор с подсветкой синтаксиса, но без форматирования текста. По умолчанию идет с тёмной схемою и с хорошей читабельностью шрифтом. Использую его вместо блокнота.
Среда разработки
Visual Studio
Расцветка меняется в настройках (Tools > Options > Environment > Fonts and Colors), но это может быть длительная процедура, поскольку тяжело подобрать подходящие цвета с первого раза.
Есть более удобные решения для последних версий (2005/2008/2010/2012). Онлайн приложение Visual Studio Theme Generator генерирует конфигурационный файл (.vssettings) с выбраными цветами. А также сформировалось целое сообщество стилеводов на Studio Styles, где есть выбор среди множества готовых стилей.
В любом случае, перед изменением цветов лучше сделайте бекап текущих настроек (Tools > Import and Export Settings), можно экспортировать исключительно цветовые параметры.
К сожалению, не все цвета меняются из настроек студии и для того, что бы поменять цвет фона в окнах Solution Explorer, Output и т.п., нужно обязательно менять цвет в ОС.
Visual Studio 2010
Visual Studio 2012
В этой версии разработчики наконец-то включили возможность изменения темы в стандартные настройки, среди которых есть и Dark Theme. Для этой студии также отдельно есть расширение Visual Studio 2012 Color Theme Editor. Зачем? Не знаю. Лично VS2012 еще не видел.
Eclipse
Цветовые возможности похожие с Visual Studio. Можно установить Eclipse Color Theme Plugin и использовать теми (.xml) для этого плагина. Или использовать конфигурационные файлы (.epf). Широкий выбор тем на Eclipse Color Themes. Делайте бекап настроек перед изменениями.
Matlab
Все цвета меняются вместе с цветами ОС (по крайней мере в Win7). Если отдельно от ОС, то есть инструкция для Dark theme for Matlab 2007. Эти же установки подходят для 2010 (предполагаю для других версий так же).
Разное
Windows 7
до и после
В поиске по ключевым словам “dark theme” или “black theme” найдете множество сайтов с темами. Много качественных (не только для Windows) находятся на deviantART.
Первое, что мне подошло это Dark Soft (использовал только стили, бинарные файлы (explorer.exe) не применял).
Linux, MacOS, Windows 8, Windows XP
Как работать со стилями этих ОС не знаком. Добавляйте в комментариях, будем пополнят список.
Mobile
Делитесь своими мобильными цветами. Посколько пользуюсь старым телефоно, ничего здесь не предложу
Могу только предложить пользователям Opera Mobile не самое удобное решение — он умеет, как и его старший брат, накладывать произвольные стили.
Еще бонус “белового на чёрном” для мобильных устройств в том, что такое сочетание потребляет меньше энергии (т.к. излучает меньше света). На сколько меньше? Не знаю. Подозреваю, что при длительном чтении весьма ощутимо. Было б интересно увидеть статистику.
VLC Player
на самом деле, тем, кто смотрят видео уроки и длительные туториалы, где в основном присутствует символьная и/или графическая информация на белом фоне, удобно сделать инверсию цвета. Я так делаю почти для всех курсов Coursera.
Tools > Effects and Filter (Ctrl+E) > Video Effects > Colors > Negate colors. К сожаление горячих клавиш для эффектов нету, и это очень не удобно. Но можно автоматизировать при помощи макросов.
Total Commander
wincmd.ini
[Colors]
InverseCursor=0
InverseSelection=0
BackColor=0
BackColor2=-1
ForeColor=47360
MarkColor=253
CursorColor=12632256
CursorText=-1
ColorFilter1=*.mp3;*.wav;*.mp2;*.wma; *.aac;
ColorFilter1Color=11452183
ColorFilter2=*.jpg;*.jpeg;*.gif;*.tiff;*.png;*.bmp;
ColorFilter2Color=6667080
ColorFilter3=*.pdf;*.odt;*.txt;
ColorFilter3Color=8421504
ColorFilter4=*.doc;*.docx;*.rtf;*.xls;*.xlsx;*.ppt;*.pps;
ColorFilter4Color=12615680
ColorFilter5=*.avi;*.mpeg;*.mpg;*.mp4;*.vob;*.mov;*.flv;*.wmv;
ColorFilter5Color=16745613
ColorFilter6=*.exe; *.lnk;
ColorFilter6Color=4227200
ColorFilter7=*.zip; *.rar; *.7zip;*.iso;
ColorFilter7Color=39835
Gmail
В наличие есть несколько тёмных тем, они обозначаются чёрным треугольником на иконке. К сожалению, фон открытого письма остается белым. Думал исправить это стилем, но не нашел подходящего. Может кто-то из вас напишет такой стиль? Или по крайней мере обновит Gmail Dark Message Pane?
Не уверен насколько MediaMonkey популярна, но кому-то должно пригодится — VitreousDark.
Контрастность
Как уже упоминалось выше, не используйте слишком сильный контраст (макс. белый на макс. чёрном). Контрастность ≠ читабельность. Светло серый на тёмно сером более комфортно воспринимается. Какая именно градация серого — подбирайте индивидуально.
Контраст играет роль не только в изображении на дисплее, но и с окружающим миром. То есть, берите во внимание освещение в помещении и старайтесь избегать слишком сильного контраста между освещением и яркостью дисплея/цветов. Особенно это касается полуночников. Если уж работаете в темноте, переключитесь на тёмные цветовые схемы — глаза будут уставать гораздо меньше. Конраст между темной и свтелой темой в темном помещении может отличаться в 20 раз и больше!
Расстояние
Не забывайте о законе обратных квадратов. Если вы привыкли наклонятся к монитору, то при чтении увеличьте шрифт (Ctrl+) и отклонитесь хотя бы на 15см более назад. Это существенно уменьшит количество света излучаемого на глаза. Конечно у монитора слишком большая площадь, чтобы считать его точечным источником света и применять к нему этот закон. Но как показывает простой эксперимент — при не слишком ярком окружающем освещении, отклонившись назад с расстояния 55см к 75см, освещение от монитора уменьшается в 1.5 раза (а в темноте и то больше). Рекомендуемое расстояние от монитора — 50-70см.
Перерывы
Регулярные перерывы от работы за монитором более полезны для зрения, чем всё вышеперечисленное вместе взято. Но как же это не забывать делать регулярные перерывы?
Мне исключительно понравилось приложение Workrave. Настраивается на разные промежутки времени и разные по длине паузы (напр., 3 коротких через каждых 15мин., 1 длинная каждый час). Умеет блокировать систему на определенное время без возможности отмены, что очень мотивирует встать с рабочего места 🙂 Имеет много маленьких удобностей в настройках. Например, за несколько секунд перед блокировкой выскакивает предупреждение и если уж сильно заняты и сейчас не до паузы, то просто продолжаете работать — приложение заметить активность (клавиатуры, мыши) и отменит блокировку. Также самостоятельно определяет когда вы сами делаете перерыв и сбрасывает свой таймер.
Упражнения
Подозреваю, что большинству читателям знакомы симптомы компьютерного зрительного синдрома такие как спазм аккомодации (псевдомиопия, ложная близорукость) или сухой глаз. В сети достаточно информации как предотвратить эти расстройства путём различных упражнений и гимнастики для глаз. Главное регулярно их делать, хотя бы несколько раз на день. Хочу отдельно отметить 2 типа.
Человеческое зрение устроено так, что нормальное состояние глаз (когда глазные мышцы расслаблены) это аккомодация вдаль. Поскольку в нормальных условиях монитор расположен относительно близко к глазам, то цилиарная мышца постоянно напряжена, чтобы держать хрусталик выпуклым для фокусировки на близкое расстояние. Это приводит к усталости и спазмам цилиарной мышцы (псевдомиопия), а с течением времени и к перманентному ухудшению зрения. Поочередное смотрение вдаль и вблизь, компенсирует это напряжение, для чего обязательно нужно оторваться от монитора (чему хорошо способствует Workrave) и периодически упражняться у окна по несколько минут.
Второй тип это фейс-пальминг.
Чтобы самому убедится в некоторых утверждениях сделанных в этой статье, я провёл простой эксперимент, в котором измерял количество света излучаемого на глаза в разных условиях. Измерял освещённость с помощью Minolta CL-200A. Фотодатчик держал на уровне глаз развернутым в сторону дисплея. В качестве светлой схемы взял за пример Google Docs (скрин), в качестве тёмной — Sublime (скрин).
Осветление. Старался смоделировать повседневные ситуации — яркое освещение с помощью люминесцентных ламп (офис), более мягкое освещение с помощью металлогалогенной лампы (дом) и без освещение (ночью). Дневной свет исключил поскольку результат сильно зависит от множества факторов (напр., погода) и имеет большой разброс в измерениях.
Расстояние. За дальнее расстояние взял длину своей руки 75 см. Ближнее — уклон на ~20 см вперед ближе к монитору.
Яркость дисплея. В условиях без осветления проводил измерения дважды — с максимальной яркостью дисплея и, соответственно, — минимальной.
Результаты измерений. Все данные свёл в одну таблицу. Для сравнения использовал соотношение между освещённостями в разных условиях. Как видно с таблицы при „среднем“ освещении отклонившись назад, освещённость уменьшается в 1.5 раза. А в темноте, если использовать темную схему, то освещённость уменьшается в 25 раз.
Disclaimer! Результаты эксперимент не претендуют на универсальность выводов, так как эксперимент делался “на коленке”. Но смею предположить, что похожие результаты будут наблюдаться у множества повседневных ситуациях.
Вот и всё. Надеюсь изложенный здесь материал кому-то пригодиться и поможет хоть немного разгрузить глаза.
¹В прошлом большинство бумаги делалось с древесины или растений, в которых содержится целлюлоза и/или лигнин. Именно эти вещества придают бумаге желтоватый цвет, который со временем научились отбеливать. Лигнин также источник ванильного аромата старых книг. А чернила (само слово уже намекает на цвет) уже делались чёрными для лучшей контрастности. В древности сажа была основным сырьем для чернил, потом долгое время были популярны чернила из дубовых орехов.
Когда следует использовать белый текст на темном фоне
Многие сайты используют черный текст на светлом фоне, потому что его легко читать. Однако, белый текст на темном фоне также может иметь свои преимущества. Знание, когда использовать одно из решений поможет сделать ваши проекты лучше.
Чтение или сканирование?
Когда дело касается текста на сайте, то пользователи читают либо просматривают (сканируют) текст. Чтение — это упор на слова для тщательного осмысления предмета. Сканирование включает считывание слов для более широкого понимания предмета. То, когда вы должны использовать белый текст на темном фоне зависит от того, читают или сканируют пользователи текст.
Текст параграфа
Вид текста, который пользователи читают — это параграфы. Поскольку пользователи читают параграфы, Вы должны избегать использования белого текста на темном фоне при отображении абзацев. Принуждение пользователей постоянно смотреть на белый текст может негативно сказываться на глазах. Это происходит потому, что белый цвет стимулирует все три типа цветочувствительных визуальных рецепторов человеческого глаза примерно в равных количествах. Для глаз чтение белого текста на темном фоне — это стресс.
Белый также отражает свет со всеми длинами волн. Потому слова и буквы в абзаце текста компактны и близки друг к другу. Когда лист бумаги отражает свет, свет рассеивается и распространяется на соседние слова и буквы. Черный фон делает форму слов и буквы трудными для восприятия. Сравните черный текст, где он поглощает свет вокруг каждого слова и буквы, что делает их как бы выделенными.
Именно поэтому лучшим выбором для отображения текста абзацев — черный текст на светлом фоне с оттенком серого. Не на белом фоне. Меньше света будет отражается за слова, что делает его легче для глаз. Черный текст работает лучше, т.к. черный — это также цвет, который не отражает света в любой части видимого спектра. Таким образом, черный цвет не дает большой нагрузки на глаза, поскольку он поглощает свет, который попадает на каждое.
Однако, если ваш сайт должен использовать темный фон, отображения основного текста — используйте серый. Это не будет нагружать глаза пользователя, потому как серый текст не так ярок, как белый. Он будет отражать меньше света, что делает его более удобным для чтения. Имейте в виду, что если вы читаете текст в темной комнате, где свет не присутствует, то белый текст на черном фоне не так труден для чтения. Происходит это потому, что свет не отражается от него в темной комнате.
Рубрики, названия и заголовки
Бывают моменты, когда белый текст на темном фоне бывает уместен. Эти моменты — когда пользователь сканирует текст глазами. Пользователи обычно сканируют заголовки, названия и автора. Использование белого текста на темном фоне для этих типов текста эффективный способ выделить их, чтобы привлечь внимание пользователя. Ведь белый отражает все цвета видимого спектра света в глаз. Это делает текст ярким и различимым. Вам не придется беспокоиться о нагрузке на глаза, поскольку сканирование этих типов текста не требует визуально фиксации. Это все лишь быстрый просмотр или проверка заголовка, названия или рубрики.
Использование белого текста на темном фоне, как инструмент выделения — умный способ показать важные элементы, которые пользователи часто пропускают. Применяя это правило на вашем сайте вы сделаете текст будет легкочитаемым, без вреда для глаз посетителей.
Оригинал на английском: When to Use White Text on a Dark Background
Накладываем текст на изображение правильно: полезные советы популярного фотостока
Фотография в качестве подложки под текст используется не только в веб-дизайне. Этот приём популярен как в оформительском дизайне, так и среди медиа. Оглянитесь вокруг: текст поверх изображения придаёт сообщению выразительность и способен стать эмоциональным крючком для потребителя.
Фотография в паре с текстом призвана рассказать целую историю, а не просто выступить в качестве декорации. Поэтому работа с изображением зачастую сложнее, чем просто затемнение или добавление прозрачности. Ключевая задача — соединение ритмического рисунка текста и графического рисунка фотографии.
Как это сделать? В Сети вы найдёте множество примеров и обсуждений того, как усилить воздействие текста при помощи фотографии. Ниже собраны самые интересные приёмы пользователей.
Текст, вписанный в пространство фотографии
laurawall-design.comИспользуйте пустое пространство на фотографии или растяните свободный от предметов фон для того, чтобы разместить там текст. Применяйте правило баланса: сгруппированные блюда уравновешены таким же количеством текстовых блоков.
Текст как часть изображения
gogoro.comДетали мопеда используются как основание для размещения текста. Тонкие и яркие линии букв переходят в очертания предметов. Отсутствие визуального шума обеспечивают фокусные точки — чёрные крышки приборных панелей.
Текст, размещённый на прямоугольнике или другой фигуре для улучшения читабельности
daucybio.frИзобилующая яркими деталями фотография всё равно раскрывает свою историю, потому что текст изолирован подложками. С одной стороны, в изображении соблюдено правило третей. С другой стороны, акцент делается на текст благодаря центральному размещению. В результате мы получаем сложное, но гармоничное соединение визуальных языков.
Прозрачный текст, через который видно фоновое изображение
carladasso.comБелый текст на чёрном или зелёном фоне может выглядеть достаточно грубо. Сделайте текст чуть бледнее, для того чтобы текстура предметов на изображении могла проступать через буквы и тем самым работать на смягчение графичности шрифта.
Уменьшение яркости фотографии для выделения текста
onepagelove.comКогда вы хотите добиться максимального акцента на тексте, сделайте фотографию под ним бледнее. Этот приём хорошо работает в тех случаях, когда само изображение несёт легко читаемую идею.
Использование минималистичной фотографии для эффектной расстановки акцентов
dribbble.comНе бойтесь пустого пространства и асимметричной композиции. Чистые и лёгкие шрифты в центре способствуют тому, что взгляд хочет переместиться к яркому акценту на периферии слайда. Разместите там то, что усилит ваше сообщение.
Вспомогательные элементы для фокусирования внимания на тексте и отделения его от фоновой фотографии
aquatilis.tvВы можете не просто сделать фотографию под текстом бледной, а усилить этот приём жирным начертанием шрифта и использованием рамок. Главное, чтобы фотография вторила сообщению, которое вы хотите донести до читателя.
«Параллакс» текста и фотографии
soyuzcoffee.comОдин из самых противоречивых приёмов из-за своей сложности. Помните о том, что человеческий взгляд (в западной традиции) стремится двигаться по слайду слева направо, а также быстро схватывает самые яркие цветовые акценты на плоскости.
Построение композиции таким образом, чтобы её элементом выступил не только текст, но и детали фотографии
gnosh.co.ukФоновое изображение предлагает разные возможности для экспериментов со шрифтами. Поворачивайте буквы под таким углом, чтобы следовать вектору размещения предметов, и используйте свободное пространство для создания нужного вам сообщения.
Особенно хорошо смотрится использование контрастного шрифта по отношению к фотографии, при этом текст вписан в пространство изображения.
pinterest.comГлавное в совмещении фотографии и текста — простота.
По возможности не усложняйте ритмические соединения и помните, что чем легче считываются визуальные истории, тем лучше!
Чёрный фон, белый шрифт: как должны выглядеть слайды для презентации
Арсений Ашомко
Директор по развитию медиапродуктов «ВКонтакте».
Как должны выглядеть слайды? Этому посвящены многие книги по презентациям. И всё же ни одна не говорит про главное.
В презентации, с которой вы будете выступать, должен быть тёмный фон (в идеале чёрный) и светлые шрифты, линии, графика (оптимально — белые). Это главная визуальная заповедь. А теперь придётся её обосновать.
Презентация на чёрном фоне — крайне непопулярное решение.
Дизайнеры фыркнут, что это испортит весь фирменный стиль и шаблоны вашей компании. Непродвинутые пользователи MS PowerPoint возмутятся, что тяжело найти картинки без фона. Ехидные товарищи заметят, что вы пересмотрели презентаций Apple. Начитанные — что белый текст на чёрном воспринимается хуже, чем чёрный на белом.
И всё же я настаиваю
Дело в том, что презентация если и вид искусства, то искусства прикладного. То есть всё должно быть подчинено практической цели — донести до аудитории информацию. А чтобы информацию хорошо воспринять, люди должны не только слушать, но и смотреть — на экран, перед которым (или рядом с которым) выступает спикер.
И вот какое дело: на любом экране чёрный — это отсутствие света, а белый — его максимальная интенсивность. Смотреть в течение получаса на залитый светом экран, строго говоря, не очень полезно. И не очень приятно для глаз.
Если изображение проецируется, то спикеру ещё и нельзя ходить перед всем экраном (а то появятся тени, засвеченные части тела и прочие несуразности). Если экран светодиодный или состоит из ЖК-панелей, то стоящий перед ним спикер будет подсвечиваться белым фоном, как сошедший на землю представитель небесного воинства.
А ещё бывает так. Бойтесь белых слайдовГлупо, некрасиво, больно и вредно для глаз — это первое.
Второе — следствие и продолжение. Если экран будет светлым пятном, то спикера надо подсвечивать отдельно и специально. Скорее всего, этого не будет, а значит, спикер станет тёмным силуэтом — лишённым возможности играть мимикой, взглядом, да и просто не привлекающим основное внимание тёмным кусочком сцены.
Третье — с белым фоном вы теряете эффектный и эффективный инструмент. После тёмных слайдов светлая картинка натурально зажигается и привлекает внимание даже давно уткнувшихся в телефоны зрителей, которые видят вспышку периферийным зрением.
После «светлого постоянного» «тёмное исключение», наоборот, будет восприниматься подсознательно как отдых, передышка — это смажет вам весь акцент «другого» слайда и лишит возможности как следует сыграть на контрасте.
Это основные аргументы в пользу тёмного фона.
Есть что возразить?
Не по шаблону
Прекрасно! Я не против фирменного стиля, но часто все эти рамочки и многочисленные рюши и логотипы в углах отвлекают от главного — содержания.
Сконцентрируйтесь сами и сконцентрируйте внимание аудитории на том, что вы хотите рассказывать, а не на ©️™️ All Rights Reserved IP PIOTR FYODOROVICH IVANOFF 2019.
Эффективнее будет — для вас и вашей компании.
Белое на чёрном тяжелее читается
Есть такой факт. Поэтому белым по чёрному писать большие тексты нельзя. Так и не надо! Удавите тех, кто размещает на слайдах для рассказа три абзаца текста. Должно быть написано три слова, а остальное вы расскажете вслух. Чтобы людям не приходилось выбирать: читать или слушать.
Где взять картинки без белого фона?
Да, более строгие требования задирают планку качества в работе с иллюстрациями. Нужно либо искать PNG без фона, либо осваивать Photoshop, привлекать дизайнера… Но это и хорошо: меньше халтуры — лучше продукт.
Сдаётся мне, именно поэтому в Apple создали и культивировали такую тёмную минималистичную эстетику презентаций. Не просто так, а для удобства зрителей и конечной эффективности такого жанра, как публичная презентация.
Но ведь Google…
Да, они делают по-другому. Боюсь, ребята обречены страдать, будучи заложниками ситуации. Повторять за главным конкурентом им нельзя.
Свайп для разблокировки смартфона тоже чрезвычайно удобен, но если он запатентован для iOS, то Android приходится искать лучшее из иных решений. Либо обжаловать в суде, что с патентом — вариант, а вот в маркетинге — вряд ли.
Посмотрите на другие большие компании : все пытаются найти свой стиль, но в рамках общего тёмного концепта. Потому что информация на сопровождающих презентацию слайдах так лучше выглядит и лучше воспринимается зрителями.
Но вернёмся к типичным условиям выступлений: проектор и экран.
Ещё один большой минус светлого фона — на экране будут видны границы прямоугольника слайда. Жить можно, конечно, но это очередной штрих небрежности в антураже выступления. Очередное напоминание, что мы далеко не в Купертино.
А ведь презентация должна вдохновлять! Давать возможность даже забыться и помечтать вместе с рассказчиком.
Белые (да и вообще любые светлые) буквы и объекты поверх чёрного фона будут парить на экране: никаких границ! Это хорошо.
Спикер стоит прямо перед проектором, но не перекрывает объекты на слайде, а чёрный фон не подсвечивает его. Изображение «висит» в пространстве. Всё идеальноНе забывайте включать мозг
Если презентацию вы отправляете по почте или выкладываете в интернет, то на слайдах должно быть текста достаточно для связного рассказа.
Если вы распечатываете презентацию на бумаге, пишите тёмным по белому, потому что при печати всё будет наоборот: белый — отсутствие краски. Поберегите картридж вашего принтера и природу.
Но если вы будете выступать со слайдами, сделайте их суперлаконичными по тексту, чтобы не отвлекать зрителей чтением. И на тёмном фоне, чтобы иметь больше возможностей донести информацию и быть понятым.
Иллюстрация автораКак и на все другие советы, на этот могут быть исключения. Из-за визуального концепта мероприятия, из-за маркетинговых нюансов (Окей, «Гугл»!) — да мало ли из-за чего! Главное помнить, что это именно исключения. А правило — тёмный фон.
Ну и важно чётко понимать и представлять себе, зачем и ради чего это исключение делается, оправданно ли оно. Если у вас всё под контролем, вы в любом случае молодец.
Иллюстрация автораЧитайте также 📈
Почему читать тексты в вебе становится всё труднее — мнение — Офтоп на vc.ru
Мне всё труднее читать тексты на смартфоне или ноутбуке. Я постоянно ловлю себя на том, что прищуриваюсь и подношу экран близко к лицу. Я даже начал беспокоиться за своё зрение.
Меня уже давно раздражает эта проблема, но последней каплей стало то, что платформа Google App Engine, с которой я работаю каждый день, вдруг из чёткой и ясной стала едва различимой. Текст, который только что был контрастным и тёмным, превратился в мертвенно-бледный. Да, с возрастом моё зрение падает, но в данном случае я явно страдаю от модного тренда.
В дизайнерских кругах стало модным уменьшать контраст между текстом и фоном, делая шрифт неудобным для чтения. Первой начала Apple, а затем к этому тренду присоединились Google и Twitter.
Может быть, не все считают типографику важным элементом дизайна, но на самом деле она очень много значит. Одна из причин, почему интернет стал для нас главным каналом получения информации, — это доступность. «Сила веба в его универсальности, — писал его создатель Тим Бернерс-Ли. — В том, что он доступен каждому, независимо от его физических возможностей».
Если информация транслируется через текст, который трудно прочесть, это автоматически сокращает её доступность для тех, у кого не очень хорошее зрение или не слишком современное устройство. Поскольку в интернете мы не только ищем нужную информацию, но и получаем и предоставляем жизненно важные услуги, у каждого человека должна быть возможность увидеть, что происходит на экране.
Веб-дизайнеры должны позаботиться о том, чтобы текст был доступен для большинства пользователей независимо от их зрения. Как физик по образованию я решил найти критерии видимости текста.
Старый дизайн Google App Engine — старомодно, но всё прекрасно видно
Современный дизайн с мелким и бледным текстом
Нетрудно догадаться, что главным условием разборчивости текста является контраст — разница между цветом шрифта и фона. В 2008 году организация Web Accessibility Initiative разработала общепринятый с
Вариации Сочетания Текста И Фонового Изображения В Веб-Дизайне И Photoshop / WAYUP
О популярности метода наложения текста на фоновое изображение можно говорить и не наговориться. Достаточно открыть номинации на лучший сайт дня/недели/месяца на Awwwards или cssdesignawards и увидеть собственными глазами многообразие фантазии веб-дизайнеров. Если присмотреться, то можно увидеть и гораздо большее. Где-то дополнительно использовались градиенты, затемнения, эффекты шрифта, а иногда при, казалось бы, похожих фотографиях текст размещается в разных местах. И дело здесь вовсе не в погоне за уникальностью.
На изображении может быть что угодно. Но что представляет собой ваш пользовательский интерфейс? Сможет ли эффект наложения всегда быть читаемым? Разумеется, ни одни веб-дизайнер не хочет, чтобы посетители или заказчик напрягали зрение и долго думали: «что же там написано-то»? И это тем более важно, если вы создаете дизайн сайта/приложения для смартфона. На маленьких экранах и текст-то маленький, а значит, и читать его сложнее. А если вокруг еще и картиночек много, то и совсем может приключиться беда.
Тем не менее, существуют некоторые методы сочетания или даже обработки такого эффекта, при котором можно быть уверенным в том, что текст будет видимым и разборчивым.
Текст и изображения в веб-дизайне
Для начала давайте посмотрим на некоторые особо яркие примеры сочетания текст и фонового изображения. Это проекты: Indykpol, Ginetta, New Vista Behavioral Health, 100 Days of Winter, Harajuku Dacci Pasta Labo, A Little Italian Food Workshop, Peter Zilka, Family Legacy, purpleandgrey, catscarf, Hero Image.
А теперь стоит обратить внимание на некоторые моменты этих сайтов: laferme, storymarketing, foster-designs, Article Cards
Везде ли удобно читать то, что написано? Например, давайте оттолкнемся от последних двух примеров. Представьте, если бы волны располагались бы ниже, текст бы уже не читался легко и быстро.
Фоновое изображение может быть разным и веб-дизайнер всегда готов к тому, что придется работать с самыми разными образцами. И нет, мы не говорим о том, что все плохо, нужно все делать совсем наоборот. Скорее, хотим обратить внимание на то, что текст и фоновое изображение не должны быть сами по себе.
Именно поэтому мы посмотрим, как сделать наложение текста удобным для чтения. И нет, разумеется, универсального решения. Все сводится к вашему личному предпочтению или даже подходящий метод для одного проекта совсем «не в кассу» будет выглядеть на другом.
Эффект холста
Холст представляет собой твердый полупрозрачный градиент, находящийся между изображением и текстом. В таком варианте текст может быть всегда белым, а градиент на холсте может быть от 40% непрозрачности от черного к белому (или прозрачному). Но опять же, это дело личного вкуса. Хотя именно 40% непрозрачности от черного к белому/прозрачному работает наилучшим образом. В таких композициях можно увидеть, что изображение плавно замирает, текст обретает больше контраста и становится доступным для чтения. Для примера, мы создали и 30% и 69% непрозрачности. Вид, конечно, оставляет ждать лучшего.
Преимущества
- Простое и популярное решение
- Улучшенная контрастность текста
- Едва заметные изменения в общей конструкции
Недостатки
- Резкие градиенты могут разрушить привлекательность изображения
- Можно слишком сильно затонировать фон и суть его будет не видна
Безусловно, использование холста популярно, особенно если градиент накладывается только на половину всего изображения. Но существуют и иные способы.
Тонирование
Если изображение для вас неважно, то его можно затонировать полностью черным цветом в 40% непрозрачности. Иногда использовать холст нет смысла, ибо текст частично все равно теряет свою четкость. Приходится делать промежуточный фон под все слова.
Преимущества
- Полезно для больших заголовков, текстовых блоков, которые размещаются на всей площади изображения
- Когда в приоритете текст, а не фоновая фотография
Недостатки
- Изображение скрывается целиком
- Фоновое изображение вообще может быть уменьшено, словно существует только для эстетики
Цветовые наложения
Очень похоже на тонировку, но вместо того, чтобы использовать черный и белый, можно взять иные цвета. В целом, выбор метода цветового наложения позволяет нейтрализовать напряженность композиции. Он блокирует практически все цвета и превращает фотографию в монотонную.
Какой цвет выбрать? Зависит от бренда. Но опять же, суть в том, чтобы текст был видим и четок.
Мягкие градиенты
Наверно, самый непростой вариант добавления контраста текста при сложном фоне. Не стоит использовать яркие и кричащие цвета, которые хороши сами по себе, но плохо сочетаются вместе. Для удобства воспользуйтесь coolors или Kuler, чтобы подобрать цвета, которые сработаются в сочетании друг с другом и будут подходить под композицию.
Сравните два градиента и поймете, о чем идет речь.
Преимущества
- Лучший вариант акцента на цвете бренда (если его уместно использовать)
- Однотонная часть градиента лучше подчеркивает текст
Недостатки
- Не подходит для фотографий с людьми, фауной, поскольку черты лиц и мордочек плохо узнаются. Они скрываются за общей тонировкой и плохо различимы.
Размытие
Эффект размытия по Гауссу позволяет смягчить изображение и сделать текст более видимым. Те, кто обладают iPhone, уже знакомы с такой техникой. В дизайне iOS размытие используется для обозначения глубины. В то время как в Android используется тень для обозначения глубины (высоты).
Не стоит размывать слишком сильно, образы должны оставаться видимыми и узнаваемыми.
Преимущества
- Помогает уменьшить значимость изображения
- Текст проще выделить на фоне фотографии
Недостатки
- Изображение полностью приносится в жертву удобству чтения
- Не решается проблема с подбором цвета для текста
- Не задействуются цвета бренда; нет соответствия большинству общепринятых стилей
Выделение текста
В данном случае мы изменяем цвет фона для самого текста, имитируя, тем самым, выделение маркером на бумаге части текста. Метод хорошо работает, если конструкция состоит из небольшого текстового объема и очень большого количества свободного фона. И, да, выделение не всегда бывает черным. Это может быть доминирующий цвет самой фотографии, цвет бренда.
Черное и белое
Иногда фотографии с текстом на карточках или блоках обесцвечивают, что позволяет действительно сделать текст более контрастным. Но не всегда это только черный и белый. Рассмотрите варианты преобладания серых оттенков, отдельно приглушенных или сочетания цветного фона и обесцвеченного. Сравните несколько вариантов ниже.
Эффект Glitch
Но между тем, иногда для главной станицы или промо-страницы, лэндинга хочется сделать что-то особенное и не ограничиваться общепринятыми стандартами. Для этого можно сочетать текстовые эффекты с методом наложения. И речь даже не идет о том, чтобы немного размыть тень за текстом и позволить ему размещаться на белой пене.
Попробуем просто найти красивое оформление текста и, возможно, даже незаурядное.
Открываем наше изображение, создаем слой-копию и немного осветляем с помощью Корректирующего слоя «Цветовой тон/Насыщенность». Если изображение и без того светлое, то можно особо и не осветлять.
Создаем текстовой слой с заголовком, названием, текстом. Подбираем шрифт, при необходимости с помощью Свободного трансформирования (Ctrl+T) увеличиваем размер. Цвет текста совершенно неважен, но вот шрифт желателен жирный. Иными словами, буковки должны быть широкими, в противном случае, никакого эффекта видно не будет.
Переходим на наш фон и делаем еще одну копию. Перемещаем её над текстом. Нажимаем ПКМ на слое в Панели слоев и выбираем из меню «создать обтравочную маску». Дополнительно слой с фотографией можно покрутить, деформировать и подобрать ту часть, что на буквах будет лучше смотреться.
Теперь создадим еще один пустой слой и разместим его между текстом и фоном. Выделим его на панели слоев, зажимаем Ctrl + ЛКМ по слою с текстом. У нас на экране появится выделение букв. Выбираем темно-серый цвет и, будучи на новом пустом слое, заливаем контур.
Активируем инструмент Перемещение и с помощью стрелок на клавиатуре немного двигаем наш слой в желаемую сторону. Открываем Фильтр -> Размытие — > Размытие по Гауссу и размываем нашу тень так, чтобы явной она не была. Но наличие её все же нужно для придания глубины. Можно сделать совершенно плоское изображение, но оно «потеряется».
Создаем еще один слой и размещаем между тенью и фоном. Рисуем на нем серый прямоугольник с закругленными углами.
Создаем еще одну копию фонового слоя и размещаем его прямо над прямоугольником, а режим наложения выбираем «мягкий свет».
Теперь выделяем на панели слоев слои с тенью, текстом и текстурой и делаем общую копию трех слоем (Ctrl+J). Много тени, понимаем, но иначе пока нельзя. Потом уберем.
Выделяем только два слоя (Море и Фон копия 8), выбираем инструмент Выделение. Выделяем часть буквы или, может, часть всего слова, переходим на инструмент Перемещение и с помощью стрелок на клавиатуре сдвигаем часть рисунка по направлению тени. Если сдвинуть в противоположную сторону у вас получится сильное затенение. Если тень отключить – сольется. А так получается разбитый текст.
Можно разбить весь, можно частями, можно только одну букву – вариаций много. Можно немного уменьшить слои с буквами и тенью, размыть границу прямоугольника и прочее и прочее. Если теней много, их можно размыть, снизить яркость слоя. Можно даже текстуру другую использовать.
Разумеется, что такой эффект не для массового использования, нежели вариации, приведенные нами в начале материала. Но для оформления отдельных категорий, разделов, страниц такой эффект найдет себе применение и жизнь.
Существует много сайтов с эффектом Glitch, хотя они и являются по большей части авторскими: wmnvm, oxtral, michaelvillar, jigsaw, bobby
Аналогично можно создавать текст над лесами или горами, но нижнюю часть букв слегка разрушить частичками скал или листвой, создавая, тем самым, эффект, будто бы тест вырвался из глубин земли. При этом эффект не должен быть ярким и контрастным, иначе он полностью заполнит собою визуальное пространство и посетители не будут больше ничего видеть, акценты будут не правильно расставлены.
Выводы
Мы рассмотрели разные методы, которые делают текст читабельным и не жертвуют при этом фоновым изображением. Даже в случае с разбивкой текста (Glitch), его (текст) можно понять, а морские волны и пену – разглядеть и узнать.
Хороший дизайн – продуманный дизайн. Дизайн, что обладает сбалансированными эстетическими визуальными эффектами, удобством и ясностью. Но и этого порой недостаточно. Может быть очень красиво, но непонятно, неприятно. Как вы видели, есть идеи смешивать разные виды, сочетать разные методы и привносить что-то новое. Вашему воображению нет предела.
Главное — правильные акценты и легкость эффекта. Даже если вы создаете текст, сквозь который видно фоновую фотографию, разбивка или добавление эффекта рваности должны быть воздушными. Любой стиль дизайна не обладает тяжеловесностью. Четкостью – да, контрастом – да, но не перегрузкой фотоэффектов. Даже наш эффект при малом размере смотрится понятно, четко и легко, ибо разрывы и тени неяркие и не «тяжелые».
Почему никогда не следует использовать чистый черный цвет для текста или фона
Знаете ли вы, что чистый черный текст может вызвать утомление глаз? Опрос показал, что «58 процентов взрослого населения США» испытали напряжение глаз от работы на компьютере. Дизайнеры могут внести свой вклад в снижение вероятности перенапряжения глаз при их дизайне, обращая внимание на черный цвет, который они используют.
Чистый черный текст на белом фоне
Чистый черный текст на белом фоне может вызвать утомление глаз, когда пользователи читают текст в течение длительного периода времени.Белый цвет имеет 100% яркость, а черный — 0%. Такое несоответствие яркости цвета создает интенсивные уровни света, которые чрезмерно стимулируют глаза при чтении текста. Это заставляет глаза усерднее работать, чтобы приспособиться к яркости.
Пример, иллюстрирующий эту концепцию, — это включение яркого света в темной комнате. Такое резкое изменение условий освещения неприятно для наших глаз. Но если мы включим тусклый свет в темной комнате, наши глаза легче адаптируются к изменениям, потому что наша сетчатка не чрезмерно стимулируется таким резким увеличением контраста.
Вместо черного текста используйте темно-серый текст на белом фоне, чтобы изменение яркости не было таким резким. Это предотвращает чрезмерную стимуляцию сетчатки и позволяет пользователям читать в течение более длительного периода времени.
Исследование показало, что «черный текст на белом фоне чрезмерно стимулирует выключенные ганглиозные клетки, в то время как белый текст на черном фоне чрезмерно стимулирует включенные ганглиозные клетки». Это открытие означает, что «белый текст на черном экране может подавлять миопию, а черный текст на белом фоне может стимулировать миопию.«Исследование не рекомендует читать черный текст на белом фоне из-за поразительного эффекта контрастной полярности.
Белый текст на чисто черном фоне
Есть также причины, по которым не следует использовать чисто черный фон с белым текстом. Чистый черный фон убивает весь свет, исходящий от экрана. Это заставляет глаза работать активнее и открывать шире, поскольку им нужно поглощать больше света. Когда это происходит, белые буквы могут проступать на черном фоне и вызывать размытие текста.Этот эффект известен как «ореол», и он влияет на пользователей с астигматизмом, который может быть у людей любого возраста.
Вместо черного фона используйте темно-серый фон, чтобы от него исходило больше света и текст не расплывался. Это снижает напряжение глаз и повышает выносливость при чтении.
High Contrast for Accessibility
Чистый черный цвет не вреден для всех пользователей. Пользователи с ослабленным зрением, но не слепые, как правило, лучше читают текст с чисто черным текстом или белым текстом на черном фоне.При разработке для них вам может потребоваться использовать черный цвет для режима доступности. Для пользователей с нормальным зрением используйте темно-серый цвет вместо черного, чтобы не утомлять глаза.
Сбалансированный контраст для лучшей читаемости
Высокий цветовой контраст полезен для удобочитаемости. Однако слишком высокий цветовой контраст создает значительную разницу в уровнях освещенности, которая влияет на глаза пользователя, когда он читает. Баланс контраста между текстом и цветом фона — эффективный способ сделать ваш текст безопасным для глаз пользователя.
Если вы не уверены в своем цветовом контрасте, вы можете использовать средство проверки цветового контраста, чтобы найти оптимальный диапазон, который вам подходит. Он показывает, когда ваш цветовой контраст слишком низкий, исходя из рекомендаций по доступности. Однако он не указывает на слишком высокий цветовой контраст. Это решение остается на усмотрение дизайнера.
Цвет текста не ограничивается черным и белым, но это наиболее распространенная цветовая комбинация для текста. Прежде чем использовать его, дизайнеры должны подумать о том, как он влияет на глаза пользователя.Дизайн, снижающий нагрузку на глаза, означает, что пользователи могут проводить больше времени за чтением и просмотром содержимого вашего интерфейса.
Филиалы
Когда использовать белый текст на темном фоне
Многие веб-сайты используют черный текст на светлом фоне для отображения своего контента, потому что его легко читать. Однако использование белого текста на темном фоне также имеет свои преимущества. Знание того, когда использовать одно перед другим, позволит вам разработать свой веб-сайт, не ухудшая читаемость для пользователей.
Сравнение чтения и сканирования
Когда дело доходит до текста на веб-сайтах, пользователи либо читают, либо сканируют. Чтение подразумевает сосредоточение внимания на словах для полного понимания предмета. Сканирование включает в себя беглый просмотр слов для более широкого понимания предмета. Когда вам следует использовать белый текст на темном фоне, зависит от того, сканируют или читают текст пользователи.
Текст абзаца
Тип текста, который читают пользователи, — это текст абзаца. Вам следует избегать использования белого текста на темном фоне при отображении текста абзаца, чтобы им было легче его читать.Принуждение пользователей зацикливаться на белом тексте в течение длительного времени может утомить пользователя. Это потому, что белый цвет почти в равных количествах стимулирует все три типа цветочувствительных зрительных рецепторов в человеческом глазу [источник]. Из-за этого чтение белого текста абзаца на темном фоне вызывает стресс для глаз.
Белый также отражает все длины волн света. Поскольку слова и буквы в тексте абзаца компактны и расположены близко друг к другу, когда белый текст отражает свет, отраженный свет рассеивается и наталкивается на соседние слова и буквы.Это затрудняет восприятие формы слов и букв, что влияет на удобочитаемость. Сравните это с черным текстом, где черный цвет поглощает свет вокруг каждого слова и буквы, делая их легко различимыми.
Вот почему лучший выбор для отображения текста абзаца — черный текст на светлом фоне с оттенком серого. На фоне серого оттенка за словами отражается меньше света, что облегчает работу глаз. Черный текст работает лучше, потому что черный также является цветом, который не отражает свет ни в одной части видимого спектра [источник].Таким образом, зацикливание на черном тексте при чтении не вызовет такой большой нагрузки на глаза пользователя, потому что он поглощает свет, падающий на каждое слово.
Если на вашем сайте используется темный фон, вы должны отображать текст абзаца серым оттенком. Это не так сильно напрягает глаза пользователя, потому что серый текст не такой яркий, как белый. Он будет отражать меньше света, что облегчит чтение. Имейте в виду, что если вы читаете текст в темной комнате, где нет света, белый текст на черном фоне читать не так сложно.Это потому, что в темной комнате от него не отражается свет.
Заголовки, заголовки и метки
Бывают случаи, когда белый текст на темном фоне работает хорошо. Это когда пользователи сканируют текст. Пользователи обычно просматривают заголовки, заголовки и этикетки. Использование белого текста на темном фоне для этих типов текста — эффективный способ выделить их, чтобы привлечь внимание пользователя.
Белый отражает все цвета видимого спектра света в глаза [источник].Это делает текст ярким и отчетливым. Вам не нужно беспокоиться о том, чтобы вызвать стресс у пользователя, потому что сканирование не требует долгой визуальной фиксации. Все, что нужно, — это быстро взглянуть на заголовок, заголовок или метку.
Использование белого текста на темном фоне в качестве инструмента выделения — это умный способ выделить текст, который пользователи сканируют. Но черный текст на светлом фоне лучше подходит для текста абзаца, который читают пользователи. Правильно используйте темные и светлые цвета, чтобы пользователи могли наслаждаться вашим контентом, не вызывая боли в глазах.
Филиалы
CSS Фон
Свойства фона CSS используются для определения фоновых эффектов. для элементов.
В этих главах вы узнаете о следующих свойствах фона CSS:
- цвет фона
- фоновое изображение
- фон-повтор
- фон-приставка
- background-position
Цвет фона CSS
Свойство background-color определяет цвет фона элемента.
Пример
Цвет фона страницы устанавливается следующим образом:
тело {
фоновый цвет: светло-голубой;
}
В CSS цвет чаще всего определяется следующим образом:
- допустимое название цвета — например, «красный»
- шестнадцатеричное значение, например «# ff0000»
- значение RGB — например, «rgb (255,0,0)»
Посмотрите на значения цветов CSS, чтобы получить полную список возможных значений цвета.
Прочие элементы
Вы можете установить цвет фона для любых HTML-элементов:
Пример
Здесь элементы
, и
будут иметь разные цвета фона: h2 {
цвет фона: зеленый;
} div {
background-color: lightblue;
}
p {
background-color:
желтый;
}
Попробуй сам »
Непрозрачность / прозрачность
Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы
наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере устанавливается прозрачность для цвета фона, а не для текста:
Из нашей главы о цветах CSS вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB,
вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет прозрачность цвета.
Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).
Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.
Пример
div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}
Попробуй сам »
Как получить белый текст с черным фоном на Kobos — Ночной режим
Раньше для электронных книг Kobo использовался простой способ включения ночного режима (белый текст на черном фоне), но он больше не работает с новыми моделями и новыми прошивками.
Обновление : теперь есть более простой способ использовать инвертированный режим. Все, что вам нужно сделать, это включить скрытое меню настроек разработчиков. См. Инструкции здесь: Как использовать режим перевернутого текста на электронных книгах Kobo по-новому.
Некоторые люди все еще спрашивают, как инвертировать текст в Kobos, и, хотя это не так удобно, как предыдущий вариант, есть простой способ получить белый текст на черном фоне в электронных книгах Kobo, включая Kobo Aura One и 2-го поколения. h3O.
Единственная проблема состоит в том, что нет возможности включать и выключать ночной режим, поэтому вы должны быть готовы использовать ночной режим все время.
Если вы не хотите этого делать, есть один обходной путь, но он требует установки и использования отдельного приложения для электронных книг под названием KOReader. В нем есть настройка инвертирования текста, он же ночной режим.
Но если вы предпочитаете использовать обычное программное обеспечение Kobo (называемое никель), вот что вам нужно сделать:
Как инвертировать текст на электронных книгах Kobo
1. Подключите устройство Kobo к компьютеру с помощью кабеля USB и откройте диск Kobo, чтобы просмотреть файлы.
2. Найдите .kobo и откройте папку Kobo внутри нее. Затем щелкните правой кнопкой мыши файл Kobo eReader.conf и выберите редактировать его с помощью обычного блокнота (Notepad ++ — хороший вариант).
3. Прокрутите вниз и добавьте этот фрагмент кода в конец файла, убедившись, что он написан именно так, в двух строках:
[FeatureSettings]
InvertScreen = true
* Если [FeatureSettings] уже существует, просто поместите InvertScreen = true под ним.
4. Закончив редактирование и сохранение файла, убедитесь, что электронная книга Kobo безопасно извлечена из компьютера.
5. Выключите Kobo и перезапустите его, чтобы настройки ночного режима вступили в силу.
Если на вашем Kobo установлена прошивка 4.3.8842 или новее, это должно работать.
Это то же самое, что и взлом полноэкранного режима, чтобы избавиться от верхнего и нижнего колонтитула Kobo, которые они помещают в электронные книги. Эти функции уже встроены в программное обеспечение Kobo, и хотя они не являются официальными функциями, их просто нужно включить, чтобы использовать их.
Минутку …
Пожалуйста, включите куки и перезагрузите страницу.
Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.
Подождите до 5 секунд…
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! [ ]) + !! [] + !! []) + (+ !! []) + (! + [] — (!! [])))
+ ((! + [] + (!! [ ]) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [ ] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (! ! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))
+ ((! + [] + (! ! []) + !! [] + !! [] + !! [] +! ! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! []) + (+! ! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! [] + !! []) + (+ !! [])) / + ((+ !! [] + []) + (+! ! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! []) »
+ ( (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] ) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [ ] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] +! ! [] + !! [] + !! [] + []) + (! + [] + (! ! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] +! ! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) — [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! []) + (+ !! []) + (+ !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! [ ]) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [ ] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (
Черный фон — подписи и цифровые изображения
Черный фон часто используется для контраста с искусством переднего плана и обеспечения визуальной глубины изображениям или текстовому контенту.
Однако их следует использовать с текстом с осторожностью, поскольку большинство людей предпочитают читать темный текст — особенно в форме полных предложений — на очень светлом фоне. При использовании во всемирной паутине цвета фона обеспечивают низкополосный метод изменения внешнего вида всей веб-страницы или ее элементов.
Чтобы создать черный фон через тег HTML body , table , td , th или tr , укажите атрибут bgcolor как «# 000000» или «black» .
Чтобы создать черный фон для элемента HTML с помощью CSS, укажите его атрибут background-color как black .
Абстрактный красный дизайн на черном фоне При использовании черного фона убедитесь, что имеется достаточный контраст с цветом (цветами) переднего плана.
Тем не менее, черный фон можно использовать для привлекательного дополнения практически любого цвета или цветовой схемы переднего плана.
Используя цвета, которые компенсируют черный фон, ваши рисунки и фотографии будут выделяться и привлекать внимание.
Фактически, минималистичные методы «плоского дизайна» с использованием темных цветов фона и простых элементов часто используются для создания баннеров, кнопок и изображений в социальных сетях.
Этот веб-сайт содержит образцы цифровых изображений с подписями на черном фоне и со ссылками на страницы, на которых расположены эти изображения.
Цифровые изображения с черным фоном
- Мешок из гессена (Изображение)
Мешок из натурального гессена. Фотография на черном фоне.В большой сумке полно фруктов и овощей, включая лук, бананы, красный перец и виноград. Здоровые продукты, которые вы носите в сумке, будут включены в вкусные семейные блюда.
http://www.totebags.us/hessian-bag.htm
- Carbide Bur Macro (Изображение)
Подробный крупный план твердосплавного бора на черном фоне. Твердосплавные боры доступны во многих конфигурациях, и оранжевая полоса на стержне бора указывает модель бора. Подробно показана конструкция бора.
http://www.carbide-burs.com/carbide-bur.htm
- Люстра в Польше (Image)
В хрустальных люстрах используется стекло и хрустальные призмы, отражающие свет для создания драматического эффекта. Эта фотография большой хрустальной люстры с множеством свечей на черном фоне демонстрирует тип хрустальной люстры, которая часто используется в театрах.
http://www.crystalchandeliers.us/chandelier-poland.htm
- Электрогитара (Изображение)
Вертикальный снимок электрогитары в полный рост выделен драматическим черным фоном.Разноцветное дерево с крупной текстурой делает эту шестиструнную гитару таким же произведением искусства, как и старинный музыкальный инструмент.
http://www.electric-guitars.us/electric-guitar.htm
- Круглые линзы для очков (изображение)
Пара круглых линз для очков плавает на черном фоне. Свет отражается от линз, создавая непрозрачный эффект. Сфотографированные таким образом линзы для очков по рецепту выглядят довольно артистично.
http: // www.eyeglass-lenses.com/eyeglass-lenses.htm
- Выездковые лошади (Изображение)
Головы двух выездковых лошадей словно плывут по черному фону. Обе лошади одеты в повязки для выездки и уздечки. На переднем плане серая лошадь с собранным профилем, а на заднем — каштановая лошадь с большим пламенем.
http://www.horsetack.us/two-horses.htm
- Vintage Alarm Clock
Будильник из нержавеющей стали вставлен в черный фон.Зеленые светящиеся элементы на циферблате и стрелках позволяют владельцу следить за временем в темное время суток.
http://www.tagweb.org/alarm-clock.htm
- Холщовая сумка-тоут (Изображение)
Холщовая сумка-тоут сфотографирована на открытом воздухе на серо-черном фоне. Розовое красное яблоко видно изнутри пакета, а другое красное яблоко и ромашки появляются вне пакета.
http://www.totebags.us/canvas-tote.htm
- Ковбойские сапоги (Изображение)
Пара мужских ковбойских сапог в стиле вестерн фотографируется на черном фоне.Сапоги ручной работы, коричневые, украшены искусной прострочкой и сделаны из двух разных типов и стилей кожи.
http://www.westernboots.us/cowboy-boots.htm
- Пламя камина
Оранжевое пламя костра из твердой древесины отражается на блестящей черной поверхности. Пламя в камине производит тлеющие угли, которые поднимаются вверх по невидимой трубе и превращаются в крошечный серый пепел.
http://www.word-cloud.org/flames.php
Абстрактные красные кривые на черном фоне Связанные страницы
- Черный — определение черного, статьи по теме и новости.
- White Background — примеры изображений с белым фоном.
Авторские права © 2012-2018 Black-Background.
цвет фона: зеленый;
}
div {
background-color: lightblue;
}
p {
background-color:
желтый;
}
Непрозрачность / прозрачность
Свойство непрозрачности определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем меньше значение, тем прозрачнее:
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы
наследуют ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере устанавливается прозрачность для цвета фона, а не для текста:
Из нашей главы о цветах CSS вы узнали, что в качестве значения цвета можно использовать RGB. Помимо RGB, вы можете использовать значение цвета RGB с каналом alpha (RGB A ), который определяет прозрачность цвета.
Значение цвета RGBA задается с помощью: rgba (красный, зеленый, синий, альфа ). В альфа Параметр — это число от 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).
Совет: Вы узнаете больше о цветах RGBA в нашей главе о цветах CSS.
Пример
div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с непрозрачностью 30% * /
}
Как получить белый текст с черным фоном на Kobos — Ночной режим
Раньше для электронных книг Kobo использовался простой способ включения ночного режима (белый текст на черном фоне), но он больше не работает с новыми моделями и новыми прошивками.
Обновление : теперь есть более простой способ использовать инвертированный режим. Все, что вам нужно сделать, это включить скрытое меню настроек разработчиков. См. Инструкции здесь: Как использовать режим перевернутого текста на электронных книгах Kobo по-новому.
Некоторые люди все еще спрашивают, как инвертировать текст в Kobos, и, хотя это не так удобно, как предыдущий вариант, есть простой способ получить белый текст на черном фоне в электронных книгах Kobo, включая Kobo Aura One и 2-го поколения. h3O.
Единственная проблема состоит в том, что нет возможности включать и выключать ночной режим, поэтому вы должны быть готовы использовать ночной режим все время.
Если вы не хотите этого делать, есть один обходной путь, но он требует установки и использования отдельного приложения для электронных книг под названием KOReader. В нем есть настройка инвертирования текста, он же ночной режим.
Но если вы предпочитаете использовать обычное программное обеспечение Kobo (называемое никель), вот что вам нужно сделать:
Как инвертировать текст на электронных книгах Kobo
1. Подключите устройство Kobo к компьютеру с помощью кабеля USB и откройте диск Kobo, чтобы просмотреть файлы.
2. Найдите .kobo и откройте папку Kobo внутри нее. Затем щелкните правой кнопкой мыши файл Kobo eReader.conf и выберите редактировать его с помощью обычного блокнота (Notepad ++ — хороший вариант).
3. Прокрутите вниз и добавьте этот фрагмент кода в конец файла, убедившись, что он написан именно так, в двух строках:
[FeatureSettings]
InvertScreen = true
* Если [FeatureSettings] уже существует, просто поместите InvertScreen = true под ним.
4. Закончив редактирование и сохранение файла, убедитесь, что электронная книга Kobo безопасно извлечена из компьютера.
5. Выключите Kobo и перезапустите его, чтобы настройки ночного режима вступили в силу.
Если на вашем Kobo установлена прошивка 4.3.8842 или новее, это должно работать.
Это то же самое, что и взлом полноэкранного режима, чтобы избавиться от верхнего и нижнего колонтитула Kobo, которые они помещают в электронные книги. Эти функции уже встроены в программное обеспечение Kobo, и хотя они не являются официальными функциями, их просто нужно включить, чтобы использовать их.
Минутку …
Пожалуйста, включите куки и перезагрузите страницу.
Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.
Подождите до 5 секунд…
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! [ ]) + !! [] + !! []) + (+ !! []) + (! + [] — (!! [])))
+ ((! + [] + (!! [ ]) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [ ] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (! ! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))
+ ((! + [] + (! ! []) + !! [] + !! [] + !! [] +! ! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! []) + (+! ! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! [] + !! []) + (+ !! [])) / + ((+ !! [] + []) + (+! ! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! []) »
+ ( (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] ) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [ ] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] +! ! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] +! ! [] + !! [] + !! [] + []) + (! + [] + (! ! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] +! ! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) — [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! []) + (+ !! []) + (+ !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (+ !! []) + (! + [] + (!! [ ]) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [ ] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (
| Черный фон часто используется для контраста с искусством переднего плана и обеспечения визуальной глубины изображениям или текстовому контенту.
Однако их следует использовать с текстом с осторожностью, поскольку большинство людей предпочитают читать темный текст — особенно в форме полных предложений — на очень светлом фоне. При использовании во всемирной паутине цвета фона обеспечивают низкополосный метод изменения внешнего вида всей веб-страницы или ее элементов. Чтобы создать черный фон через тег HTML body , table , td , th или tr , укажите атрибут bgcolor как «# 000000» или «black» . Чтобы создать черный фон для элемента HTML с помощью CSS, укажите его атрибут background-color как black . Абстрактный красный дизайн на черном фонеПри использовании черного фона убедитесь, что имеется достаточный контраст с цветом (цветами) переднего плана. Тем не менее, черный фон можно использовать для привлекательного дополнения практически любого цвета или цветовой схемы переднего плана. Используя цвета, которые компенсируют черный фон, ваши рисунки и фотографии будут выделяться и привлекать внимание. Фактически, минималистичные методы «плоского дизайна» с использованием темных цветов фона и простых элементов часто используются для создания баннеров, кнопок и изображений в социальных сетях. Этот веб-сайт содержит образцы цифровых изображений с подписями на черном фоне и со ссылками на страницы, на которых расположены эти изображения. Цифровые изображения с черным фоном
Связанные страницы
Авторские права © 2012-2018 Black-Background.  |