Selle käepärase, kuid vähetuntud CSS-i atribuudiga lahendage levinud värvide kokkupõrgete probleem.
Veebisaidi statsionaarsete elementide (nt logod) puhul puutute lehe kerimisel sageli kokku värvide segunemisega. See võib juhtuda, kui staatiline element läheb üle veebisaidi jaotise, mis jagab elemendiga sama värvi. Staatiline element on nähtamatu, kui see toetub sellele taustale.
Selle probleemi lahendamiseks peate logo värvi dünaamiliselt ümber pöörama, kui see läheb üle sama värvi elemendi. Siit saate teada, kuidas seda efekti saavutada, kasutades ainult CSS-i, ilma JavaScripti vajamata!
Laadige alla stardikood
Selle õpetuse järgimiseks laadige selle saidilt alla stardikood GitHubi hoidla oma kohalikule masinale.
Avatud index.html brauseris, mis peaks välja nägema nagu siin näidatud leht:
HTML-leht sisaldab logo ja nelja jaotist. Igal jaotisel on näiv pealkiri ja kolm lõiku näivat teksti. Logo tekst on sama musta värvi kui teise ja neljanda jaotise taust. See efekt pärineb n-laps (paaris) sisse blokeerima stiilid.css, mis rakendab musta tausta paarisosadele.
Logo muutmine kleepuvaks
Selle stardikoodiga ei jää logo ülaosale kinni. See tähendab, et lehte alla kerides kaob logo. Saate muuta oma logo kleepuvaks päiseks, rakendades asend: kleepuv atribuut sellele CSS-failis. CSS-i positsioneerimise põhjalikuks sukeldumiseks lugege meie postitust teemal CSS-i positsiooni omadus.
Veenduge, et logo kleepuks ülaosale, kuid tehke seda ainult suurematel ekraanidel (sest väiksema ekraanisuuruse korral võib see minna üle muude elementide). Järgnev HTML-i reageeriv meediapäring loob selle efekti:
@meedia(laius > 980 pikslit) {
.logo {
positsiooni: kleepuv;
üleval: .5rem;
}
}
Nüüd jääb logo kogu aeg ülaosale ja järgib teid kerimisel. Kuid märkate ka, et tekst kaob, kui kerite tumeda taustaga osadesse (sest logo tekst on samuti must). Nüüd vaadake, kuidas seda parandada.
Mix-blend-režiimi lisamine teie kleepuvale päisele
Tagamaks, et must logo ei kaoks mustale taustale, peate värvi dünaamiliselt ümber pöörama. Seda saab teha kasutades mix-blend-režiim CSS-i atribuut ja sellele väärtuse määramine erinevus:
@meedia(laius > 980 pikslit) {
.logo {
positsiooni: kleepuv;
üleval: .5rem;
mix-blend-režiim: erinevus
}
}
CSS-i atribuut mix-blend-mode määrab, kuidas elemendi sisu peaks sulanduma elemendi vanema sisu ja selle taustaga. Erinev väärtus võtab iga piksli erinevuse väärtuse, pöörates heledad värvid ümber. Nii et kui värviväärtused on samad, muutuvad need mustaks. Väärtuste erinevused pöörduvad ümber.
Ülaltoodud CSS-i lisamine kaob logo täielikult. Põhjus on selles, et te pole väljaspool meediumipäringut logo teksti värvi valgeks määranud. Tehke seda järgmise koodiga:
.logo {
värvi: valge;
/* Muud CSS-i atribuudid */
}
Nüüd olete kõik edukalt seadistanud. Kerige lehte alla ja minge mustale taustale. Näete, et logo muutub mustast valgeks.
Lisaks mustale ja valgele saate töötada ka muude värvidega. Näiteks kui muudaksite oma logo teksti värvi siniseks (#008080), kuvatakse valgel taustal roosa värv. Seda illustreerib järgmine pilt.
Enamikul juhtudel soovite, et teie element oleks parimate tulemuste saamiseks valge. Kui kerite ülaossa, võite leida, et teie logo on pooleks lõigatud. See juhtub seetõttu, et logo eksisteerib väljaspool element. Logo täielikuks kuvamiseks peate määrama taustavärvi element valgeks.
Pildi kasutamine logona teksti asemel
See tehnika ei tööta ainult tekstiga, vaid ka piltidega. Loomulikult peate veenduma, et kasutate logona valget pilti. Järgmises näites kasutatakse valget lorem ipsumi logo, mis asub kaustaga samas kaustas index.html fail:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsumi logo">
Siin kasutatav pilt on SVG (Scalable Vector Graphic), teatud tüüpi vektorfail.
Nüüd on teie logo kujutise värv valgel taustal must, nagu on näidatud alloleval pildil.
Kui aga kerida mustale taustale, muutub logo värv automaatselt valgeks. Seda näete alloleval pildil.
Asendades saate logo suurust ka suurendada fondi suurus koos kõrgus ja laius logo sihtivas CSS-i plokis. Lõppude lõpuks on teil nüüd tegemist pigem pildi kui tekstiga.
.logo {
värvi: valge;
laius: 10rem;
/* Muud CSS-i atribuudid */
}
Kui vähendate ekraani, siis meediumipäring enam ei kehti. See lülitab erinevad segamisrežiimid välja, muutes teie logo kaduma. Logo lehele tagasi toomiseks peate määrama mix-blend-režiim logo omadus väljaspool meediapäringut:
.logo {
värvi: valge;
laius: 10rem;
mix-blend-režiim: erinevus;
/* Muud CSS-i atribuudid */
}
See aktiveerib logol alati segamise, isegi suurematel ekraanidel. Kuid väikestel ekraanidel jääb logo ülaossa ega järgi teid allapoole kerimisel (sest asend: kleepuv töötab ainult suurtel ekraanidel). Lõpuks ärge unustage alati kasutada valget logo, et see lehelt ei kaoks.
Lisateave CSS-i näpunäidete ja nippide kohta
Segamisrežiimi kasutades saate luua põnevaid vahelduvate värvidega paigutusi. Veelgi parem, te ei pea ühtegi värvi kõvasti kodeerima ega katkestuspunkte määrama, sest segamise-segamise režiim inverteerib värvi dünaamiliselt. See võimaldab teil luua ilusaid segusid ja värve elemendi sisu osade jaoks, sõltuvalt selle otsesest taustast.
CSS-i peetakse sageli üheks põnevaimaks keeleks õppimiseks. See on osaliselt tingitud sellest, et CSS on täis näpunäiteid ja nippe, nagu see, mida just sellest artiklist õppisite. Mõned muud käepärased CSS-i näpunäited ja nipid on hõljutusefektid, piltide suuruse muutmine konteineritesse mahutamiseks, teksti kärpimine ellipsidega ja teksti teisendamise kasutamine.