Ako dynamicky meniť farbu pri rolovaní pomocou CSS

Pri nepohyblivých prvkoch webových stránok, ako sú logá, často narazíte na pomiešanie farieb pri posúvaní stránky. To sa môže stať, ak statický prvok prechádza cez časť webovej lokality, ktorá má rovnakú farbu ako prvok. Statický prvok bude neviditeľný, kým bude spočívať na tomto pozadí.

Ak chcete tento problém vyriešiť, musíte dynamicky invertovať farbu loga, keď prechádza cez prvok s rovnakou farbou. Naučte sa, ako dosiahnuť tento efekt iba pomocou CSS, bez potreby JavaScriptu!

Stiahnite si štartovací kód

Ak chcete postupovať podľa tohto návodu, stiahnite si štartovací kód z jeho úložisko GitHub na váš lokálny počítač.

OTVORENÉ index.html v prehliadači, ktorý by mal vyzerať ako stránka zobrazená tu:

Stránka HTML obsahuje logo a štyri sekcie. Každá sekcia má fiktívny názov a tri odseky fiktívneho textu. Text loga má rovnakú čiernu farbu ako pozadie druhej a štvrtej časti. Tento efekt pochádza z n-té dieťa (párne) zablokovať styles.css, ktorá aplikuje čierne pozadie na párne časti.

Vytvorenie lepivého loga

S týmto štartovacím kódom sa logo nelepí na vrch. To znamená, že logo zmizne pri rolovaní stránky nadol. Svoje logo môžete zmeniť na lepiacu hlavičku použitím poloha: lepkavý vlastnosť v súbore CSS. Pre hlbší ponor do polohovania v CSS si prečítajte náš príspevok na Vlastnosť pozície CSS.

Uistite sa, že logo lipne navrchu, no robte to len na väčších obrazovkách (pretože pri menších veľkostiach obrazoviek by mohlo ísť cez iné prvky). Nasledujúci HTML responzívny mediálny dopyt vytvára tento efekt:

@media(šírka > 980 pixelov) {
.logo { 
pozíciu: lepkavý; 
top: .5rem; 
 }
}

Teraz bude logo vždy držať navrchu a bude vás sledovať pri posúvaní. Tiež si však všimnete, že text zmizne, keď sa posuniete do sekcií s tmavým pozadím (pretože text loga je tiež čierny). Teraz sa pozrite, ako to opraviť.

Pridanie režimu zmiešavania do vašej lepiacej hlavičky

Aby ste zabezpečili, že čierne logo nezmizne na čiernom pozadí, budete musieť farbu dynamicky invertovať. Spôsob, akým to urobíte, je pomocou mix-blend-mode CSS vlastnosť a jej priradenie hodnoty rozdiel:

@media(šírka > 980 pixelov) { 
.logo { 
pozíciu: lepkavý; 
top: .5rem; 
mix-blend-mode: rozdiel
 }
}

Vlastnosť CSS mix-blend-mode určuje, ako by sa mal obsah prvku prelínať s obsahom rodiča prvku a jeho pozadím. Iná hodnota berie rozdielovú hodnotu každého pixelu, invertuje farby svetla. Ak sú teda hodnoty farieb rovnaké, stanú sa čiernymi. Rozdiely v hodnotách sa prevrátia.

Vyššie uvedený doplnok CSS spôsobí, že logo úplne zmizne. Je to preto, že ste mimo mediálneho dopytu nenastavili farbu textu loga na bielu. Urobte to pomocou nasledujúceho kódu:

.logo { 
farba: biely; 
/* Ďalšie vlastnosti CSS */
}

Teraz máte všetko úspešne nastavené. Prejdite nadol po stránke a na čierne pozadie. Uvidíte, ako sa logo zmení z čierneho na biele.

Okrem čiernej a bielej môžete pracovať aj s inými farbami. Ak by ste napríklad zmenili farbu textu svojho loga na modrozelenú (#008080), na bielom pozadí získate ružovú farbu. Ilustruje to nasledujúci obrázok.

Vo väčšine prípadov by ste chceli, aby bol váš prvok biely, aby ste dosiahli čo najlepšie výsledky. Ak sa posuniete nahor, môžete nájsť svoje logo rozrezané na polovicu. Stáva sa to preto, že logo existuje mimo element. Ak chcete zobraziť celé logo, musíte nastaviť farbu pozadia prvok na bielu.

Použitie obrázka ako loga namiesto textu

Táto technika nepracuje len s textom, ale aj s obrázkami. Samozrejme, musíte sa uistiť, že ako logo používate biely obrázok. Nasledujúci príklad používa biele logo lorem ipsum, ktoré je v rovnakom priečinku ako logo index.html súbor:

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

Tu použitý obrázok je SVG (Scalable Vector Graphic), typ vektorový súbor.

Teraz bude farba vášho loga čierna na bielom pozadí, ako je znázornené na obrázku nižšie.

Ak však prejdete na čierne pozadie, farba loga sa automaticky zmení na bielu. Môžete to vidieť na obrázku nižšie.

Veľkosť loga môžete zväčšiť aj výmenou veľkosť písma s výška a šírka v bloku CSS zacielenom na logo. Predsa len, teraz máte čo do činenia s obrázkom ako s textom.

.logo {
farba: biely;
šírka: 10rem;
/* Ďalšie vlastnosti CSS */
}

Ak zmenšíte obrazovku, dopyt na médiá už nebude platiť. Tým sa vypnú rôzne režimy prelínania a vaše logo zmizne. Ak chcete logo vrátiť späť na stránku, musíte nastaviť mix-blend-mode vlastnosť loga mimo mediálneho dopytu:

.logo {
farba: biely;
šírka: 10rem;
mix-blend-mode: rozdiel;
/* Ďalšie vlastnosti CSS */
}

Tým sa aktivuje miešanie zmesí na logu vždy, dokonca aj na väčších obrazovkách. Na malých obrazovkách však logo zostane v hornej časti a nebude vás nasledovať pri posúvaní nadol (pretože poloha: lepkavý funguje len na veľkých obrazovkách). Nakoniec vždy nezabudnite použiť biele logo, aby ste zabránili jeho zmiznutiu zo stránky.

Zistite viac tipov a trikov CSS

Pomocou režimu zmiešavania môžete vytvárať fascinujúce rozloženia so striedajúcimi sa farbami. A čo je ešte lepšie, nemusíte tvrdo kódovať žiadnu farbu ani nastavovať body prerušenia, pretože režim zmiešavania farby dynamicky invertuje. Umožňuje vám vytvárať pekné zmesi a farby pre časti obsahu prvku v závislosti od jeho priameho pozadia.

CSS je často považovaný za jeden z najzaujímavejších jazykov na učenie. Je to čiastočne preto, že CSS je plné tipov a trikov, ako je ten, ktorý ste sa práve naučili v tomto článku. Medzi ďalšie užitočné tipy a triky CSS patria efekty vznášania, zmena veľkosti obrázkov, aby sa zmestili do kontajnerov, orezanie textu pomocou elipsy a použitie transformácie textu.