Как сделать темным фон сайта
Как сделать тёмную тему для сайта
Рассказываем, как добавить на сайт тёмную тему и выбрать для неё цвета, комфортные для глаз.
Куда ни плюнь, везде появляются тёмные темы: в операционных системах, социальных сетях, видеохостингах и даже на обычных сайтах. Если вы разрабатываете что-то из этого, то вам будет полезно знать, как создаётся тёмная тема, потому что рано или поздно вас попросят её сделать.
Рассказываем, как выбирать цвета, которые не будут сильно контрастировать, как сменить тему и сделать так, чтобы она не сбрасывалась при обновлении страницы.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Цвета, от которых не будет больно
Правильно подобранные цвета делают сайт красивым: он приятно смотрится и не вызывает боль. Я не дизайнер, поэтому расскажу только об одном аспекте — контрасте.
Выбранные цвета не должны сильно контрастировать друг с другом. Яркий пример — чёрный текст на белом фоне. Между этими цветами целая пропасть, поэтому после долгого чтения у пользователя начнут болеть глаза.
Использовать настолько контрастные цвета рекомендуется только тогда, когда вы добавляете отдельную тему для людей с плохим зрением. В остальных случаях лучше сделать фон сероватым, например, #f4f4f4, а шрифт — угольным (#373737) или почти чёрным (#111111).
В светлых темах более яркие цвета используют для фона, а тёмные — для текста и различных элементов страницы. Например, основной фон может быть светлым, а текст, хедер, футер, кнопки и другие объекты — тёмными. Всё наоборот в тёмных темах: в них фон делают как можно менее ярким, а всё остальное чуть менее тёмное.
Посмотрите, как делают темы в других приложениях, — возможно, найдёте что-то, что захотите сами использовать.
Определившись с палитрой, можно начинать работать над сайтом.
Создание сайта
Для начала создадим страницу, для которой сделаем несколько тем:
Простая страница, на которой есть хедер и небольшой текст. Из особенностей можно выделить подключение двух файлов стилей: main.css и light.css. В первом будут указаны основные стили страницы, а во втором — цвета для светлой темы.
Также у второго тега есть идентификатор, который понадобится для работы скрипта — в нём будет меняться путь к файлу. Когда путь изменится, браузер автоматически загрузит и применит стили из другого файла.
Как сделать затемнение фона через CSS
Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.
Давайте напишу HTML-код:
Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять. Привожу CSS-код:
#TB_overlay <
background-color: #000; /* Чёрный фон */
height: 100%; /* Высота максимальна */
left: 0; /* Нулевой отступ слева */
opacity: 0.50; /* Степень прозрачности */
position: fixed; /* Фиксированное положение */
top: 0; /* Нулевой отступ сверху */
width: 100%; /* Ширина максимальна */
z-index: 100; /* Заведомо быть НАД другими элементами */
>
Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение. Максимальное значение 1. Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.
На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 8 ):
Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?
Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.
Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства: Всплывающая Подсказка
Как сделать темную тему в Яндекс Браузере на ПК и телефоне
Часто мы используем компьютер в темное время суток, и в это время белый свет экрана очень сильно нагружает глаза. Чтобы работа в сети была комфортной и безопасной для зрения стоит избегать ярких контрастных элементов на экране. В этой статье я расскажу, как сделать темную тему в Браузерах Яндекса для телефона и компьютера, а также как сделать темными страницы посещаемых сайтов.
Содержание:
Темная тема Яндекс Браузера на компьютере
Начнем преображение нашего Яндекс Браузера с установки стандартной темной темы. Для этого откройте выпадающее меню нажав на кнопку с тремя полосками в правом верхнем углу, далее перейдите в настройки.
В настройках выберите раздел «Интерфейс» и в нем среди цветовых схем найдите темную. Обратите внимание, что под темами ещё есть строчка «Использовать тёмные фоны с тёмной темой браузера», если поставить тут галочку, то на главной странице браузера у вас автоматически изменится фоновое изображение на темное.
Есть еще вариант цветных комбинированных темных тем, для просмотра нажмите на папку «цветная» в цветовых схемах. Для предпросмотра темы достаточно на неё нажать.
С интерфейсом разобрались, давайте перейдем к страницам.
Темный цвет фона на страницах сайтов
Тема браузера влияет лишь на малую часть рабочей области и никак не меняет внешний вид страниц на веб-сайтах, а ведь именно от них идет основная нагрузка на зрение. Дальше я расскажу вам два способа как сделать страницы веб-сайта темными.
Затемнение в режиме чтения
В Яндекс Браузере имеется режим чтения, с помощью которого вы в несколько кликов можете сделать страницу темной. Особенностью режима является то, что при его использовании на странице остаются только текст и картинки в тексе, а остальные элементы полностью скрыты. Также есть минус, функция доступна не на всех веб-страницах.
Для включения режима чтения в умной строке браузера правее адреса сайта найдите кнопку как на скриншоте ниже и нажмите на неё, если кнопки нет, значит данный режим не доступен на этой странице. Второй способ включения – это нажать на свободном поле правой кнопкой мыши и в выпадающем меню выбрать соответствующую функцию.
После включения режима чтения в верхней части страницы появится меню с настройками. В нем знаками «+» и «-» вы можете изменить размер шрифта, далее три варианта фона, поскольку мы настраиваем темную тему, я выбрал последний, на скриншоте видно, как выглядит кусочек текста, также есть возможность изменить шрифт. Эти настройки будут автоматически использоваться и на других страницах.
Для выхода из режима чтения нажмите на соответствующий значок в умной строке или на крестик в правой части панели настроек режима. Прилагаю оригинал страницы из приведенного выше примера, чтобы вы могли увидеть разницу.
Затемнение с помощью плагинов
Второй способ сделать сайты темными – это установить специальные расширения, работают они на любых веб-страницах.
Переходим в магазин и в поиск вводим «темный режим».
В результатах появится три расширения, я попробовал на практике их все:
Как сделать темную тему в Яндексе на Андроиде
Чтобы сделать тему в Яндекс Браузере на телефоне придется также пройти 2 шага:
Начнем. Запустите приложение и в поисковой строке нажмите на кнопку с тремя точками.
Откроется меню, где нужно кликнуть на значок «темная тема».
На скриншоте ниже представлен вариант темной темы. При желании можно изменить фон главной страницы браузера, для этого нажмите «изменить фон» и выберете подходящую картинку.
Затемнение страниц сайтов в мобильном браузере
К сожалению, так же, как и на персональном компьютере, для изменения самих веб-страниц потребуется установка сторонней программы, например, расширения Care your Eyes.
После установки все открываемые страницы будут иметь черный фон и белый или цветной текст на нем.
Теперь вы знаете, как сделать темную тему в Яндекс Браузере на телефоне и компьютере и сможете сохранить здоровье, снизив нагрузку на глаза.
Как и когда создавать сайт с черным фоном
Черный всегда был — если не самым популярным цветом дизайна — цветом, о котором дизайнеры говорят больше всего. Это сложный, энергичный, таинственный, элегантный, мощный, стильный и полная противоположность белому, используемого по умолчанию.
Теперь мы хотим сосредоточиться на том, что это полная противоположность белому (я буду говорить об этом дальше в тексте), потому что это то, что вам нужно и что вы хотите в дизайне—что-то другое и интригующее, например, черный цвет.
Но зачем вам это нужно? Когда настает правильное время создать черный фон для вашего сайта? Я собираюсь рассказать обо всем этом и многом другом в этом посте, и справедливое предупреждение: это станет действительно темным, затем еще темнее, и наконец, этот мрачный оттенок, который еще темнее, чем # 555 (ваши коллеги-разработчики знают, что я говорю).
Итак, без лишних слов, давайте исследовать эту черную материю дальше! 
Немного о дизайне с черным фоном
Конечная цель дизайнеров — сделать контент сайта привлекательным и выделяющимся из подобных. Однако еще большая цель (если не самая главная) — создать веб-сайт, который служит его цели. Вот что вам нужно знать: дизайнеры должны подчеркивать важные элементы. Это их цель почти во всем, что они делают, и их задача — создать иерархию в этом акцентировании, чтобы выделить наиболее важные детали на веб-сайте.
Черный идеально подходит, если вы хотите подчеркнуть что-то на фоне любого другого цвета, особенно на белом. Белый цвет представляет собой пустой старт в нашем опыте (он обозначает дневной свет, чистую бумагу, страницу без контента и т. д.), в то время как цвет черный считается ничем иным, как любым другим цветом, например контентом. Вот почему белый цвет является первым выбором для фона веб-сайта.
С другой стороны, черный цвет «самый тяжелый» из всех, и из-за этого нам может быть трудно выделить другие элементы. Однако вы можете использовать эту черноту, чтобы подчеркнуть другой контент. Возможно, вы заметили, что элементы, имеющие черный фон, всегда кажутся меньше. Это впечатление вызвано психологическим эффектом, который имеет черный цвет у людей: мы склонны рассматривать черный как отсутствие цвета с потенциально чем-то в нем. 
Самая большая проблема пользовательского опыта с темным фоном по-прежнему удобочитаемость, которая заметно уменьшается, когда мы используем темный фон, причем не только потому, что нашим глазам труднее заметить разницу в цвете, но и из-за света экрана, который создает белый отблеск.
На практике это звучит так:
По большому опыту, люди обычно считают сайты с темным фоном ненадежными, потому что они нетрадиционны. Тем не менее, люди, которые являются художественными, даже немного, находят такой выбор интересным и заманчивым. Итак, в конце концов, все дело в аудитории.
В чем проблема с черным цветом?
Главная из них заключается в том, что люди считают его менее привлекательным, чем другие цвета.
Люди думают о нем как о депрессивном, пессимистичном, серьезном, грустном и цвете негатива, и, видя, что мы реагируем на такие вещи бессознательно, мы мало что можем сделать, чтобы изменить это.
Было доказано снова и снова, что люди ожидают увидеть белый цвет, когда они приходят на веб-сайт, и они чувствуют себя знакомыми и в безопасности с ним. Вот почему эксперты UX не слишком заинтересованы в смене стандартного белого на нетрадиционный черный.
Как видите, проблема с черным цветом фона реальна.
Итак, есть ли место для черных фонов в дизайне?
В мире дизайна нет строгих правил о том, что вы можете и не можете сделать, и то же самое касается черного цвета. За эти годы, однако, можно было заметить, что черные фоны лучше всего работают для следующего типа сайтов:
Советы по использованию черного цвета в дизайне
Прежде всего: даже при использовании черного фона важно создать много «белого пространства», потому что черная поверхность визуально меньше. Белый фон также служит «разрывом», который является вещью, отсутствующей на темном фоне. Также важно более тщательно проверить удобство использования. По опыту, вы никогда не должны использовать тонике начертания шрифта, и он всегда должен быть на 2 или 3 пикселя больше, чем тот же шрифт на белом фоне.
Как уже упоминалось, самая большая проблема с черным фоном — читаемость, и каждый дизайнер должен знать, как с ней обращаться (подсказка: увеличение размера шрифта, кернинг).
При выборе темных фонов в качестве базы вам нужно помнить, что шанс для вас использовать обычные, изученные элементы дизайна снижается. Помимо того, что дизайнеры должны думать немного сильнее об обычных элементах, они также должны приложить усилия, чтобы сделать контент более интересным и эффекты более творческими.
На что вам нужно обратить внимание, так это то, какие цветовые оттенки вы используете. Это касается того, как вы всегда должны использовать тонированный черный цвет в дизайне и что этот оттенок должен исходить из основного цвета, который вы используете. В примерах, которые добавлены, используются тонированные и истинные черные (# 000), поэтому я думаю, что идея не является обязательной.
Идея оттенить базовый цвет исходит от природы, где очень трудно увидеть оттенки #000000 и #ffffff (не только из-за формата).
Другая проблема заключается в том, что ночные режимы используют именно эту «проблемную» компоновку (черный фон). Каждое расширение браузера и инструмент для оптимизации в темном окружении предлагает возможность использовать темный фон и белый текст. Кроме того, если есть возможность изменить окружающий цвет в приложении, всегда есть вариант черного фона. 
Ситуации, в которых вы всегда можете использовать черный фон
Этот пост может быть о сайтах с черным фоном, но хочется затронуть пару элементов, которые отлично работают с черным фоном. Скорее всего, вы будете создавать эти элементы в какой-то момент, так что все вышеперечисленное наверняка пригодится. Элементы, о которых я говорю, это:
Помните, когда я сказала, как в дизайне, выделение играет огромную роль, и черный действительно может помочь вам сделать это правильно. Черный фон в хедере не так уж и распространен, но и это не удивительно. Футер также может быть темнее, потому что хедер и футер символизируют края контента веб-сайта, и это может быть довольно удобным выбором для их окраски в более темный цвет.
То же самое относится и к другим элементам, которые были упомянуты: разделы, комментарии и всплывающие окна. Видя, что они не являются “основным содержанием”, они могут и должны быть оформлены по-разному.
Вывод
Если вам удастся найти нужное место и вовремя использовать черный фон, то делайте это. Однако имейте в виду, что эти возможности случаются редко, и если вы упустите свой шанс, вам, вероятно, нужно будет долго ждать следующего подходящего момента, чтобы сделать это.
Вам лично может нравиться черный цвет (в этом нет ничего плохого), но вы не должны быть дизайнером, который использует черный во всех своих проектах: настоящие дизайнеры знают, как распознать время и место для него.
Всем успешной работы!