Lös ett vanligt problem med färgkrock med denna praktiska men föga kända CSS-egenskap.
Med stationära webbplatselement som logotyper, kommer du ofta att stöta på en färgblandning när du rullar på sidan. Detta kan hända om det statiska elementet går över en del av webbplatsen som delar samma färg med elementet. Det statiska elementet kommer att vara osynligt medan det vilar på den bakgrunden.
För att åtgärda det här problemet måste du dynamiskt invertera färgen på logotypen när den går över ett element med samma färg. Lär dig hur du uppnår denna effekt med bara CSS, utan JavaScript krävs!
Ladda ner startkoden
För att följa denna handledning, ladda ner startkoden från dess GitHub-förråd till din lokala maskin.
Öppen index.html i en webbläsare som ska se ut som sidan som visas här:
HTML-sidan innehåller en logotyp och fyra sektioner. Varje avsnitt har en dummytitel och tre stycken med dummytext. Logotypens text har samma svarta färg som bakgrunden i den andra och fjärde sektionen. Denna effekt kommer från
n: te barn (jämn) blockera in styles.css, som tillämpar den svarta bakgrunden på jämna sektioner.Göra logotypen klibbig
Med denna startkod fastnar inte logotypen på toppen. Det gör att logotypen försvinner när du scrollar ner på sidan. Du kan förvandla din logotyp till en klibbig rubrik genom att använda position: klibbig egenskap till den i CSS-filen. För en djupdykning i positionering i CSS, läs vårt inlägg om CSS-positionsegenskap.
Se till att logotypen fastnar på toppen, men gör det bara på större skärmar (eftersom den vid mindre skärmstorlekar kan gå över andra element). Det följande HTML-responsiv mediafråga skapar denna effekt:
@media(bredd > 980 pixlar) {
.logotyp {
placera: klibbig;
topp: .5rem;
}
}
Nu kommer logotypen att hålla sig till toppen hela tiden och följa dig när du scrollar. Men du kommer också att märka att texten försvinner när du scrollar in i de mörka bakgrundssektionerna (eftersom logotypens text också är svart). Ta nu en titt på hur du fixar detta.
Lägger till mix-blend-läge till din Sticky Header
För att säkerställa att den svarta logotypen inte försvinner på svart bakgrund, måste du invertera färgen dynamiskt. Sättet du skulle göra detta är genom att använda mix-blandning-läge CSS-egenskap och tilldela den ett värde på skillnad:
@media(bredd > 980 pixlar) {
.logotyp {
placera: klibbig;
topp: .5rem;
mix-blandning-läge: skillnad
}
}
CSS-egenskapen mix-blend-mode anger hur ett elements innehåll ska blandas med innehållet i elementets överordnade och dess bakgrund. Det olika värdet tar skillnadsvärdet för varje pixel och inverterar de ljusa färgerna. Så om färgvärdena är desamma blir de svarta. Skillnader i värdena kommer att inverteras.
Ovanstående CSS-tillägg kommer att få logotypen att försvinna helt. Detta beror på att du inte har ställt in färgen på logotypens text till vit utanför mediefrågan. Gör det med följande kod:
.logotyp {
Färg: vit;
/* Andra CSS-egenskaper */
}
Nu har du lyckats ställa in allt. Scrolla ner på sidan och in i den svarta bakgrunden. Du skulle se logotypen ändras från svart till vit.
Du kan också arbeta med andra färger än svart och vitt. Till exempel, om du skulle ändra färgen på din logotyptext till blågrön färg (#008080), får du färgen rosa på vit bakgrund. Följande bild illustrerar detta.
I de flesta fall vill du att ditt element ska vara vitt för att få bästa resultat. Om du bläddrar till toppen kanske du hittar din logotyp halverad. Detta händer eftersom logotypen finns utanför element. För att visa logotypen i sin helhet måste du ställa in bakgrundsfärgen på element till vitt.
Använda en bild som logotyp istället för text
Denna teknik fungerar inte bara med text, utan även med bilder. Naturligtvis måste du se till att använda en vit bild som logotyp. Följande exempel använder en vit lorem ipsum-logotyp som finns i samma mapp som index.html fil:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum-logotyp">
Bilden som används här är en SVG (Scalable Vector Graphic), en typ av vektor fil.
Nu kommer färgen på din logotypbild att vara svart på vit bakgrund som visas i bilden nedan.
Men om du bläddrar till en svart bakgrund blir färgen på logotypen automatiskt vit. Du kan se detta på bilden nedan.
Du kan också öka logotypens storlek genom att byta ut den textstorlek med höjd och bredd i CSS-blocket som riktar in sig på logotypen. När allt kommer omkring, du har nu att göra med en bild snarare än text.
.logotyp {
Färg: vit;
bredd: 10rem;
/* Andra CSS-egenskaper */
}
Om du krymper ner skärmen kommer mediefrågan inte att gälla längre. Detta kommer att stänga av de olika blandningslägena, vilket gör att din logotyp försvinner. För att få tillbaka logotypen till sidan måste du ställa in mix-blandning-läge egenskap på logotypen utanför mediefrågan:
.logotyp {
Färg: vit;
bredd: 10rem;
mix-blandning-läge: skillnad;
/* Andra CSS-egenskaper */
}
Detta kommer att aktivera mixblandning på logotypen hela tiden, även på större skärmar. Men på små skärmar kommer logotypen att förbli överst och inte följa dig när du rullar nedåt (eftersom position: klibbig fungerar endast på storbildsskärmar). Slutligen, kom alltid ihåg att använda en vit logotyp för att förhindra att den försvinner från sidan.
Lär dig mer CSS-tips och tricks
Genom att använda mix-blend-läge kan du skapa fascinerande layouter med alternerande färger. Ännu bättre, du behöver inte hårdkoda någon färg eller ställa in brytpunkter eftersom mix-blend-läget kommer att invertera färgen dynamiskt. Det låter dig skapa snygga blandningar och färger för delar av ett elements innehåll beroende på dess direkta bakgrund.
CSS anses ofta vara ett av de mest spännande språken att lära sig. Detta beror delvis på att CSS är full av tips och tricks som det du just lärde dig i den här artikeln. Några andra praktiska CSS-tips och tricks är hovringseffekter, ändra storlek på bilder för att passa in i behållare, trunkering av text med ellipser och användning av textomvandling.
