S to priročno, a malo znano lastnostjo CSS rešite pogost problem neskladja barv.
Pri stacionarnih elementih spletnega mesta, kot so logotipi, boste pri premikanju po strani pogosto naleteli na barvno mešanico. To se lahko zgodi, če gre statični element čez del spletnega mesta, ki ima isto barvo kot element. Statični element bo neviden, dokler leži na ozadju.
Če želite odpraviti to težavo, morate dinamično obrniti barvo logotipa, ko gre čez element iste barve. Naučite se, kako doseči ta učinek samo s CSS, brez potrebe po JavaScriptu!
Prenesite začetno kodo
Če želite slediti tej vadnici, prenesite začetno kodo iz Repozitorij GitHub na vaš lokalni stroj.
Odprto index.html v brskalniku, ki bi moral izgledati kot stran, prikazana tukaj:
Stran HTML vsebuje logotip in štiri razdelke. Vsak razdelek ima navidezni naslov in tri odstavke navideznega besedila. Besedilo logotipa je enake črne barve kot ozadje drugega in četrtega dela. Ta učinek izvira iz n-ti otrok (sodo) blokirati styles.css, ki uporabi črno ozadje za sode dele.
Kako narediti logotip lepljiv
S to začetno kodo se logotip ne prilepi na vrh. To pomeni, da logotip izgine, ko se pomaknete navzdol po strani. Svoj logotip lahko spremenite v lepljivo glavo tako, da uporabite položaj: lepljiv lastnost znotraj datoteke CSS. Za podrobnejši potop v pozicioniranje v CSS preberite našo objavo na Lastnost položaja CSS.
Prepričajte se, da se logotip drži na vrhu, vendar to storite le na večjih zaslonih (ker bi lahko pri manjših zaslonih šel čez druge elemente). Naslednji HTML odzivna medijska poizvedba ustvarja ta učinek:
@mediji(širina > 980 slikovnih pik) {
.logotip {
položaj: lepljivo;
vrh: .5rem;
}
}
Zdaj se bo logotip ves čas držal na vrhu in vas spremljal med premikanjem. Opazili pa boste tudi, da besedilo izgine, ko se pomaknete v razdelke s temnim ozadjem (ker je tudi besedilo logotipa črno). Zdaj pa si oglejte, kako to popraviti.
Dodajanje mešanega načina mešanja vaši lepljivi glavi
Če želite zagotoviti, da črni logotip ne izgine na črnem ozadju, boste morali barvo dinamično obrniti. To lahko storite tako, da uporabite mix-blend-mode Lastnost CSS in ji dodelite vrednost Razlika:
@mediji(širina > 980 slikovnih pik) {
.logotip {
položaj: lepljivo;
vrh: .5rem;
mix-blend-mode: Razlika
}
}
Lastnost CSS mix-blend-mode določa, kako naj se vsebina elementa zlije z vsebino nadrejenega elementa in njegovim ozadjem. Različna vrednost vzame vrednost razlike vsake slikovne pike in obrne svetle barve. Torej, če so barvne vrednosti enake, postanejo črne. Razlike v vrednostih se bodo obrnile.
Z zgornjim dodatkom CSS bo logotip popolnoma izginil. To je zato, ker barve besedila logotipa niste nastavili na belo zunaj medijske poizvedbe. Naredite to z naslednjo kodo:
.logotip {
barva: bela;
/* Druge lastnosti CSS */
}
Zdaj ste vse uspešno nastavili. Pomaknite se navzdol po strani in na črno ozadje. Videli bi, da se logotip spreminja iz črne v belo.
Delate lahko tudi z drugimi barvami poleg črne in bele. Če bi na primer spremenili barvo besedila vašega logotipa v modrozeleno (#008080), boste na belih ozadjih dobili roza barvo. Naslednja slika to ponazarja.
V večini primerov bi želeli, da je vaš element bel, da bi dosegli najboljše rezultate. Poleg tega, če se pomaknete na vrh, boste morda našli svoj logotip prepolovljen. To se zgodi, ker logotip obstaja zunaj element. Če želite prikazati logotip v celoti, morate nastaviti barvo ozadja element v belo.
Uporaba slike kot logotipa namesto besedila
Ta tehnika ne deluje le z besedilom, ampak tudi s slikami. Seveda se morate prepričati, da kot logotip uporabite belo sliko. Naslednji primer uporablja bel logotip lorem ipsum, ki je v isti mapi kot index.html mapa:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum logotip">
Tukaj uporabljena slika je SVG (Scalable Vector Graphic), vrsta vektorska datoteka.
Zdaj bo barva slike vašega logotipa črna na belem ozadju, kot je prikazano na spodnji sliki.
Če pa se pomaknete na črno ozadje, bo barva logotipa samodejno postala bela. To lahko vidite na spodnji sliki.
Velikost logotipa lahko povečate tudi z zamenjavo velikost pisave z višina in premer v bloku CSS, ki cilja na logotip. Konec koncev imate zdaj opravka s sliko in ne z besedilom.
.logotip {
barva: bela;
premer: 10rem;
/* Druge lastnosti CSS */
}
Če skrčite zaslon navzdol, medijska poizvedba ne bo več veljala. S tem boste izklopili različne načine mešanja, zaradi česar bo vaš logotip izginil. Če želite logotip vrniti na stran, morate nastaviti mix-blend-mode lastnost na logotipu zunaj medijske poizvedbe:
.logotip {
barva: bela;
premer: 10rem;
mix-blend-mode: Razlika;
/* Druge lastnosti CSS */
}
To bo aktiviralo mešano mešanje na logotipu ves čas, tudi na večjih zaslonih. Toda na majhnih zaslonih bo logotip ostal na vrhu in vam ne bo sledil, ko se pomikate navzdol (ker položaj: lepljiv deluje samo na velikih zaslonih). Nenazadnje ne pozabite uporabiti belega logotipa, da preprečite, da bi izginil s strani.
Preberite več nasvetov in trikov CSS
Z uporabo načina mešanja in mešanja lahko ustvarite fascinantne postavitve z izmeničnimi barvami. Še bolje, ni vam treba trdo kodirati nobene barve ali nastaviti prelomnih točk, ker bo način mešanja in mešanja barvo dinamično obrnil. Omogoča vam ustvarjanje lepih mešanic in barv za dele vsebine elementa, odvisno od njegovega neposrednega ozadja.
CSS pogosto velja za enega najbolj vznemirljivih jezikov za učenje. To je delno zato, ker je CSS poln nasvetov in trikov, kot je tisti, ki ste ga pravkar izvedeli v tem članku. Nekateri drugi priročni nasveti in triki CSS so učinki lebdenja, spreminjanje velikosti slik, da se prilegajo vsebnikom, prirezovanje besedila z elipsami in uporaba preoblikovanja besedila.
