Kuinka usein tavoitat CSS:n background-size omaisuutta? Jos olet kuten minä – ja luultavasti monet muut käyttöliittymän ihmiset – niin se on yleensä silloin, kun sinä background-size: cover kuva, joka täyttää koko elementin tilan.
No, minulle esitettiin mielenkiintoinen haaste, joka vaati edistyneempää taustan kokoa: taustaraidat, jotka siirtyvät leijuessa. Tarkista tämä ja siirrä se kohdistimella:
Siellä tapahtuu paljon muutakin kuin taustan koko, mutta se oli se temppu, jota tarvitsin saadakseni raidat siirtymään. Ajattelin näyttää sinulle, kuinka pääsin sinne, ei vain siksi, että se on mielestäni todella mukava visuaalinen tehoste, vaan koska se vaati minua luovasti liukuvärien ja sekoitustilojen kanssa, joista saatat pitää.
Aloitetaan hyvin perusasetuksista pitääksemme asiat yksinkertaisina. Puhun yhdestä
vihreäksi neliöksi muotoillussa HTML-koodissa:
div {
width: 500px;
height: 500px;
background: palegreen;
}Taustaraitojen asettaminen
Jos mielesi meni suoraan CSS-lineaariseen gradienttiin, kun näit nuo raidat, olemme jo samalla sivulla. Emme voi tarkalleen tehdä toistuvaa gradienttia tässä tapauksessa, koska haluamme, että raidat vievät epätasaisesti tilaa ja siirtävät ne, mutta voimme luoda viisi raitaa ketjuttamalla viisi taustaa olemassa olevan taustavärimme päälle ja sijoittamalla ne yläosaan. -kontin oikealla puolella:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}Tein vaakasuoria raitoja, mutta voisimme mennä myös pystysuoraan tällä lähestymistavalla. Ja voimme yksinkertaistaa tätä hieman mukautetuilla ominaisuuksilla:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}Niin, --gt arvo on gradientti ja --n on vakio, jota käytämme työntämään raitoja alaspäin niin, että ne siirtyvät pystysuunnassa. Ja olet ehkä huomannut, että en ole asettanut todellista kaltevuutta, vaan melko kiinteät mustat raidat linear-gradient() toiminto – se on tarkoituksellista, ja ymmärrämme, miksi tein sen hetken kuluttua.
Vielä yksi asia, joka meidän pitäisi tehdä ennen kuin jatkamme eteenpäin, on estää taustamme toistumasta; muuten ne laatoittavat ja täyttävät koko tilan:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}Olisimme voineet asettaa background-repeat vuonna background lyhennettä, mutta päätin purkaa sen tänne, jotta asiat olisivat helppolukuisia.
Raidojen tasaus
Meillä on teknisesti raidat, mutta se on melko vaikea erottaa, koska niiden välillä ei ole väliä ja ne peittävät koko astian. Se on enemmän kuin meillä olisi kiinteä musta neliö.
Tässä saamme käyttää background-size omaisuutta. Haluamme asettaa sekä raitojen korkeuden että leveyden, ja ominaisuus tukee kaksiarvoista syntaksia, jonka avulla voimme tehdä juuri sen. Ja voimme ketjuttaa nämä koot erottamalla ne pilkuilla samalla tavalla kuin teimme background.
Aloitetaan yksinkertaisella asettamalla ensin leveydet. Yksiarvoisen syntaksin käyttäminen kohteelle background-size asettaa leveyden ja oletuskorkeuden auto. Käytän tässä täysin mielivaltaisia arvoja, joten aseta arvot suunnittelullesi parhaiten sopiviksi:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}Jos käytät samoja arvoja kuin minä, saat tämän:
Eikö näytä siltä, että olemme asettaneet kaikkien raitojen leveyden, vai mitä? Se johtuu siitä auto yksiarvoisen syntaksin korkeuskäyttäytyminen. Toinen raita on leveämpi kuin muut sen alapuolella, ja se peittää ne. Meidän pitäisi asettaa korkeuksia, jotta voimme nähdä työmme. Niiden kaikkien pitäisi olla samankorkuisia, ja voimme itse asiassa käyttää uudelleen --n muuttuja taas, jotta asiat olisivat yksinkertaisia:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}Ah, paljon parempi!
Raitojen väliin lisätään rakoja
Tämä on täysin valinnainen vaihe, jos suunnittelusi ei vaadi rakoja raitojen väliin, mutta omani vaati, eikä se ole liian monimutkaista. Muutamme jokaisen raidan korkeutta background-size hivenen, mikä pienentää arvoa, joten ne eivät täytä koko pystysuoraa tilaa.
Voimme jatkaa meidän käyttöä --n muuttuja, mutta vähennä vaikka pieni määrä 5px, Käyttäen calc() saamaan mitä haluamme.
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);Se on paljon toistoa, jonka voimme poistaa toisella muuttujalla:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maskaus ja sekoitus
Nyt vaihdetaan palegreen taustaväriä, jota olemme käyttäneet visuaalisiin tarkoituksiin tähän asti valkoisena.
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}Tällainen mustavalkoinen kuvio sopii täydellisesti peittämiseen ja sekoittamiseen. Tätä varten aiomme ensin kääriä omamme
uuteen ylätason säilöön ja ota käyttöön toinen
sen alla:
Teemme täällä hieman CSS-re-factoringia. Nyt kun meillä on uusi ylätason säilö, voimme välittää korjatun width ja height kiinteistöjä, joita käytimme
tuolla:
section {
width: 500px;
height: 500px;
} Aion myös käyttää CSS Gridiä näiden kahden sijoittamiseen
elementtejä päällekkäin. Tämä on sama temppu, jota Temani Afif käyttää luodessaan omansa super siistejä kuvagallerioita. Ajatuksena on, että asetamme molemmat divs-tunnisteet täyden säiliön päälle käyttämällä grid-area omaisuutta ja kohdista kaikki keskustaan:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Tarkista nyt tämä. Syy, miksi käytin aiemmin kiinteää gradienttia, joka muuttuu mustasta mustaksi, on valmistaa meidät peittämään ja sekoittamaan nämä kaksi
kerroksia. Tämä ei ole todellista peittämistä siinä mielessä, mitä me kutsumme mask ominaisuus, mutta kerrosten välinen kontrasti hallitsee näkyvät värit. Valkoinen alue pysyy valkoisena ja mustan peittämä alue vuotaa läpi. MDN:n dokumentaatio sekoitustiloista on hyvä selitys kuinka tämä toimii.
Saadaksesi sen toimimaan, käytän todellista gradienttia, jonka haluamme nähdä ensimmäisessä
sovellettaessa tyylisääntöjä alkuperäisestä
uudessa, käyttämällä :nth-child() pseudovalitsin:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Jos pysähdymme tähän, emme itse asiassa näe mitään visuaalista eroa verrattuna siihen, mitä meillä oli aiemmin. Tämä johtuu siitä, että emme ole vielä tehneet varsinaista sekoitusta. Joten, tehdään se nyt käyttämällä screen sekoitustila:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Käytin beigeä taustaväriä esittelyssä, jonka näytin tämän artikkelin alussa. Tuo hieman tummempi luonnonvalkoinen väritys sallii hieman värin vuotavan muun taustan läpi:
Hover-efekti
Tämän palapelin viimeinen pala on hover-efekti, joka leventää raidat täyteen leveyteen. Kirjoitetaan ensin valintamme sille. Haluamme tämän tapahtuvan, kun pääsäiliö (
meidän tapauksessamme) näkyy. Kun se on päällä, muutamme toisen sisältämien raitojen taustakokoa
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Haluamme muuttaa background-size raidat säiliön koko leveydelle säilyttäen samalla korkeuden:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Se "napsauttaa" taustan täysleveäksi. Jos lisäämme vähän transition tähän, sitten näemme raidat laajenevan leijuttaessa:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Tässä vielä viimeinen demo:
Lisäsin sinne vain tekstiä näyttääkseni, miltä tämän käyttäminen eri kontekstissa voisi näyttää. Jos teet samoin, kannattaa varmistaa, että tekstin värin ja liukuvärissä käytettyjen värien välillä on tarpeeksi kontrastia. WCAG:n ohjeet. Ja vaikka käsittelemme lyhyesti saavutettavuutta, se kannattaa ottaen huomioon käyttäjän mieltymykset liikkeen vähentämisestä kun kyse on hover-efektistä.
Se on kääre!
Aika siisti, eikö? Olen varmasti sitä mieltä. Pidän tästä myös siitä, että se on melko ylläpidettävä ja muokattavissa. Voimme esimerkiksi muuttaa raitojen korkeutta, värejä ja suuntaa muuttamalla muutamia arvoja. Voit jopa muuttaa muutamia muita asioita - kuten värejä ja leveyksiä - tehdäksesi siitä entistä paremmin konfiguroitavissa.
Olen todella kiinnostunut, jos olisit lähestynyt asiaa eri tavalla. Jos näin on, jaa kommentteihin! Olisi hienoa nähdä, kuinka monta muunnelmaa voimme kerätä.
