Cât de des să apelezi la CSS background-size proprietate? Dacă ești ca mine – și probabil o mulțime de alți oameni de front-end – atunci este de obicei atunci când tu background-size: cover o imagine pentru a umple spațiul unui întreg element.
Ei bine, mi s-a prezentat o provocare interesantă care necesita o dimensiune mai avansată a fundalului: dungi de fundal care tranzitează la hover. Verificați acest lucru și treceți-l cu cursorul:
Se întâmplă mult mai mult decât dimensiunea fundalului, dar acesta a fost trucul de care aveam nevoie pentru a face tranziția dungilor. M-am gândit să vă arăt cum am ajuns acolo, nu numai pentru că cred că este un efect vizual foarte drăguț, ci pentru că mi-a cerut să fiu creativ cu gradienți și moduri de amestecare de care cred că v-ar putea plăcea.
Să începem cu o configurație de bază pentru a menține lucrurile simple. Eu vorbesc despre un singur
în HTML care este stilat ca un pătrat verde:
div {
width: 500px;
height: 500px;
background: palegreen;
}Configurarea dungilor de fundal
Dacă mintea ta a mers direct la un gradient liniar CSS când ai văzut acele dungi, atunci suntem deja pe aceeași pagină. Nu putem face exact un gradient care se repetă în acest caz, deoarece dorim ca dungile să ocupe cantități inegale de spațiu și să le tranziți, dar putem crea cinci dungi prin înlănțuirea a cinci fundaluri peste culoarea de fundal existentă și plasându-le în partea de sus. -dreptul containerului:
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;
}Am făcut dungi orizontale, dar am putea merge și pe verticală cu abordarea pe care o acoperim aici. Și putem simplifica acest lucru cu proprietăți personalizate:
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;
}Deci, --gt valoarea este gradientul și --n este o constantă pe care o folosim pentru a deplasa dungile în jos, astfel încât acestea să fie compensate vertical. Și poate ați observat că nu am stabilit un gradient adevărat, ci mai degrabă dungi negre solide în linear-gradient() funcția - asta este intenționat și vom ajunge la de ce am făcut asta în scurt timp.
Încă un lucru pe care ar trebui să-l facem înainte de a trece mai departe este să ne împiedicăm să se repete mediul; în caz contrar, vor placa și umple întreg spațiul:
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;
}Am fi putut să setăm background-repeat în background stenografie, dar am decis să o desprind aici pentru a menține lucrurile ușor de citit.
Compensarea dungilor
Din punct de vedere tehnic, avem dungi, dar este destul de greu de spus, deoarece nu există distanță între ele și acoperă întregul container. Este mai degrabă ca și cum am avea un pătrat negru solid.
Aici putem folosi background-size proprietate. Vrem să setăm atât înălțimea, cât și lățimea dungilor, iar proprietatea acceptă o sintaxă cu două valori care ne permite să facem exact asta. Și, putem înlănțui acele dimensiuni prin virgulă, separându-le în același mod în care am procedat background.
Să începem simplu prin a seta mai întâi lățimile. Folosind sintaxa cu o singură valoare pentru background-size setează lățimea și setează implicit înălțimea la auto. Folosesc valori total arbitrare aici, așa că setați valorile la ceea ce funcționează cel mai bine pentru designul dvs.:
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%;
}Dacă utilizați aceleași valori ca și mine, veți obține asta:
Nu pare exact ca am stabilit lățimea pentru toate dungile, nu-i așa? Asta din cauza auto comportamentul la înălțime al sintaxei cu o singură valoare. A doua dungă este mai lată decât celelalte de sub ea și le acoperă. Ar trebui să stabilim înălțimile astfel încât să ne vedem munca. Ar trebui să aibă toate la aceeași înălțime și le putem reutiliza --n variabilă, din nou, pentru a menține lucrurile simple:
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, mult mai bine!
Adăugarea de goluri între dungi
Acesta este un pas total opțional dacă designul dvs. nu necesită spații între dungi, dar al meu a făcut-o și nu este prea complicat. Schimbăm înălțimea fiecărei dungi background-size o smidge, scăzând valoarea, astfel încât să nu umple întreg spațiul vertical.
Putem continua să ne folosim --n variabilă, dar scădeți o cantitate mică, să zicem 5px, Folosind calc() pentru a obține ceea ce ne dorim.
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);Este multă repetare pe care o putem elimina cu o altă variabilă:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Mascare și amestecare
Acum să schimbăm palegreen culoarea de fundal pe care am folosit-o în scopuri vizuale până în acest moment pentru alb.
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. */
}Un model alb-negru ca acesta este perfect pentru mascare și amestecare. Pentru a face asta, mai întâi vom împacheta
într-un nou container părinte și introduceți un al doilea
sub ea:
Vom face o mică re-factorizare CSS aici. Acum că avem un nou container părinte, putem trece fix width și height proprietățile pe care le folosim la noi
dincolo:
section {
width: 500px;
height: 500px;
} De asemenea, voi folosi CSS Grid pentru a le poziționa pe cele două
elemente una peste alta. Acesta este același truc pe care Temani Afif îl folosește pentru a-și crea galerii de imagini super cool. Ideea este că plasăm ambele div-uri peste containerul plin folosind grid-area proprietate și aliniați totul spre centru:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Acum, verifică asta. Motivul pentru care am folosit un gradient solid care trece de la negru la negru mai devreme este pentru a ne pregăti pentru a masca și a amesteca cele două
straturi. Aceasta nu este o mascare adevărată în sensul pe care îl numim mask proprietate, dar contrastul dintre straturi controlează ce culori sunt vizibile. Zona acoperită de alb va rămâne albă, iar zona acoperită de negru trece prin scurgeri. Documentația MDN despre modurile de amestecare are o explicație bună despre cum funcționează.
Pentru ca acest lucru să funcționeze, voi aplica gradientul real pe care vrem să-l vedem pe primul
aplicand in acelasi timp regulile de stil de la initiala noastra
pe cel nou, folosind :nth-child() pseudo-selector:
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);
}Dacă ne oprim aici, de fapt nu vom vedea nicio diferență vizuală față de ceea ce aveam înainte. Asta pentru că nu am făcut încă amestecul propriu-zis. Deci, hai să facem asta acum folosind screen modul amestec:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}Am folosit o culoare de fundal bej în demo-ul pe care l-am arătat la începutul acestui articol. Acest tip de colorare alb aproape puțin mai închisă permite o mică culoare să curgă prin restul fundalului:
Efectul hover
Ultima piesă a acestui puzzle este efectul de hover care lărgește dungile la lățime completă. Mai întâi, să scriem selectorul nostru pentru acesta. Dorim ca acest lucru să se întâmple atunci când containerul părinte (
în cazul nostru) este planat. Când trece cu mouse-ul, vom schimba dimensiunea de fundal a dungilor conținute în al doilea
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Vom dori să schimbăm background-size a dungilor pe toată lățimea recipientului, menținând în același timp aceeași înălțime:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Asta „face” fundalul la lățimea completă. Daca adaugam putin transition la aceasta, apoi vedem dungile se extind la hover:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Iată încă o dată acel demo final:
Am adăugat text acolo doar pentru a arăta cum ar putea arăta dacă îl utilizați într-un context diferit. Dacă procedați la fel, atunci merită să vă asigurați că există suficient contrast între culoarea textului și culorile utilizate în gradient pentru a se conforma orientări WCAG. Și în timp ce ne referim pe scurt la accesibilitate, merită luând în considerare preferințele utilizatorului pentru mișcare redusă când vine vorba de efectul hover.
Asta-i o înfășurare!
Destul de îngrijit, nu? Cu siguranță așa cred. Ceea ce îmi place și la asta este că este destul de ușor de întreținut și personalizabil. De exemplu, putem modifica înălțimea, culorile și direcția dungilor modificând câteva valori. S-ar putea chiar să mai variați câteva lucruri acolo - cum ar fi culorile și lățimile - pentru a le face și mai configurabile.
Sunt foarte interesat dacă ați fi abordat asta într-un mod diferit. Dacă da, vă rugăm să distribuiți în comentarii! Ar fi bine să vedem câte variații putem colecta.
