Kuinka muuttaa dynaamisesti väriä vierittäessäsi CSS: llä

Kun käytät kiinteitä verkkosivuston elementtejä, kuten logoja, joudut usein värisekaannukseen sivua vierittäessäsi. Näin voi tapahtua, jos staattinen elementti ylittää verkkosivuston osan, joka jakaa saman värin elementin kanssa. Staattinen elementti on näkymätön, kun se lepää tällä taustalla.

Tämän ongelman korjaamiseksi sinun on käännettävä logon väri dynaamisesti, kun se menee samanvärisen elementin päälle. Opi saavuttamaan tämä vaikutus käyttämällä vain CSS: ää ilman JavaScriptiä!

Lataa aloituskoodi

Noudata tätä opetusohjelmaa lataamalla aloituskoodi siitä GitHub-arkisto paikalliseen koneeseen.

Avata index.html selaimessa, jonka pitäisi näyttää tässä esitetyltä sivulta:

HTML-sivu sisältää logon ja neljä osaa. Jokaisessa osiossa on valeotsikko ja kolme kappaletta valetekstiä. Logon teksti on samaa mustaa väriä kuin toisen ja neljännen osan tausta. Tämä vaikutus tulee n-lapsi (parillinen) estää sisään styles.css, joka käyttää mustaa taustaa parillisiin osiin.

Logon tekeminen tahmeaksi

Tällä aloituskoodilla logo ei tartu yläosaan. Tämä tarkoittaa, että logo katoaa, kun vierität sivua alaspäin. Voit muuttaa logosi tarttuvaksi otsikoksi käyttämällä asento: tahmea ominaisuus sille CSS-tiedoston sisällä. Jos haluat perehtyä syvälle CSS: n paikannukseen, lue artikkelimme CSS-sijaintiominaisuus.

Varmista, että logo tarttuu yläosaan, mutta tee se vain suuremmilla näytöillä (koska pienemmillä näytöillä se voi mennä muiden elementtien päälle). Seuraavat Responsiivinen HTML-mediakysely luo tämän efektin:

@media(leveys > 980 pikseliä) {
.logo { 
asema: tahmea; 
alkuun: .5 rem; 
 }
}

Nyt logo pysyy yläosassa koko ajan ja seuraa sinua vierittäessäsi. Mutta huomaat myös, että teksti katoaa, kun vierität tummiin taustaosiin (koska logoteksti on myös musta). Katso nyt kuinka korjata tämä.

Mix-blend-tilan lisääminen Sticky Headeriisi

Varmistaaksesi, että musta logo ei katoa mustalle taustalle, sinun on käännettävä väri dynaamisesti. Voit tehdä tämän käyttämällä mix-blend-tila CSS-ominaisuus ja sen arvon määrittäminen ero:

@media(leveys > 980 pikseliä) { 
.logo { 
asema: tahmea; 
alkuun: .5 rem; 
mix-blend-tila: ero
 }
}

Mix-blend-mode CSS-ominaisuus määrittää, kuinka elementin sisällön tulee sulautua elementin ylätason sisältöön ja sen taustaan. Eri arvo ottaa kunkin pikselin erotusarvon ja kääntää vaaleat värit. Joten jos väriarvot ovat samat, ne muuttuvat mustiksi. Arvojen erot muuttuvat käänteisiksi.

Yllä oleva CSS-lisäys poistaa logon kokonaan. Tämä johtuu siitä, että et ole asettanut logotekstin väriä valkoiseksi mediakyselyn ulkopuolella. Tee se seuraavalla koodilla:

.logo { 
väri: valkoinen; 
/* Muut CSS-ominaisuudet */
}

Nyt olet onnistuneesti määrittänyt kaiken. Vieritä sivua alaspäin mustalle taustalle. Näet logon muuttuvan mustasta valkoiseksi.

Voit käyttää myös muita värejä kuin mustaa ja valkoista. Jos esimerkiksi muuttaisit logotekstin värin sinivihreäksi (#008080), saat värin vaaleanpunaisena valkoiselle taustalle. Seuraava kuva havainnollistaa tätä.

Useimmissa tapauksissa haluat, että elementtisi on valkoinen saadaksesi parhaat tulokset. Lisäksi, jos vierität ylös, saatat löytää logosi puolittuvan. Tämä johtuu siitä, että logo on ulkopuolella elementti. Jotta logo näkyy kokonaisuudessaan, sinun on asetettava taustaväri elementti valkoiseksi.

Kuvan käyttäminen logona tekstin sijaan

Tämä tekniikka ei toimi vain tekstin, vaan myös kuvien kanssa. Tietenkin sinun on varmistettava, että käytät logona valkoista kuvaa. Seuraavassa esimerkissä käytetään valkoista lorem ipsum -logoa, joka on samassa kansiossa kuin index.html tiedosto:

<imgsrc="loremipsum-297.svg"alt="Lorem Ipsum -logo">

Tässä käytetty kuva on SVG (Scalable Vector Graphic), eräänlainen vektoritiedosto.

Logokuvasi väri on nyt musta valkoisella pohjalla alla olevan kuvan mukaisesti.

Mutta jos vierität mustalle taustalle, logon väri muuttuu automaattisesti valkoiseksi. Voit nähdä tämän alla olevasta kuvasta.

Voit myös suurentaa logon kokoa vaihtamalla Fonttikoko kanssa korkeus ja leveys logoon kohdistetussa CSS-lohkossa. Loppujen lopuksi olet nyt tekemisissä kuvan sijaan tekstin kanssa.

.logo {
väri: valkoinen;
leveys: 10rem;
/* Muut CSS-ominaisuudet */
}

Jos pienennät näyttöä, mediakyselyä ei enää käytetä. Tämä poistaa käytöstä eri sekoitustilat, jolloin logosi katoaa. Jos haluat tuoda logon takaisin sivulle, sinun on asetettava mix-blend-tila logon ominaisuus mediakyselyn ulkopuolella:

.logo {
väri: valkoinen;
leveys: 10rem;
mix-blend-tila: ero;
/* Muut CSS-ominaisuudet */
}

Tämä aktivoi logossa sekoittamisen aina, jopa suuremmilla näytöillä. Pienillä näytöillä logo pysyy kuitenkin yläosassa eikä seuraa sinua, kun vierität alaspäin (koska asento: tahmea toimii vain suurilla näytöillä). Muista aina käyttää valkoista logoa, jotta se ei katoa sivulta.

Lue lisää CSS-vinkkejä ja temppuja

Käyttämällä sekoitustilaa voit luoda kiehtovia asetteluja vuorottelevilla väreillä. Vielä parempi, sinun ei tarvitse koodata mitään väriä tai asettaa keskeytyskohtia, koska sekoitus-sekoitustila kääntää värin dynaamisesti. Sen avulla voit luoda mukavia sekoituksia ja värejä elementin sisällön osiin sen suorasta taustasta riippuen.

CSS: ää pidetään usein yhtenä jännittävimmistä opiskelukielistä. Tämä johtuu osittain siitä, että CSS on täynnä vinkkejä ja temppuja, kuten juuri tässä artikkelissa oppimasi. Muita käteviä CSS-vinkkejä ja temppuja ovat hover-tehosteet, kuvien koon muuttaminen sopimaan säilöihin, tekstin katkaisu ellipseillä ja tekstin muuntaminen.