Riješite uobičajeni problem neslaganja boja pomoću ovog zgodnog, ali malo poznatog CSS svojstva.
Sa stacionarnim elementima web stranice kao što su logotipi, često ćete naići na pomješanu boju prilikom pomicanja stranice. To se može dogoditi ako statični element prijeđe preko dijela web stranice koji ima istu boju kao i element. Statički element bit će nevidljiv dok leži na toj pozadini.
Da biste riješili ovaj problem, trebate dinamički invertirati boju logotipa kada prelazi preko elementa iste boje. Naučite kako postići ovaj učinak koristeći samo CSS, bez potrebe za JavaScriptom!
Preuzmite početni kod
Da biste slijedili ovaj vodič, preuzmite početni kod s njegovog GitHub spremište na vaš lokalni stroj.
Otvoren index.html u pregledniku koji bi trebao izgledati kao stranica prikazana ovdje:
HTML stranica sadrži logotip i četiri odjeljka. Svaki odjeljak ima lažni naslov i tri odlomka lažnog teksta. Tekst logotipa iste je crne boje kao i pozadina drugog i četvrtog odjeljka. Ovaj učinak dolazi od n-to dijete (parno) blokirati stilovi.css, koji primjenjuje crnu pozadinu na parne dijelove.
Učiniti logotip ljepljivim
Uz ovaj početni kod, logotip se ne lijepi za vrh. To znači da logotip nestaje kada se pomičete prema dolje po stranici. Svoj logotip možete pretvoriti u ljepljivo zaglavlje primjenom položaj: ljepljiv svojstvo unutar CSS datoteke. Za dublji uvid u pozicioniranje u CSS-u pročitajte naš post na CSS svojstvo pozicije.
Pazite da se logotip zalijepi na vrh, ali to učinite samo na većim zaslonima (jer bi na manjim zaslonima mogao prijeći preko drugih elemenata). Sljedeće HTML responzivni medijski upit stvara ovaj efekt:
@mediji(širina > 980 px) {
.logo {
položaj: ljepljiv;
vrh: .5rem;
}
}
Sada će se logotip cijelo vrijeme držati na vrhu i pratiti vas dok se pomičete. Ali također ćete primijetiti da tekst nestaje kada se pomaknete u odjeljke tamne pozadine (jer je tekst logotipa također crn). Sada pogledajte kako to popraviti.
Dodavanje mix-blend-modea vašem ljepljivom zaglavlju
Kako biste osigurali da crni logotip ne nestane na crnoj pozadini, morat ćete dinamički obrnuti boju. Način na koji biste to učinili jest pomoću mix-blend-mode CSS svojstvo i dodjeljivanje vrijednosti razlika:
@mediji(širina > 980 px) {
.logo {
položaj: ljepljiv;
vrh: .5rem;
mix-blend-mode: razlika
}
}
CSS svojstvo mix-blend-mode određuje kako bi se sadržaj elementa trebao stopiti sa sadržajem nadređenog elementa i njegovom pozadinom. Različita vrijednost uzima vrijednost razlike svakog piksela, invertirajući svijetle boje. Dakle, ako su vrijednosti boja iste, one postaju crne. Razlike u vrijednostima će se obrnuti.
Gornji CSS dodatak će potpuno nestati logotipa. To je zato što niste postavili boju teksta logotipa na bijelu izvan medijskog upita. Učinite to sa sljedećim kodom:
.logo {
boja: bijela;
/* Ostala CSS svojstva */
}
Sada ste sve uspješno postavili. Pomaknite se prema dolje na stranici do crne pozadine. Vidjeli biste kako se logotip mijenja iz crne u bijelu.
Također možete raditi s drugim bojama osim crne i bijele. Na primjer, ako biste promijenili boju teksta vašeg logotipa u plavozelenu boju (#008080), dobit ćete ružičastu boju na bijelim pozadinama. Sljedeća slika to ilustrira.
U većini slučajeva, željeli biste da vaš element bude bijele boje kako biste dobili najbolje rezultate. Također, ako se pomaknete na vrh, svoj logotip možete pronaći prepolovljen. To se događa jer logotip postoji izvan element. Za prikaz logotipa u cijelosti morate postaviti boju pozadine element u bijelu.
Korištenje slike kao logotipa umjesto teksta
Ova tehnika ne radi samo s tekstom, već i sa slikama. Naravno, morate biti sigurni da koristite bijelu sliku kao logotip. Sljedeći primjer koristi bijeli logotip lorem ipsum koji se nalazi u istoj mapi kao i index.html datoteka:
<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum Logo">
Slika koja se ovdje koristi je SVG (Scalable Vector Graphic), vrsta vektorska datoteka.
Sada će boja vašeg logotipa biti crna na bijeloj pozadini kao što je prikazano na slici ispod.
Ali ako se pomaknete na crnu pozadinu, boja logotipa automatski će postati bijela. To možete vidjeti na slici ispod.
Također možete povećati veličinu logotipa zamjenom veličina fonta s visina i širina u CSS bloku koji cilja na logotip. Na kraju krajeva, sada imate posla sa slikom, a ne s tekstom.
.logo {
boja: bijela;
širina: 10rem;
/* Ostala CSS svojstva */
}
Ako smanjite zaslon prema dolje, medijski upit se više neće primjenjivati. Ovo će isključiti različite načine stapanja, čime će vaš logo nestati. Da biste vratili logotip na stranicu, trebate postaviti mix-blend-mode svojstvo na logotipu izvan medijskog upita:
.logo {
boja: bijela;
širina: 10rem;
mix-blend-mode: razlika;
/* Ostala CSS svojstva */
}
Ovo će aktivirati miksanje logotipa u svakom trenutku, čak i na većim zaslonima. No na malim zaslonima logotip će ostati na vrhu i neće vas pratiti dok se pomičete prema dolje (jer položaj: ljepljiv radi samo na velikim ekranima). Na kraju, uvijek ne zaboravite koristiti bijeli logotip kako biste spriječili da nestane sa stranice.
Saznajte više CSS savjeta i trikova
Korištenjem načina miješanja i miješanja možete stvoriti fascinantne izglede s izmjeničnim bojama. Još bolje, ne morate teško kodirati nijednu boju ili postavljati prijelomne točke jer će mix-blend-mode dinamički invertirati boju. Omogućuje vam stvaranje lijepih mješavina i boja za dijelove sadržaja elementa ovisno o njegovoj izravnoj pozadini.
CSS se često smatra jednim od najuzbudljivijih jezika za učenje. To je dijelom zato što je CSS pun savjeta i trikova poput onoga koji ste upravo naučili u ovom članku. Neki drugi korisni CSS savjeti i trikovi su efekti lebdenja, promjena veličine slika da stanu u spremnike, skraćivanje teksta elipsama i korištenje transformacije teksta.
