Išspręskite įprastą spalvų susidūrimo problemą naudodami šią patogią, bet mažai žinomą CSS ypatybę.
Naudodami stacionarius svetainės elementus, pvz., logotipus, slinkdami puslapį dažnai susidursite su spalvų mišiniu. Taip gali nutikti, jei statinis elementas viršija svetainės skiltį, kurios spalva tokia pati kaip elementas. Statinis elementas bus nematomas, kol bus tame fone.
Kad išspręstumėte šią problemą, turite dinamiškai pakeisti logotipo spalvą, kai ji pereina virš tos pačios spalvos elemento. Sužinokite, kaip pasiekti šį efektą naudojant tik CSS, nereikalaujant JavaScript!
Atsisiųskite pradžios kodą
Norėdami sekti šią pamoką, atsisiųskite pradžios kodą iš jos GitHub saugykla į vietinį įrenginį.
Atviras index.html naršyklėje, kuri turėtų atrodyti taip, kaip čia parodytas puslapis:
HTML puslapyje yra logotipas ir keturi skyriai. Kiekvienoje dalyje yra netikras pavadinimas ir trys fiktyvaus teksto pastraipos. Logotipo tekstas yra tokios pat juodos spalvos kaip ir antros ir ketvirtos skilčių fonas. Šis poveikis kyla iš
n-tas vaikas (net) blokuoti stiliai.css, kuri lygioms sekcijoms taiko juodą foną.Kad logotipas būtų lipnus
Naudojant šį pradžios kodą, logotipas neprilimpa prie viršaus. Tai reiškia, kad logotipas dingsta, kai slenkate puslapiu žemyn. Galite paversti savo logotipą lipnia antrašte taikydami padėtis: lipni CSS faile. Norėdami giliau pasinerti į padėties nustatymą CSS, perskaitykite mūsų įrašą apie CSS pozicijos nuosavybė.
Įsitikinkite, kad logotipas prilimpa prie viršaus, bet tai darykite tik didesniuose ekranuose (nes mažesnio dydžio ekranuose jis gali perlipti kitus elementus). Sekantis HTML reaguojančios medijos užklausa sukuria tokį efektą:
@media(plotis > 980 pikselių) {
.logotipas {
padėtis: lipnus;
viršuje: .5rem;
}
}
Dabar logotipas visada laikysis viršuje ir seks jus, kai slinksite. Tačiau taip pat pastebėsite, kad tekstas dingsta, kai slenkate į tamsaus fono dalis (nes logotipo tekstas taip pat yra juodas). Dabar pažiūrėkite, kaip tai ištaisyti.
Mišinio maišymo režimo pridėjimas prie jūsų lipnios antraštės
Norėdami užtikrinti, kad juodas logotipas neišnyktų juodame fone, turėsite dinamiškai apversti spalvą. Tai galite padaryti naudodami maišymo-maišymo režimas CSS ypatybę ir priskiriant jai vertę skirtumas:
@media(plotis > 980 pikselių) {
.logotipas {
padėtis: lipnus;
viršuje: .5rem;
maišymo-maišymo režimas: skirtumas
}
}
CSS ypatybė mix-blend-mode nurodo, kaip elemento turinys turi susilieti su elemento pirminio turinio ir jo fono turiniu. Skirtinga vertė paima kiekvieno pikselio skirtumo reikšmę, apverčiant šviesias spalvas. Taigi, jei spalvų reikšmės yra vienodos, jos tampa juodos. Vertybių skirtumai pasikeis.
Dėl aukščiau pateikto CSS papildymo logotipas visiškai išnyks. Taip yra todėl, kad ne medijos užklausoje nenustatėte logotipo teksto spalvos baltos. Atlikite tai naudodami šį kodą:
.logotipas {
spalva: baltas;
/* Kitos CSS savybės */
}
Dabar jūs sėkmingai viską nustatėte. Slinkite puslapiu žemyn ir į juodą foną. Pamatysite, kad logotipas pasikeis iš juodos į baltą.
Taip pat galite dirbti su kitomis spalvomis, išskyrus juodą ir baltą. Pavyzdžiui, jei pakeistumėte logotipo teksto spalvą į melsvą spalvą (#008080), baltame fone gausite rožinę spalvą. Tai iliustruoja šis paveikslėlis.
Daugeliu atvejų norėtumėte, kad jūsų elementas būtų baltas, kad gautumėte geriausių rezultatų. Be to, jei slinksite į viršų, logotipas gali būti perpjautas per pusę. Taip atsitinka todėl, kad logotipas yra už jo ribų elementas. Kad būtų rodomas visas logotipas, turite nustatyti fono spalvą elementas į baltą.
Vaizdo naudojimas kaip logotipas vietoj teksto
Ši technika veikia ne tik su tekstu, bet ir su vaizdais. Žinoma, kaip logotipą turite naudoti baltą vaizdą. Šiame pavyzdyje naudojamas baltas lorem ipsum logotipas, kuris yra tame pačiame aplanke kaip ir index.html failas:
<imgsrc="loremipsum-297.svg"alt=„Lorem Ipsum logotipas“>
Čia naudojamas vaizdas yra SVG (Scalable Vector Graphic), tam tikro tipo vektorinis failas.
Dabar jūsų logotipo vaizdo spalva bus juoda baltame fone, kaip parodyta paveikslėlyje žemiau.
Bet jei slinksite į juodą foną, logotipo spalva automatiškai taps balta. Tai galite pamatyti žemiau esančiame paveikslėlyje.
Taip pat galite padidinti logotipo dydį pakeisdami šrifto dydis su aukščio ir plotis CSS bloke, nukreiptame į logotipą. Juk dabar jūs susiduriate su vaizdu, o ne su tekstu.
.logotipas {
spalva: baltas;
plotis: 10rem;
/* Kitos CSS savybės */
}
Jei sumažinsite ekraną, medijos užklausa nebebus taikoma. Tai išjungs skirtingus maišymo režimus, o logotipas išnyks. Norėdami grąžinti logotipą į puslapį, turite nustatyti maišymo-maišymo režimas logotipo savybė už žiniasklaidos užklausos ribų:
.logotipas {
spalva: baltas;
plotis: 10rem;
maišymo-maišymo režimas: skirtumas;
/* Kitos CSS savybės */
}
Tai suaktyvins logotipo mišinio maišymą visą laiką, net ir didesniuose ekranuose. Tačiau mažuose ekranuose logotipas liks viršuje ir neseka jūsų, kai slenkate žemyn (nes padėtis: lipni veikia tik dideliuose ekranuose). Galiausiai visada nepamirškite naudoti balto logotipo, kad jis nedingtų iš puslapio.
Sužinokite daugiau CSS patarimų ir gudrybių
Naudodami mišinio maišymo režimą galite sukurti patrauklius maketus su kintančiomis spalvomis. Dar geriau, jums nereikia griežtai koduoti jokios spalvos ar nustatyti lūžio taškų, nes maišymo ir maišymo režimas dinamiškai pakeis spalvą. Tai leidžia jums sukurti gražius mišinius ir spalvas elemento turinio dalims, atsižvelgiant į jo tiesioginį foną.
CSS dažnai laikoma viena įdomiausių kalbų mokytis. Taip yra iš dalies todėl, kad CSS yra pilnas patarimų ir gudrybių, tokių, kaip ką tik sužinojote šiame straipsnyje. Kai kurie kiti patogūs CSS patarimai ir gudrybės yra užvedimo efektai, vaizdų dydžio keitimas, kad tilptų į konteinerius, teksto sutrumpinimas elipsėmis ir teksto transformavimas.