Kui sageli CSS-i poole sirutate background-size vara? Kui sa oled nagu mina – ja ilmselt paljud teised esiotsa inimesed –, siis tavaliselt siis, kui sa background-size: cover pilt, mis täidab kogu elemendi ruumi.
Noh, mulle esitati huvitav väljakutse, mis nõudis täpsemat tausta suuruse määramist: hõljumisel üleminevad taustatriibud. Kontrollige seda ja hõljutage kursorit:
Seal toimub palju rohkem kui tausta suurus, kuid see oli nipp, mida ma vajasin, et saada triibud üleminekuks. Mõtlesin, et näitan teile, kuidas ma sinna jõudsin, mitte ainult sellepärast, et see on minu arvates väga kena visuaalne efekt, vaid seepärast, et see nõudis mul loomingulisust gradientide ja segamisrežiimidega, mis teile minu arvates võiksid meeldida.
Alustame lihtsa seadistusega, et asjad oleksid lihtsad. Ma räägin singlist
rohelise ruuduna kujundatud HTML-is:
div {
width: 500px;
height: 500px;
background: palegreen;
}Taustaribade seadistamine
Kui teie mõte läks neid triipe nähes otse CSS-i lineaarsele gradiendile, siis oleme juba samal lehel. Sel juhul ei saa me täpselt teha korduvat gradienti, kuna tahame, et triibud hõivaksid ebaühtlasel hulgal ruumi ja viiksid need üle, kuid saame luua viis triipu, aheldades viis tausta oma olemasoleva taustavärvi peale ja asetades need üles - konteinerist paremal:
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;
}Ma tegin horisontaalsed triibud, kuid me võiksime minna ka vertikaalselt selle lähenemisviisiga, mida siin käsitleme. Ja me saame seda kohandatud omadustega pisut lihtsustada:
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;
}Niisiis, --gt väärtus on gradient ja --n on konstant, mida kasutame triipude allapoole nihutamiseks, et need oleksid vertikaalselt nihutatud. Ja võib-olla olete märganud, et ma pole seadnud tõelist gradienti, vaid pigem kindlad mustad triibud linear-gradient() funktsioon — see on tahtlik ja selleni, miks ma seda tegin, jõuame mõne aja pärast.
Veel üks asi, mida peaksime enne edasiliikumist tegema, on takistada meie tausta kordumist; vastasel juhul plaaditakse ja täidavad nad kogu ruumi:
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;
}Oleksime võinud sättida background-repeat aasta background stenogrammi, kuid otsustasin selle siin välja murda, et oleks lihtne lugeda.
Triipude tasaarvestamine
Meil on tehniliselt triibud, kuid seda on üsna raske öelda, kuna nende vahel pole vahet ja need katavad kogu konteineri. Pigem on meil kindel must ruut.
See on koht, kus me saame kasutada background-size vara. Soovime määrata nii triipude kõrguse kui ka laiuse ning atribuut toetab kahe väärtusega süntaksit, mis võimaldab meil täpselt seda teha. Ja me saame need suurused aheldada, eraldades need komadega samamoodi, nagu me tegime background.
Alustame lihtsast, määrates kõigepealt laiused. Ühe väärtusega süntaksi kasutamine background-size määrab laiuse ja vaikekõrguse auto. Kasutan siin täiesti suvalisi väärtusi, seega määrake väärtusteks need, mis teie kujunduse jaoks kõige paremini sobivad:
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%;
}Kui kasutate samu väärtusi, mis mina, saate järgmise:
Ei tundu täpselt nii, et me määrasime kõigi triipude laiuse, eks? Selle põhjuseks on auto ühe väärtusega süntaksi kõrguse käitumine. Teine triip on laiem kui teised selle all ja see katab neid. Peaksime seadma kõrgused, et saaksime oma tööd näha. Need peaksid kõik olema ühekõrgused ja me saame oma oma uuesti kasutada --n muutuja jällegi, et asjad oleksid lihtsad:
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, palju parem!
Triipude vahele tühikute lisamine
See on täiesti vabatahtlik samm, kui teie disain ei nõua triipude vahele lünki, kuid minu oma tegi seda ja see pole liiga keeruline. Muudame iga triibu kõrgust background-size veidi, vähendades väärtust, nii et need ei täida kogu vertikaalset ruumi.
Saame jätkata oma kasutamist --n muutuv, kuid lahutage näiteks väike summa 5px, Kasutamine calc() et saada, mida tahame.
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);See on palju kordusi, mille saame kõrvaldada teise muutujaga:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maskeerimine ja segamine
Nüüd vahetame palegreen taustavärvi, mida oleme seni visuaalsetel eesmärkidel valge jaoks kasutanud.
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. */
}Selline mustvalge muster sobib suurepäraselt maskeerimiseks ja segamiseks. Selleks pakkime esmalt oma
uude emakonteinerisse ja lisage teine
selle all:
Teeme siin väikese CSS-i ümberfaktorimise. Nüüd, kui meil on uus emakonteiner, saame paranduse edasi anda width ja height omadused, mida me omal kasutasime
seal:
section {
width: 500px;
height: 500px;
} Ma kasutan nende kahe positsioneerimiseks ka CSS-võrku
elemendid üksteise peal. See on sama nipp, mida Temani Afif oma loomiseks kasutab ülilahedad pildigaleriid. Idee seisneb selles, et asetame mõlemad divid täis konteineri kohale, kasutades grid-area atribuut ja joonda kõik keskuse poole:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Nüüd kontrollige seda. Põhjus, miks ma varem kasutasin kindlat gradienti, mis läheb mustast mustaks, on see, et meid varjata ja segada
kihid. See ei ole tõeline maskeerimine selles mõttes, nagu me seda nimetame mask omadus, kuid kihtidevaheline kontrast määrab, millised värvid on nähtavad. Valgega kaetud ala jääb valgeks ja mustaga kaetud ala lekib läbi. MDN-i dokumentatsioon segamisrežiimide kohta on kena selgitus selle kohta, kuidas see toimib.
Selle toimimiseks rakendan tegelikku gradienti, mida me esimesena näha tahame
rakendades samal ajal meie initsiaalist pärit stiilireegleid
uuel, kasutades :nth-child() pseudovalija:
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);
}Kui me siin peatume, ei näe me tegelikult visuaalset erinevust sellest, mis meil varem oli. Põhjus on selles, et me pole veel tegelikku segamist teinud. Niisiis, teeme seda nüüd kasutades screen segamisrežiim:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Kasutasin selle artikli alguses näidatud demos beeži taustavärvi. See veidi tumedam määrdunudvalge värvus laseb vähesel värvil ülejäänud tausta läbi voolata:
Hõljumise efekt
Selle pusle viimane tükk on hõljumise efekt, mis laiendab triipe täislaiuseks. Kõigepealt kirjutame välja oma valija selle jaoks. Soovime, et see juhtuks siis, kui emakonteiner (
meie puhul) hõljutatakse. Kui see hõljub, muudame teises sisalduvate triipude tausta suurust
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Me tahame muuta background-size ribad mahuti täislaiuses, säilitades samal kõrgusel:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}See "kinnitab" tausta täislaiusele. Kui lisame natuke transition siis näeme, et triibud laienevad hõljumisel:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Siin on see viimane demo veel kord:
Lisasin sinna ainult teksti, et näidata, kuidas võiks välja näha selle kasutamine teises kontekstis. Kui teete sama, tasub veenduda, et teksti värvi ja gradiendis kasutatud värvide vahel oleks piisavalt kontrasti, et järgida WCAG juhised. Ja kuigi me puudutame põgusalt juurdepääsetavust, on see väärt arvestades kasutaja eelistusi liikumise vähendamiseks kui tegemist on hõljumise efektiga.
See on mähis!
Päris korralik, eks? Ma arvan kindlasti nii. Mulle meeldib ka selle juures see, et see on üsna hooldatav ja kohandatav. Näiteks saame muuta triipude kõrgust, värve ja suunda, muutes mõnda väärtust. Võite isegi muuta seal mõnda muud asja (nt värve ja laiusi), et muuta see veelgi konfigureeritavamaks.
Mind tõesti huvitab, kui oleksite sellele teistmoodi lähenenud. Kui jah, siis palun jagage kommentaarides! Oleks tore näha, kui palju variatsioone saame koguda.
