Решите распространенную проблему несовпадения цветов с помощью этого удобного, но малоизвестного свойства CSS.
Со стационарными элементами веб-сайта, такими как логотипы, вы часто сталкиваетесь с путаницей цветов при прокрутке страницы. Это может произойти, если статический элемент проходит через раздел веб-сайта, который имеет тот же цвет, что и элемент. Статический элемент будет невидим, пока он находится на этом фоне.
Чтобы решить эту проблему, вам нужно динамически инвертировать цвет логотипа, когда он проходит над элементом того же цвета. Узнайте, как добиться этого эффекта, используя только CSS, без JavaScript!
Загрузите стартовый код
Чтобы следовать этому руководству, загрузите начальный код со своего Репозиторий GitHub на вашу локальную машину.
Открыть index.html в браузере, который должен выглядеть как показанная здесь страница:
HTML-страница содержит логотип и четыре раздела. Каждый раздел имеет фиктивный заголовок и три абзаца фиктивного текста. Текст логотипа выполнен в том же черном цвете, что и фон второго и четвертого разделов. Этот эффект происходит от
n-й ребенок (четный) заблокировать стили.css, который применяет черный фон к четным участкам.Делаем логотип липким
С этим стартовым кодом логотип не прилипает к верху. Это означает, что логотип исчезает при прокрутке страницы вниз. Вы можете превратить свой логотип в липкий заголовок, применив положение: липкое свойство для него внутри файла CSS. Чтобы глубже погрузиться в позиционирование в CSS, прочитайте нашу статью на Свойство позиции CSS.
Убедитесь, что логотип прилипает к верхней части экрана, но делайте это только на больших экранах (поскольку на экранах меньшего размера он может выходить за пределы других элементов). Следующее Медиа-запрос, отвечающий HTML создает такой эффект:
@СМИ(ширина > 980 пикселей) {
.лого {
позиция: липкий;
вершина: .5рем;
}
}
Теперь логотип всегда будет оставаться сверху и следовать за вами при прокрутке. Но вы также заметите, что текст исчезает, когда вы прокручиваете разделы с темным фоном (потому что текст логотипа также черный). Теперь посмотрим, как это исправить.
Добавление режима смешивания в ваш липкий заголовок
Чтобы черный логотип не исчезал на черном фоне, вам нужно будет динамически инвертировать цвет. Как вы это сделаете, используя смешанный режим свойство CSS и присвоение ему значения разница:
@СМИ(ширина > 980 пикселей) {
.лого {
позиция: липкий;
вершина: .5рем;
смешанный режим: разница
}
}
Свойство CSS mix-blend-mode указывает, как содержимое элемента должно сочетаться с содержимым родительского элемента и его фоном. Другое значение принимает значение разницы каждого пикселя, инвертируя светлые цвета. Поэтому, если значения цвета одинаковы, они становятся черными. Различия в значениях будут инвертированы.
Приведенное выше добавление CSS заставит логотип полностью исчезнуть. Это связано с тем, что вы не установили белый цвет текста логотипа вне медиа-запроса. Сделайте это с помощью следующего кода:
.лого {
цвет: белый;
/* Другие свойства CSS */
}
Теперь вы успешно все настроили. Прокрутите страницу вниз и на черный фон. Вы увидите, как логотип меняется с черного на белый.
Вы также можете работать с другими цветами, кроме черного и белого. Например, если вы изменили цвет текста логотипа на бирюзовый (#008080), вы получите розовый цвет на белом фоне. Следующее изображение иллюстрирует это.
В большинстве случаев вы хотите, чтобы ваш элемент был белым, чтобы получить наилучшие результаты. Кроме того, если вы прокрутите вверх, вы можете обнаружить, что ваш логотип разрезан пополам. Это происходит потому, что логотип существует вне элемент. Чтобы логотип отображался полностью, необходимо установить цвет фона элемент в белый цвет.
Использование изображения в качестве логотипа вместо текста
Этот метод работает не только с текстом, но и с изображениями. Конечно, вам нужно убедиться, что вы используете белое изображение в качестве логотипа. В следующем примере используется белый логотип lorem ipsum, который находится в той же папке, что и index.html файл:
<изображениеисточник="лоремипсум-297.svg"альтернативный="Логотип Лорем Ипсум">
Здесь используется изображение в формате SVG (масштабируемая векторная графика). векторный файл.
Теперь цвет вашего логотипа будет черным на белом фоне, как показано на изображении ниже.
Но если вы прокрутите страницу до черного фона, цвет логотипа автоматически станет белым. Вы можете увидеть это на изображении ниже.
Вы также можете увеличить размер логотипа, заменив размер шрифта с высота и ширина в блоке CSS, ориентированном на логотип. В конце концов, теперь вы имеете дело с изображением, а не с текстом.
.лого {
цвет: белый;
ширина: 10бэр;
/* Другие свойства CSS */
}
Если вы уменьшите экран, медиа-запрос больше не будет применяться. Это отключит различные режимы наложения, и ваш логотип исчезнет. Чтобы вернуть логотип на страницу, необходимо установить смешанный режим свойство на логотипе вне медиа-запроса:
.лого {
цвет: белый;
ширина: 10бэр;
смешанный режим: разница;
/* Другие свойства CSS */
}
Это активирует смешение на логотипе в любое время, даже на больших экранах. Но на маленьких экранах логотип останется вверху и не будет следовать за вами при прокрутке вниз (потому что положение: липкое работает только на больших экранах). Наконец, всегда не забывайте использовать белый логотип, чтобы он не исчез со страницы.
Узнайте больше советов и рекомендаций по CSS
Используя режим смешивания, вы можете создавать увлекательные макеты с чередующимися цветами. Еще лучше то, что вам не нужно жестко кодировать какой-либо цвет или устанавливать точки останова, потому что режим смешивания-смешивания будет динамически инвертировать цвет. Он позволяет создавать приятные сочетания и цвета для частей содержимого элемента в зависимости от его прямого фона.
CSS часто считают одним из самых захватывающих языков для изучения. Отчасти это связано с тем, что в CSS полно советов и приемов, подобных тому, который вы только что узнали в этой статье. Некоторые другие полезные советы и приемы CSS — это эффекты наведения, изменение размера изображений, чтобы они поместились в контейнеры, усечение текста многоточием и использование преобразования текста.
