Løs et almindeligt farvesammenstødsproblem med denne praktiske, men lidet kendte CSS-egenskab.
Med stationære webstedselementer som logoer vil du ofte løbe ind i en farvesammenblanding, når du ruller på siden. Dette kan ske, hvis det statiske element går over en sektion af webstedet, der deler den samme farve med elementet. Det statiske element vil være usynligt, mens det hviler på den baggrund.
For at løse dette problem skal du dynamisk invertere logoets farve, når det går over et element med samme farve. Lær, hvordan du opnår denne effekt ved kun at bruge CSS, uden JavaScript påkrævet!
Download startkoden
For at følge denne vejledning skal du downloade startkoden fra dens GitHub-depot til din lokale maskine.
Åben index.html i en browser, der skal ligne siden vist her:
HTML-siden indeholder et logo og fire sektioner. Hvert afsnit har en dummy-titel og tre afsnit med dummy-tekst. Logoets tekst er den samme sorte farve som baggrunden for anden og fjerde sektion. Denne effekt kommer fra n. barn (lige) blokere ind styles.css, som anvender den sorte baggrund på lige sektioner.
Gør logoet klæbrigt
Med denne startkode klæber logoet ikke til toppen. Det betyder, at logoet forsvinder, når du scroller ned på siden. Du kan forvandle dit logo til en klæbrig overskrift ved at anvende stilling: klæbrig egenskab til det inde i CSS-filen. For et dybt dyk i positionering i CSS, læs vores indlæg om CSS position egenskab.
Sørg for, at logoet klæber til toppen, men gør det kun på større skærme (fordi ved mindre skærmstørrelser kan det gå over andre elementer). Det følgende HTML responsiv medieforespørgsel skaber denne effekt:
@medier(bredde > 980px) {
.logo {
position: klæbrig;
top: .5rem;
}
}
Nu vil logoet holde sig til toppen hele tiden og følge dig, mens du scroller. Men du vil også bemærke, at teksten forsvinder, når du scroller ind i de mørke baggrundssektioner (fordi logoteksten også er sort). Tag nu et kig på, hvordan du løser dette.
Tilføjelse af mix-blend-tilstand til din Sticky Header
For at sikre, at det sorte logo ikke forsvinder på sorte baggrunde, bliver du nødt til at invertere farven dynamisk. Måden du ville gøre dette på er ved at bruge mix-blend-tilstand CSS-egenskab og tildele den en værdi på forskel:
@medier(bredde > 980px) {
.logo {
position: klæbrig;
top: .5rem;
mix-blend-tilstand: forskel
}
}
CSS-egenskaben mix-blend-mode specificerer, hvordan et elements indhold skal blandes med indholdet af elementets overordnede og dets baggrund. Den forskellige værdi tager forskelsværdien for hver pixel og inverterer lysfarverne. Så hvis farveværdierne er de samme, bliver de sorte. Forskelle i værdierne vil invertere.
Ovenstående CSS tilføjelse vil få logoet til at forsvinde helt. Dette skyldes, at du ikke har sat farven på logoteksten til hvid uden for medieforespørgslen. Gør det med følgende kode:
.logo {
farve: hvid;
/* Andre CSS-egenskaber */
}
Nu har du konfigureret alt. Rul ned på siden og ind i den sorte baggrund. Du vil se logoet skifte fra sort til hvidt.
Du kan også arbejde med andre farver end sort og hvid. For eksempel, hvis du skulle ændre farven på din logotekst til blågrøn farve (#008080), får du farven pink på hvid baggrund. Det følgende billede illustrerer dette.
I de fleste tilfælde vil du gerne have, at dit element er hvidt for at få de bedste resultater. Hvis du ruller til toppen, vil du muligvis finde dit logo skåret i to. Dette sker, fordi logoet findes uden for element. For at vise logoet fuldt ud, skal du indstille baggrundsfarven for element til hvid.
Brug af et billede som logo i stedet for tekst
Denne teknik fungerer ikke kun med tekst, men også med billeder. Du skal selvfølgelig sørge for at bruge et hvidt billede som logo. Følgende eksempel bruger et hvidt lorem ipsum-logo, der er i samme mappe som index.html fil:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum-logo">
Billedet, der bruges her, er en SVG (Scalable Vector Graphic), en type vektor fil.
Nu vil farven på dit logobillede være sort på hvid baggrund som vist på billedet nedenfor.
Men hvis du scroller ind på en sort baggrund, bliver logoets farve automatisk hvid. Det kan du se på billedet nedenfor.
Du kan også øge logoets størrelse ved at udskifte det skriftstørrelse med højde og bredde i CSS-blokken målrettet mod logoet. Når alt kommer til alt, har du nu at gøre med et billede frem for tekst.
.logo {
farve: hvid;
bredde: 10rem;
/* Andre CSS-egenskaber */
}
Hvis du krymper skærmen ned, vil medieforespørgslen ikke længere gælde. Dette vil deaktivere de forskellige blandingstilstande, hvilket får dit logo til at forsvinde. For at bringe logoet tilbage til siden, skal du indstille mix-blend-tilstand ejendom på logoet uden for medieforespørgslen:
.logo {
farve: hvid;
bredde: 10rem;
mix-blend-tilstand: forskel;
/* Andre CSS-egenskaber */
}
Dette vil aktivere blandingsblanding på logoet til enhver tid, selv på større skærme. Men på små skærme vil logoet forblive øverst og ikke følge dig, når du ruller nedad (fordi stilling: klæbrig virker kun på storskærme). Husk endelig altid at bruge et hvidt logo for at forhindre det i at forsvinde fra siden.
Lær flere CSS-tip og -tricks
Ved at bruge blandingstilstand kan du skabe fascinerende layouts med skiftende farver. Endnu bedre, du behøver ikke at hårdkode nogen farve eller indstille brudpunkter, fordi mix-blend-tilstanden vil invertere farven dynamisk. Det lader dig skabe flotte blandinger og farver til dele af et elements indhold afhængigt af dets direkte baggrund.
CSS betragtes ofte som et af de mest spændende sprog at lære. Dette er til dels fordi CSS er fuld af tips og tricks som det du lige har lært i denne artikel. Nogle andre praktiske CSS-tip og -tricks er svæveeffekter, ændring af størrelse på billeder, så de passer ind i beholdere, afkortning af tekst med ellipser og brug af teksttransform.