Cum să schimbați în mod dinamic culoarea în timp ce derulați cu CSS

Cu elemente staționare ale site-ului web, cum ar fi logo-urile, veți întâlni adesea o confuzie de culori atunci când derulați pagina. Acest lucru se poate întâmpla dacă elementul static trece peste o secțiune a site-ului web care are aceeași culoare cu elementul. Elementul static va fi invizibil în timp ce se sprijină pe acel fundal.

Pentru a remedia această problemă, trebuie să inversați în mod dinamic culoarea siglei atunci când trece peste un element cu aceeași culoare. Aflați cum să obțineți acest efect folosind doar CSS, fără JavaScript necesar!

Descărcați codul de pornire

Pentru a urma acest tutorial, descărcați codul de pornire de pe acesta Depozitul GitHub la mașina dvs. locală.

Deschis index.html într-un browser care ar trebui să arate ca pagina prezentată aici:

Pagina HTML conține un logo și patru secțiuni. Fiecare secțiune are un titlu simulat și trei paragrafe de text simulat. Textul siglei are aceeași culoare neagră ca fundalul celei de-a doua și a patra secțiuni. Acest efect vine de la

al-lea copil (chiar) blocați stiluri.css, care aplică fundalul negru secțiunilor uniforme.

A face logo-ul lipicios

Cu acest cod de pornire, logo-ul nu se lipește de sus. Aceasta înseamnă că logo-ul dispare atunci când derulați în jos pe pagină. Vă puteți transforma logo-ul într-un antet lipicios prin aplicarea poziție: lipicioasă proprietatea acestuia în interiorul fișierului CSS. Pentru o scufundare profundă în poziționarea în CSS, citiți postarea noastră pe Proprietatea poziției CSS.

Asigurați-vă că logo-ul se lipește de sus, dar faceți acest lucru doar pe ecrane mai mari (pentru că, la dimensiuni mai mici ale ecranului, ar putea trece peste alte elemente). Următoarele Interogare media responsive HTML creează acest efect:

@mass-media(latime > 980px) {
.siglă { 
poziţie: lipicios; 
top: .5rem; 
 }
}

Acum, sigla se va lipi în partea de sus în orice moment și vă va urma pe măsură ce derulați. Dar veți observa și că textul dispare atunci când derulați în secțiunile de fundal întunecat (deoarece textul siglei este și el negru). Acum aruncați o privire la cum să remediați acest lucru.

Adăugarea modului de amestecare la antetul tău lipicios

Pentru a vă asigura că sigla neagră nu dispare pe fundaluri negre, va trebui să inversați culoarea în mod dinamic. Modul în care ați face acest lucru este folosind modul de amestecare Proprietatea CSS și atribuindu-i o valoare de diferență:

@mass-media(latime > 980px) { 
.siglă { 
poziţie: lipicios; 
top: .5rem; 
modul de amestecare: diferență
 }
}

Proprietatea CSS mix-blend-mode specifică modul în care conținutul unui element ar trebui să se îmbine cu conținutul părintelui elementului și fundalul acestuia. Valoarea diferită ia valoarea diferenței a fiecărui pixel, inversând culorile luminii. Deci, dacă valorile culorii sunt aceleași, acestea devin negre. Diferențele de valori se vor inversa.

Adăugarea CSS de mai sus va face logo-ul să dispară complet. Acest lucru se datorează faptului că nu ați setat culoarea textului siglei la alb în afara interogării media. Faceți asta cu următorul cod:

.siglă { 
culoare: alb; 
/* Alte proprietăți CSS */
}

Acum ați configurat totul cu succes. Derulați în jos pe pagină și pe fundalul negru. Veți vedea sigla schimbându-se de la negru la alb.

Puteți lucra și cu alte culori în afară de alb-negru. De exemplu, dacă ar trebui să schimbați culoarea textului logo-ului în culoarea ceai (#008080), veți obține culoarea roz pe fundal alb. Următoarea imagine ilustrează acest lucru.

În cele mai multe cazuri, ai dori ca elementul tău să fie alb pentru a obține cele mai bune rezultate. De asemenea, dacă derulați în sus, este posibil să găsiți logo-ul tăiat în jumătate. Acest lucru se întâmplă deoarece logo-ul există în afara element. Pentru a afișa sigla în întregime, trebuie să setați culoarea de fundal a element la alb.

Utilizarea unei imagini ca logo în loc de text

Această tehnică nu funcționează doar cu text, ci și cu imagini. Desigur, trebuie să vă asigurați că utilizați o imagine albă ca logo. Următorul exemplu folosește un logo alb lorem ipsum care se află în același folder ca și index.html fişier:

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

Imaginea folosită aici este un SVG (Scalable Vector Graphic), un tip de fișier vectorial.

Acum, culoarea imaginii logo-ului dvs. va fi neagră pe fundal alb, așa cum se arată în imaginea de mai jos.

Dar dacă derulați pe un fundal negru, culoarea siglei va deveni automat albă. Puteți vedea asta în imaginea de mai jos.

De asemenea, puteți mări dimensiunea siglei prin înlocuire marimea fontului cu înălţime și lăţime în blocul CSS care vizează sigla. La urma urmei, acum ai de-a face cu o imagine mai degrabă decât cu text.

.siglă {
culoare: alb;
lăţime: 10rem;
/* Alte proprietăți CSS */
}

Dacă micșorați ecranul, interogarea media nu se va mai aplica. Acest lucru va dezactiva diferitele moduri de amestecare, făcând logo-ul dvs. să dispară. Pentru a aduce sigla înapoi pe pagină, trebuie să setați modul de amestecare proprietate pe siglă în afara interogării media:

.siglă {
culoare: alb;
lăţime: 10rem;
modul de amestecare: diferență;
/* Alte proprietăți CSS */
}

Acest lucru va activa în permanență amestecarea pe logo, chiar și pe ecrane mai mari. Dar pe ecranele mici, sigla va rămâne în partea de sus și nu vă va urma pe măsură ce derulați în jos (pentru că poziție: lipicioasă funcționează numai pe ecrane mari). În cele din urmă, amintiți-vă întotdeauna să utilizați un logo alb pentru a preveni dispariția acestuia din pagină.

Aflați mai multe sfaturi și trucuri CSS

Folosind modul de amestecare, puteți crea machete fascinante cu culori alternative. Mai bine încă, nu trebuie să codificați greu nicio culoare sau să setați puncte de întrerupere, deoarece modul mix-blend va inversa dinamic culoarea. Vă permite să creați amestecuri și culori frumoase pentru părți din conținutul unui element, în funcție de fundalul direct.

CSS este adesea considerat una dintre cele mai interesante limbi de învățat. Acest lucru se datorează parțial pentru că CSS este plin de sfaturi și trucuri precum cel pe care tocmai l-ați învățat în acest articol. Alte sfaturi și trucuri utile CSS sunt efectele de trecere cu mouse-ul, redimensionarea imaginilor pentru a se potrivi în containere, trunchierea textului cu elipse și utilizarea text-transform.