Разрешете често срещан проблем със сблъсък на цветовете с това удобно, но малко известно свойство на CSS.
При стационарни елементи на уебсайтове като лога, често ще се сблъскате с объркване на цветовете, когато превъртате страницата. Това може да се случи, ако статичният елемент премине през секция от уебсайта, която споделя същия цвят с елемента. Статичният елемент ще бъде невидим, докато лежи на този фон.
За да коригирате този проблем, трябва да инвертирате динамично цвета на логото, когато преминава върху елемент със същия цвят. Научете как да постигнете този ефект, като използвате само CSS, без да е необходим JavaScript!
Изтеглете началния код
За да следвате този урок, изтеглете началния код от него GitHub хранилище към вашата локална машина.
Отворете index.html в браузър, който трябва да изглежда като страницата, показана тук:
HTML страницата съдържа лого и четири секции. Всеки раздел има фиктивно заглавие и три параграфа с фиктивен текст. Текстът на логото е със същия черен цвят като фона на втория и четвъртия раздел. Този ефект идва от
n-то дете (четно) блокирам styles.css, който прилага черния фон към четните секции.Направете логото лепкаво
С този начален код логото не залепва в горната част. Това означава, че логото изчезва, когато превъртите страницата надолу. Можете да превърнете логото си в лепкава заглавка, като приложите позиция: лепкава свойство към него вътре в CSS файла. За дълбоко гмуркане в позиционирането в CSS, прочетете нашата публикация на Свойство CSS позиция.
Уверете се, че логото се придържа към горната част, но го правете само на по-големи екрани (тъй като при по-малки размери на екрана може да премине върху други елементи). Следното HTML адаптивна медийна заявка създава този ефект:
@медия(ширина > 980 пиксела) {
.лого {
позиция: лепкава;
Горна част: .5rem;
}
}
Сега логото ще остане в горната част през цялото време и ще ви следва, докато превъртате. Но също така ще забележите, че текстът изчезва, когато превъртите в секциите с тъмен фон (защото текстът на логото също е черен). Сега вижте как да поправите това.
Добавяне на режим на смесване-смесване към вашия Sticky Header
За да сте сигурни, че черното лого няма да изчезне на черен фон, ще трябва да инвертирате цвета динамично. Начинът, по който бихте направили това, е като използвате режим на смесване-смесване CSS свойството и присвояването му на стойност разлика:
@медия(ширина > 980 пиксела) {
.лого {
позиция: лепкава;
Горна част: .5rem;
режим на смесване-смесване: разлика
}
}
CSS свойството mix-blend-mode указва как съдържанието на даден елемент трябва да се слее със съдържанието на родителския елемент и неговия фон. Различната стойност приема стойността на разликата на всеки пиксел, обръщайки светлите цветове. Така че, ако стойностите на цвета са еднакви, те стават черни. Разликите в стойностите ще се обърнат.
Горната CSS добавка ще накара логото да изчезне напълно. Това е така, защото не сте задали цвета на текста на логото на бяло извън медийната заявка. Направете това със следния код:
.лого {
цвят: бяло;
/* Други свойства на CSS */
}
Сега успешно сте настроили всичко. Превъртете страницата надолу и в черния фон. Ще видите как логото се променя от черно на бяло.
Можете да работите и с други цветове освен черно и бяло. Например, ако промените цвета на текста на вашето лого на синьозелен цвят (#008080), ще получите розов цвят на бял фон. Следното изображение илюстрира това.
В повечето случаи бихте искали вашият елемент да е бял, за да получите най-добри резултати. Освен това, ако превъртите до върха, може да намерите вашето лого разрязано наполовина. Това се случва, защото логото съществува извън елемент. За да покажете логото изцяло, трябва да зададете цвета на фона на елемент към бяло.
Използване на изображение като лого вместо текст
Тази техника работи не само с текст, но и с изображения. Разбира се, трябва да се уверите, че използвате бяло изображение като лого. Следващият пример използва бяло лого на lorem ipsum, което е в същата папка като index.html файл:
<imgsrc="loremipsum-297.svg"алт=„Лого на Lorem Ipsum“>
Изображението, използвано тук, е SVG (Scalable Vector Graphic), тип на векторен файл.
Сега цветът на изображението на вашето лого ще бъде черен на бял фон, както е показано на изображението по-долу.
Но ако превъртите на черен фон, цветът на логото автоматично ще стане бял. Можете да видите това на изображението по-долу.
Можете също да увеличите размера на логото чрез замяна размер на шрифта с височина и ширина в CSS блока, насочен към логото. В крайна сметка сега имате работа с изображение, а не с текст.
.лого {
цвят: бяло;
ширина: 10рем;
/* Други свойства на CSS */
}
Ако свиете екрана надолу, медийната заявка вече няма да се прилага. Това ще изключи различните режими на смесване, карайки вашето лого да изчезне. За да върнете логото обратно на страницата, трябва да зададете режим на смесване-смесване свойство на логото извън медийната заявка:
.лого {
цвят: бяло;
ширина: 10рем;
режим на смесване-смесване: разлика;
/* Други свойства на CSS */
}
Това ще активира смесеното смесване на логото по всяко време, дори на по-големи екрани. Но на малки екрани логото ще остане в горната част и няма да ви следва, докато превъртате надолу (тъй като позиция: лепкава работи само на големи екрани). И накрая, винаги не забравяйте да използвате бяло лого, за да предотвратите изчезването му от страницата.
Научете повече CSS съвети и трикове
Като използвате режима на смесване и смесване, можете да създавате завладяващи оформления с редуващи се цветове. Още по-добре, не е нужно да кодирате твърдо цвят или да задавате точки на прекъсване, защото режимът на смесване-смесване ще инвертира цвета динамично. Позволява ви да създавате хубави смеси и цветове за части от съдържанието на елемент в зависимост от неговия директен фон.
CSS често се смята за един от най-вълнуващите езици за изучаване. Това е отчасти защото CSS е пълен със съвети и трикове като този, който току-що научихте в тази статия. Някои други удобни CSS съвети и трикове са ефекти при задържане на мишката, преоразмеряване на изображения, за да се поберат в контейнери, съкращаване на текст с елипси и използване на текстово преобразуване.
