Kako pogosto posežete po CSS background-size lastnina? Če ste takšni kot jaz – in verjetno še veliko drugih spremljevalcev – potem je običajno, ko vi background-size: cover slika, ki zapolni prostor celotnega elementa.
No, postavil sem se pred zanimiv izziv, ki je zahteval naprednejše določanje velikosti ozadja: črte ozadja, ki se spreminjajo, ko lebdimo. Oglejte si to in se nanj premaknite s kazalcem:
Tam se dogaja veliko več kot velikost ozadja, toda to je bil trik, ki sem ga potreboval, da bi črte prehajale. Mislil sem, da bi vam pokazal, kako sem prišel do tja, ne samo zato, ker mislim, da je res lep vizualni učinek, ampak ker je od mene zahteval, da postanem ustvarjalen s prelivi in načini mešanja, za katere menim, da bi lahko uživali.
Začnimo z zelo osnovno nastavitvijo, da bodo stvari preproste. Govorim o enem samem
v HTML, ki je oblikovan kot zeleni kvadrat:
div {
width: 500px;
height: 500px;
background: palegreen;
}Nastavitev trakov za ozadje
Če ste ob ogledu teh črt pomislili naravnost na linearni gradient CSS, smo že na istem. V tem primeru ne moremo natančno narediti ponavljajočega se preliva, saj želimo, da črte zasedejo neenakomerno količino prostora in jih prehajajo, lahko pa ustvarimo pet črt tako, da verižimo pet ozadij na našo obstoječo barvo ozadja in jih postavimo na vrh - desno od posode:
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;
}Naredil sem vodoravne črte, lahko pa bi šli tudi navpično s pristopom, ki ga obravnavamo tukaj. In to lahko precej poenostavimo z lastnostmi po meri:
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;
}Torej, --gt vrednost je gradient in --n je konstanta, ki jo uporabljamo za potiskanje črt navzdol, tako da so zamaknjene navpično. In morda ste opazili, da nisem nastavil pravega gradienta, temveč enobarvne črne črte v linear-gradient() funkcija — to je namerno in kmalu bomo ugotovili, zakaj sem to naredil.
Še ena stvar, ki bi jo morali storiti, preden gremo naprej, je preprečiti, da bi se naše ozadje ponovilo; sicer bodo ploščice in zapolnile ves prostor:
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;
}Lahko bi postavili background-repeat v background stenografijo, vendar sem se odločil, da jo razdelim tukaj, da bodo stvari lažje berljive.
Poravnava črt
Tehnično imamo črte, vendar je to precej težko ugotoviti, ker med njimi ni razmika in pokrivajo celotno posodo. Bolj kot da imamo en črn kvadrat.
Tukaj lahko uporabimo background-size premoženje. Želimo nastaviti tako višino kot širino črt in lastnost podpira sintakso dveh vrednosti, ki nam omogoča točno to. In te velikosti lahko verižimo tako, da jih ločimo z vejicami na enak način, kot smo to storili background.
Začnimo preprosto tako, da najprej nastavimo širine. Uporaba sintakse z eno vrednostjo za background-size nastavi širino in privzeto višino auto. Tu uporabljam povsem poljubne vrednosti, zato nastavite vrednosti na tisto, kar najbolje ustreza vašemu dizajnu:
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%;
}Če uporabljate enake vrednosti kot jaz, boste dobili tole:
Ni ravno videti, kot da smo nastavili širino za vse črte, kajne? To je zaradi auto obnašanje višine sintakse z eno vrednostjo. Drugi trak je širši od ostalih pod njim in jih prekriva. Morali bi postaviti višine, da bomo lahko videli svoje delo. Vse bi morale biti enake višine in naše lahko dejansko ponovno uporabimo --n spremenljivka, spet, da bodo stvari preproste:
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, veliko bolje!
Dodajanje vrzeli med črtami
To je povsem neobvezen korak, če vaš dizajn ne zahteva vrzeli med črtami, moj pa jih je in ni pretirano zapleten. Vsakemu traku spreminjamo višino background-size rahlo, zmanjšajo vrednost, tako da ne zapolnijo celotnega navpičnega prostora.
Še naprej lahko uporabljamo naše --n spremenljivko, vendar odštejte majhno količino, recimo 5px, Uporaba calc() da dobimo kar želimo.
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);To je veliko ponavljanja, ki ga lahko odpravimo z drugo spremenljivko:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maskiranje in mešanje
Zdaj pa zamenjajmo palegreen barva ozadja, ki smo jo do te točke uporabljali za vizualne namene za belo.
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. */
}Črno-bel vzorec, kot je ta, je popoln za maskiranje in mešanje. Da bi to naredili, bomo najprej zavili naše
v nov nadrejeni vsebnik in uvedite drugega
pod njim:
Tukaj bomo malo spremenili faktorje CSS. Zdaj, ko imamo nov nadrejeni vsebnik, lahko posredujemo popravljeno width in height lastnosti, ki smo jih uporabljali na naših
tamle:
section {
width: 500px;
height: 500px;
} Za pozicioniranje obeh bom uporabil tudi CSS Grid
elementov enega na drugega. To je isti trik, ki ga Temani Afif uporablja za ustvarjanje svojega super kul galerije slik. Ideja je, da oba diva postavimo na polno posodo z uporabo grid-area lastnosti in vse poravnajte proti središču:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Poglejte tole. Razlog, da sem prej uporabil trdni preliv, ki prehaja iz črne v črno, je, da bi nas pripravil za maskiranje in mešanje obeh
plasti. To ni pravo maskiranje v smislu, kot ga imenujemo mask vendar kontrast med plastmi nadzira, katere barve so vidne. Območje, ki ga pokriva bela, bo ostalo belo, območje, ki ga pokriva črna, pa pušča skozi. Dokumentacija MDN o načinih mešanja ima lepo razlago, kako to deluje.
Da bo to delovalo, bom uporabil pravi gradient, ki ga želimo videti na prvem
medtem ko uporabljamo slogovna pravila iz našega začetka
na novem, z uporabo :nth-child() psevdo-izbirnik:
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);
}Če se ustavimo tukaj, pravzaprav ne bomo videli nobene vizualne razlike od tistega, kar smo imeli prej. To je zato, ker še nismo izvedli dejanskega mešanja. Torej, naredimo to zdaj z uporabo screen način mešanja:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}V predstavitvi, ki sem jo pokazal na začetku tega članka, sem uporabil bež barvo ozadja. Ta nekoliko temnejša umazano bela barva omogoča, da se malo barve preliva skozi ostalo ozadje:
Učinek lebdenja
Zadnji del te uganke je učinek lebdenja, ki razširi črte na polno širino. Najprej napišimo naš izbirnik zanj. Želimo, da se to zgodi, ko nadrejeni vsebnik (
v našem primeru) lebdi. Ko lebdimo, bomo spremenili velikost ozadja črt, ki jih vsebuje drugi
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Želeli bomo spremeniti background-size trakov na celotno širino posode ob ohranjanju enake višine:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}To "zaskoči" ozadje na polno širino. Če dodamo malo transition na to, potem vidimo, da se črte razširijo ob lebdenju:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Tukaj je še enkrat končni demo:
Dodal sem samo besedilo, da pokažem, kako bi lahko izgledalo, če bi to uporabili v drugačnem kontekstu. Če storite enako, se je vredno prepričati, da je med barvo besedila in barvami, uporabljenimi v prelivu, dovolj kontrasta, da bo skladen z Smernice WCAG. In ko se na kratko dotaknemo dostopnosti, je vredno upoštevanje uporabniških nastavitev za zmanjšano gibanje ko gre za učinek lebdenja.
To je zavitek!
Precej lepo, kajne? Vsekakor tako mislim. Pri tem mi je všeč tudi to, da je precej vzdržljiv in prilagodljiv. Na primer, lahko spremenimo višino, barve in smer črt tako, da spremenimo nekaj vrednosti. Morda celo spremenite nekaj več stvari tam notri - kot so barve in širine - da bo še bolj nastavljiv.
Res me zanima, če bi se tega lotili drugače. Če je tako, delite v komentarjih! Lepo bi bilo videti, koliko različic lahko zberemo.
