Jak dynamicky měnit barvu při posouvání pomocí CSS

U stacionárních prvků webových stránek, jako jsou loga, často narazíte při posouvání stránky na záměnu barev. To se může stát, pokud statický prvek prochází částí webu, která sdílí stejnou barvu s prvkem. Statický prvek bude neviditelný, když bude spočívat na tomto pozadí.

Chcete-li tento problém vyřešit, musíte dynamicky invertovat barvu loga, když přechází přes prvek se stejnou barvou. Naučte se, jak tohoto efektu dosáhnout pouze pomocí CSS, bez nutnosti JavaScriptu!

Stáhněte si startovací kód

Chcete-li postupovat podle tohoto návodu, stáhněte si z něj startovací kód úložiště GitHub na váš místní počítač.

OTEVŘENO index.html v prohlížeči, který by měl vypadat jako stránka zobrazená zde:

Stránka HTML obsahuje logo a čtyři sekce. Každá sekce má fiktivní nadpis a tři odstavce fiktivního textu. Text loga má stejnou černou barvu jako pozadí druhé a čtvrté části. Tento efekt pochází z n-té dítě (sudé) zablokovat styly.css, který aplikuje černé pozadí na sudé části.

Vytvoření lepivého loga

S tímto startovacím kódem se logo nelepí nahoru. To znamená, že logo zmizí, když stránku posunete dolů. Své logo můžete přeměnit na lepící hlavičku použitím pozice: lepkavý vlastnost k němu uvnitř souboru CSS. Chcete-li se hlouběji ponořit do polohování v CSS, přečtěte si náš příspěvek na webu CSS vlastnost pozice.

Zajistěte, aby logo drželo nahoře, ale udělejte to pouze na větších obrazovkách (protože u menších obrazovek by mohlo přecházet přes jiné prvky). Následující HTML responzivní mediální dotaz vytváří tento efekt:

@media(šířka > 980 pixelů) {
.logo { 
pozice: lepkavý; 
horní: .5rem; 
 }
}

Nyní bude logo vždy držet nahoře a bude vás při posouvání sledovat. Ale také si všimnete, že text zmizí, když rolujete do částí s tmavým pozadím (protože text loga je také černý). Nyní se podívejte, jak to opravit.

Přidání režimu mix-blend do vašeho Sticky Header

Abyste zajistili, že černé logo na černém pozadí nezmizí, budete muset barvu dynamicky invertovat. Způsob, jakým to uděláte, je pomocí mix-blend-mode CSS vlastnost a přiřazení její hodnoty rozdíl:

@media(šířka > 980 pixelů) { 
.logo { 
pozice: lepkavý; 
horní: .5rem; 
mix-blend-mode: rozdíl
 }
}

Vlastnost CSS mix-blend-mode určuje, jak by se měl obsah prvku prolínat s obsahem nadřazeného prvku a jeho pozadím. Rozdílná hodnota přebírá rozdílovou hodnotu každého pixelu a invertuje barvy světla. Pokud jsou tedy hodnoty barev stejné, stanou se černými. Rozdíly v hodnotách se převrátí.

Výše uvedený doplněk CSS způsobí, že logo zcela zmizí. Je to proto, že jste mimo dotaz na média nenastavili barvu textu loga na bílou. Udělejte to pomocí následujícího kódu:

.logo { 
barva: bílý; 
/* Další vlastnosti CSS */
}

Nyní máte vše úspěšně nastaveno. Posuňte stránku dolů a na černé pozadí. Uvidíte, jak se logo změní z černé na bílou.

Kromě černé a bílé můžete pracovat i s jinými barvami. Pokud byste například změnili barvu textu svého loga na modrozelenou (#008080), získáte na bílém pozadí růžovou barvu. Ilustruje to následující obrázek.

Ve většině případů byste chtěli, aby byl váš prvek bílý, abyste dosáhli nejlepších výsledků. Pokud se posunete nahoru, můžete také najít své logo rozříznuté na polovinu. To se děje, protože logo existuje mimo živel. Chcete-li logo zobrazit celé, musíte nastavit barvu pozadí prvek na bílou.

Použití obrázku jako loga místo textu

Tato technika pracuje nejen s textem, ale také s obrázky. Samozřejmě se musíte ujistit, že jako logo používáte bílý obrázek. Následující příklad používá bílé logo lorem ipsum, které je ve stejné složce jako index.html soubor:

<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum Logo">

Zde použitý obrázek je SVG (Scalable Vector Graphic), typ vektorový soubor.

Nyní bude barva obrázku vašeho loga černá na bílém pozadí, jak je znázorněno na obrázku níže.

Pokud ale přejdete na černé pozadí, barva loga se automaticky změní na bílou. To můžete vidět na obrázku níže.

Velikost loga můžete také zvětšit jeho nahrazením velikost písma s výška a šířka v bloku CSS zaměřeném na logo. Koneckonců, teď máte co do činění s obrázkem než s textem.

.logo {
barva: bílý;
šířka: 10rem;
/* Další vlastnosti CSS */
}

Pokud zmenšíte obrazovku, dotaz na média již nebude platit. Tím vypnete různé režimy prolnutí a vaše logo zmizí. Chcete-li logo vrátit zpět na stránku, musíte nastavit mix-blend-mode vlastnost na logu mimo dotaz na média:

.logo {
barva: bílý;
šířka: 10rem;
mix-blend-mode: rozdíl;
/* Další vlastnosti CSS */
}

Tím se aktivuje míchání mixů na logu za všech okolností, a to i na větších obrazovkách. Na malých obrazovkách však logo zůstane nahoře a nebude vás následovat při posouvání dolů (protože pozice: lepkavý funguje pouze na velkých obrazovkách). Nakonec nezapomeňte vždy použít bílé logo, aby nezmizelo ze stránky.

Přečtěte si další tipy a triky CSS

Pomocí režimu mix-blend můžete vytvářet fascinující rozvržení se střídajícími se barvami. A co je ještě lepší, nemusíte tvrdě kódovat žádnou barvu ani nastavovat body přerušení, protože režim mix-blend-mode barvu dynamicky invertuje. Umožňuje vytvářet pěkné prolnutí a barvy pro části obsahu prvku v závislosti na jeho přímém pozadí.

CSS je často považováno za jeden z nejvíce vzrušujících jazyků k učení. Je to částečně proto, že CSS je plné tipů a triků, jako je ten, který jste se právě naučili v tomto článku. Mezi další užitečné tipy a triky CSS patří efekty vznášení, změna velikosti obrázků, aby se vešly do kontejnerů, zkrácení textu pomocí elips a použití transformace textu.