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

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

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

 

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

Автор: Chris Coyier

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Метки:

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

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

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

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