Hogyan lehet dinamikusan megváltoztatni a színt görgetés közben CSS-sel

Az olyan helyhez kötött webhelyelemeknél, mint az emblémák, gyakran előfordul, hogy az oldal görgetése közben színkeveredésbe ütközik. Ez akkor fordulhat elő, ha a statikus elem a webhely egy olyan szakaszán halad át, amely azonos színű az elemmel. A statikus elem láthatatlan lesz, amíg a háttéren nyugszik.

A probléma kijavításához dinamikusan meg kell fordítania az embléma színét, amikor az azonos színű elem fölé kerül. Tanulja meg, hogyan érheti el ezt a hatást pusztán CSS-sel, JavaScript nélkül!

Töltse le a kezdőkódot

Az oktatóanyag követéséhez töltse le az indítókódot a webhelyről GitHub adattár a helyi géphez.

Nyisd ki index.html egy böngészőben, amelynek úgy kell kinéznie, mint az itt látható oldal:

A HTML oldal egy logót és négy részt tartalmaz. Minden szakasznak van egy álcíme és három bekezdésnyi álszöveg. A logó szövege ugyanolyan fekete színű, mint a második és negyedik rész háttere. Ez a hatás a

n-edik gyerek (páros) blokkolja stílusok.css, amely egyenletes szakaszokra alkalmazza a fekete hátteret.

A logó ragacsossá tétele

Ezzel az indítókóddal a logó nem tapad a tetejére. Ez azt jelenti, hogy a logó eltűnik, amikor lefelé görget az oldalon. A logóját ragadós fejlécré alakíthatja a pozíció: ragadós tulajdonságot a CSS-fájlban. A CSS-ben való pozicionálás mélyebb megismeréséhez olvassa el a webhelyen található bejegyzésünket CSS pozíció tulajdonság.

Ügyeljen arra, hogy az embléma a tetejére tapadjon, de ezt csak nagyobb képernyőkön tegye (mert kisebb képernyőméreteknél más elemek fölé is kerülhet). A következő HTML reszponzív médialekérdezés ezt a hatást hozza létre:

@média(szélesség > 980 képpont) {
.logo { 
pozíció: ragadós; 
tetejére: .5rem; 
 }
}

Mostantól a logó mindig a tetején fog tapadni, és követni fogja Önt görgetés közben. De azt is észre fogod venni, hogy a szöveg eltűnik, ha a sötét háttérszakaszokra görgetsz (mivel a logó szövege is fekete). Most nézze meg, hogyan lehet ezt kijavítani.

Mix-blend-mód hozzáadása a ragadós fejléchez

Annak érdekében, hogy a fekete logó ne tűnjön el fekete háttéren, dinamikusan kell megfordítania a színt. Ezt úgy teheti meg, hogy a mix-blend-mód CSS tulajdonságot, és hozzárendel egy értéket különbség:

@média(szélesség > 980 képpont) { 
.logo { 
pozíció: ragadós; 
tetejére: .5rem; 
mix-blend-mód: különbség
 }
}

A mix-blend-mode CSS tulajdonság megadja, hogy egy elem tartalma hogyan keveredjen az elem szülőjének és hátterének tartalmával. A különböző érték az egyes pixelek különbségi értékét veszi fel, megfordítva a világos színeket. Tehát ha a színértékek megegyeznek, akkor feketévé válnak. Az értékek közötti különbségek megfordulnak.

A fenti CSS-kiegészítés hatására a logó teljesen eltűnik. Ennek az az oka, hogy a médialekérdezésen kívül nem állította be a logó szövegének színét fehérre. Tegye ezt a következő kóddal:

.logo { 
szín: fehér; 
/* Egyéb CSS-tulajdonságok */
}

Most már mindent sikeresen beállított. Görgessen le az oldalon, és lépjen a fekete háttérbe. Látni fogja, hogy a logó feketéről fehérre változik.

A fekete-fehéren kívül más színekkel is dolgozhat. Ha például az embléma szövegének színét kékeszöld színűre szeretné módosítani (#008080), akkor a fehér háttéren a rózsaszín szín jelenik meg. A következő kép ezt szemlélteti.

A legtöbb esetben azt szeretné, ha az elem fehér legyen, hogy a legjobb eredményt érje el. Ezenkívül, ha a tetejére görget, előfordulhat, hogy az emblémát félbevágja. Ez azért történik, mert a logó kívül található elem. A logó teljes megjelenítéséhez be kell állítani a háttérszínt elem fehérre.

Kép használata logóként szöveg helyett

Ez a technika nem csak szöveggel, hanem képekkel is működik. Természetesen meg kell győződnie arról, hogy fehér képet használ logóként. A következő példa egy fehér lorem ipsum logót használ, amely ugyanabban a mappában található, mint a index.html fájl:

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

Az itt használt kép egy SVG (Scalable Vector Graphic), egyfajta vektoros fájl.

Most az embléma képének színe fekete lesz fehér alapon, ahogy az alábbi képen is látható.

De ha fekete háttérre görget, a logó színe automatikusan fehér lesz. Ezt az alábbi képen láthatja.

A logó méretét is növelheti cserével betűméret val vel magasság és szélesség a logót célzó CSS-blokkban. Hiszen most inkább képpel foglalkozik, mint szöveggel.

.logo {
szín: fehér;
szélesség: 10rem;
/* Egyéb CSS-tulajdonságok */
}

Ha kicsinyíti a képernyőt, a médialekérdezés többé nem érvényesül. Ezzel kikapcsolja a különböző keverési módokat, és eltűnik az embléma. A logó visszahozásához az oldalra be kell állítani a mix-blend-mód tulajdonság a logón a médialekérdezésen kívül:

.logo {
szín: fehér;
szélesség: 10rem;
mix-blend-mód: különbség;
/* Egyéb CSS-tulajdonságok */
}

Ez mindenkor aktiválja a keverést a logón, még nagyobb képernyőkön is. A kis képernyőkön azonban az embléma felül marad, és nem követi Önt, amikor lefelé görget (mert pozíció: ragadós csak nagy képernyőkön működik). Végül mindig ne felejtsen el fehér logót használni, nehogy eltűnjön az oldalról.

További CSS-tippek és trükkök

A mix-blend mód használatával lenyűgöző elrendezéseket hozhat létre váltakozó színekkel. Még jobb, ha nem kell keményen kódolnia egyetlen színt sem, és nem kell töréspontokat beállítania, mert a keverési-keverési mód dinamikusan megfordítja a színt. Lehetővé teszi, hogy szép keverékeket és színeket hozzon létre egy elem tartalmának részeihez a közvetlen hátterétől függően.

A CSS-t gyakran az egyik legizgalmasabb nyelvnek tekintik. Ennek részben az az oka, hogy a CSS tele van olyan tippekkel és trükkökkel, mint amilyeneket ebben a cikkben tanult meg. Más hasznos CSS-tippek és trükkök a lebegési effektusok, a képek átméretezése, hogy illeszkedjenek a tárolókba, a szöveg ellipszisekkel való csonkítása és a szövegátalakítás használata.