Løs et vanlig fargekollisjonsproblem med denne hendige, men lite kjente CSS-egenskapen.
Med stasjonære nettstedelementer som logoer, vil du ofte støte på en fargesammenblanding når du ruller på siden. Dette kan skje hvis det statiske elementet går over en del av nettstedet som deler samme farge med elementet. Det statiske elementet vil være usynlig mens det hviler på den bakgrunnen.
For å fikse dette problemet, må du dynamisk invertere fargen på logoen når den går over et element med samme farge. Lær hvordan du oppnår denne effekten med bare CSS, uten JavaScript nødvendig!
Last ned startkoden
For å følge denne opplæringen, last ned startkoden fra dens GitHub-depot til din lokale maskin.
Åpen index.html i en nettleser som skal se ut som siden vist her:
HTML-siden inneholder en logo og fire seksjoner. Hver seksjon har en dummy-tittel og tre avsnitt med dummy-tekst. Logoens tekst har samme sorte farge som bakgrunnen til andre og fjerde seksjon. Denne effekten kommer fra n. barn (til og med) blokkere inn styles.css, som bruker den svarte bakgrunnen på jevne deler.
Gjør logoen klebrig
Med denne startkoden fester ikke logoen seg til toppen. Det betyr at logoen forsvinner når du scroller nedover siden. Du kan gjøre om logoen din til en klebrig overskrift ved å bruke stilling: klissete egenskap til den inne i CSS-filen. For et dypdykk i posisjonering i CSS, les innlegget vårt på CSS-posisjonsegenskap.
Pass på at logoen fester seg til toppen, men gjør det bare på større skjermer (fordi, ved mindre skjermstørrelser, kan den gå over andre elementer). Følgende HTML-responsiv mediespørring skaper denne effekten:
@media(bredde > 980 piksler) {
.logo {
posisjon: klissete;
topp: .5rem;
}
}
Nå vil logoen holde seg til toppen til enhver tid og følge deg mens du blar. Men du vil også legge merke til at teksten forsvinner når du blar inn i de mørke bakgrunnsdelene (fordi logoteksten også er svart). Ta en titt på hvordan du fikser dette.
Legger til blande-blandingsmodus til din Sticky Header
For å sikre at den svarte logoen ikke forsvinner på svart bakgrunn, må du invertere fargen dynamisk. Måten du gjør dette på er ved å bruke blande-blanding-modus CSS-egenskap og tilordne den en verdi på forskjell:
@media(bredde > 980 piksler) {
.logo {
posisjon: klissete;
topp: .5rem;
blande-blanding-modus: forskjell
}
}
CSS-egenskapen mix-blend-mode spesifiserer hvordan innholdet til et element skal blandes med innholdet til elementets overordnede og bakgrunnen. Den forskjellige verdien tar forskjellsverdien for hver piksel, og inverterer lysfargene. Så hvis fargeverdiene er de samme, blir de svarte. Forskjeller i verdiene vil invertere.
CSS-tillegget ovenfor vil få logoen til å forsvinne helt. Dette er fordi du ikke har satt fargen på logoteksten til hvit utenfor mediesøket. Gjør det med følgende kode:
.logo {
farge: hvit;
/* Andre CSS-egenskaper */
}
Nå har du konfigurert alt. Rull ned på siden og inn i den svarte bakgrunnen. Du vil se at logoen endres fra svart til hvit.
Du kan også jobbe med andre farger enn svart og hvitt. Hvis du for eksempel skulle endre fargen på logoteksten til blågrønn farge (#008080), får du fargen rosa på hvit bakgrunn. Følgende bilde illustrerer dette.
I de fleste tilfeller vil du at elementet ditt skal være hvitt for å få de beste resultatene. Dessuten, hvis du blar til toppen, kan det hende du finner logoen din delt i to. Dette skjer fordi logoen eksisterer utenfor element. For å vise logoen i sin helhet, må du angi bakgrunnsfargen til element til hvitt.
Bruke et bilde som logo i stedet for tekst
Denne teknikken fungerer ikke bare med tekst, men også med bilder. Selvfølgelig må du sørge for at du bruker et hvitt bilde som logo. Følgende eksempel bruker en hvit lorem ipsum-logo som er i samme mappe som index.html fil:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum-logoen">
Bildet som brukes her er en SVG (Scalable Vector Graphic), en type vektor fil.
Nå vil fargen på logobildet ditt være svart på hvit bakgrunn som vist på bildet nedenfor.
Men hvis du blar inn i en svart bakgrunn, vil fargen på logoen automatisk bli hvit. Du kan se dette på bildet nedenfor.
Du kan også øke logoens størrelse ved å erstatte skriftstørrelse med høyde og bredde i CSS-blokken rettet mot logoen. Tross alt har du nå å gjøre med et bilde i stedet for tekst.
.logo {
farge: hvit;
bredde: 10rem;
/* Andre CSS-egenskaper */
}
Hvis du krymper skjermen ned, vil ikke mediespørringen gjelde lenger. Dette vil slå av de forskjellige blandingsmodusene, slik at logoen din forsvinner. For å bringe logoen tilbake til siden, må du angi blande-blanding-modus eiendom på logoen utenfor mediesøket:
.logo {
farge: hvit;
bredde: 10rem;
blande-blanding-modus: forskjell;
/* Andre CSS-egenskaper */
}
Dette vil aktivere blandingsblanding på logoen til enhver tid, selv på større skjermer. Men på små skjermer vil logoen forbli øverst og ikke følge deg mens du ruller nedover (fordi stilling: klissete fungerer kun på storskjermer). Til slutt, husk alltid å bruke en hvit logo for å forhindre at den forsvinner fra siden.
Lær mer CSS-tips og triks
Ved å bruke blandingsmodus kan du lage fascinerende oppsett med vekslende farger. Enda bedre, du trenger ikke å hardkode noen farger eller angi bruddpunkter fordi blande-blandingsmodus vil invertere fargen dynamisk. Den lar deg lage fine blandinger og farger for deler av et elements innhold avhengig av dets direkte bakgrunn.
CSS blir ofte sett på som et av de mest spennende språkene å lære. Dette er delvis fordi CSS er full av tips og triks som det du nettopp lærte i denne artikkelen. Noen andre nyttige CSS-tips og triks er sveveeffekter, endre størrelse på bilder for å passe inn i beholdere, avkorting av tekst med ellipser og bruk av teksttransform.
