Основы CSS: как сделать белый цвет шрифта видимым во время загрузки фонового изображения

Основы CSS: как сделать белый цвет шрифта видимым во время загрузки фонового изображения

От автора: нечитаемый текст – вы очень хотите, чтобы его не было в веб-дизайне. Текст может стать нечитаемым, если цвет шрифта CSS близок или совпадает с фоновым цветом. Например.

 

.header {
  background-color: white;
  color: white;
}

Текст останется, но он не будет виден.

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Как правило, используется свойство background-image, которое меняет цвет фона, а вы устанавливаете белый текст поверх него.

header {
  background-image: url(plants.jpg);
  color: white;
}

В идеальных условиях все хорошо:

Но давайте посмотрим, что будет, если сайт загружается на очень распространенном соединении «Slow 3G»:

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

header {
  background-color: black;
  background-image: url(plants.jpg);
  color: white;
}

Черный фон сделает белый текст видимым, пока загружается фоновое изображение (или если оно вообще не загрузится!). Можно сделать немного приятнее и использовать цвета из изображения. Мне нравится небольшое приложение Frank DeLoupe. С его помощью можно выбрать цвет в любом месте на экране. Далее я использую этот цвет как фолбек с помощью сокращенного синтаксиса для фонов:

header {
  background: #334C23 url(plants.jpg);
  color: white;
}

Намного лучше. Почти никаких усилий, а дизайн и UX становятся лучше. Чем больше вы будете писать так, тем быстрее это станет вашей «мышечной памятью» CSS.

Так как мы работаем с фотографией, то затрагиваем еще одну идею — Progressive JPG. В Photoshop есть возможность сохранения JPG в этом формате. Формат меняет способ отображения, так как доставка проходит по сети. Видео сравнения:

Быть может, такая загрузка намного лучше, но это не замена фолбек цвета.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree