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

Дата публикации: 2018-02-26

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

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

.header {

background-color: white;

color: white;

}

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

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

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

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

header {

background-image: url(plants.jpg);

color: white;

}

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

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

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

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

header {

background-color: black;

background-image: url(plants.jpg);

color: white;

}

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

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

header {

background: #334C23 url(plants.jpg);

color: white;

}

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

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