Milyen gyakran nyúljon a CSS-hez background-size ingatlan? Ha olyan vagy, mint én – és valószínűleg sok más front-end ember –, akkor általában az, amikor te background-size: cover egy kép, amely kitölti egy egész elem terét.
Nos, egy érdekes kihívás elé állítottak, amely fejlettebb háttérméretezést igényel: háttércsíkok, amelyek lebegtetés közben átváltoztak. Nézze meg ezt, és mutasson rá a kurzorral:
Sokkal több történik ott, mint a háttér mérete, de ez volt az a trükk, amire szükségem volt a csíkok átmenetéhez. Gondoltam, megmutatom, hogyan jutottam el idáig, nem csak azért, mert szerintem ez egy igazán szép vizuális effektus, hanem azért is, mert kreatívnak kellett lennem a színátmenetek és a keverési módok terén, amelyek szerintem tetszeni fognak.
Kezdjük egy nagyon alapvető beállítással, hogy a dolgok egyszerűek legyenek. Egy szingliről beszélek
a zöld négyzet stílusú HTML-ben:
div {
width: 500px;
height: 500px;
background: palegreen;
}A háttércsíkok beállítása
Ha az esze egyenesen a CSS lineáris gradiensre jutott, amikor meglátta ezeket a csíkokat, akkor már ugyanazon az oldalon vagyunk. Ebben az esetben nem tudunk pontosan ismétlődő színátmenetet készíteni, mivel azt szeretnénk, hogy a csíkok egyenetlen mennyiségű helyet foglaljanak el és áttegyék őket, de létrehozhatunk öt csíkot úgy, hogy öt hátteret láncolunk a meglévő háttérszínünk tetejére, és a tetejére helyezzük őket. - a konténer jobb oldalán:
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;
}Csináltam vízszintes csíkokat, de az itt bemutatott megközelítéssel függőlegesen is mehetnénk. És ezt egy kicsit leegyszerűsíthetjük egyéni tulajdonságokkal:
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;
}Tehát, a --gt érték a gradiens és --n egy állandó, amelyet a csíkok lefelé tolására használunk, így azok függőlegesen el vannak tolva. És talán észrevetted, hogy nem igazi színátmenetet állítottam be, hanem tömör fekete csíkokat linear-gradient() függvény – ez szándékos, és hamarosan rátérünk arra, hogy miért tettem ezt.
Még egy dolog, amit meg kell tennünk, mielőtt továbblépnénk, hogy megakadályozzuk a hátterünk ismétlődését; ellenkező esetben az egész teret becsempészik és kitöltik:
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;
}Beállíthattuk volna background-repeat a background gyorsírás, de úgy döntöttem, hogy itt töröm ki, hogy a dolgok könnyen olvashatóak legyenek.
A csíkok eltolása
Technikailag vannak csíkjaink, de elég nehéz megmondani, mert nincs közöttük távolság, és az egész tartályt lefedik. Inkább olyan, mintha egy tömör fekete négyzetünk lenne.
Itt tudjuk használni a background-size ingatlan. A csíkok magasságát és szélességét is be akarjuk állítani, és a tulajdonság egy kétértékű szintaxist támogat, amely pontosan ezt teszi lehetővé. És láncolhatjuk ezeket a méreteket úgy, hogy vesszővel választjuk el őket ugyanúgy, mint korábban background.
Kezdjük egyszerűen a szélességek beállításával. Az egyértékű szintaxis használata a számára background-size beállítja a szélességet és az alapértelmezett magasságot auto. Itt teljesen tetszőleges értékeket használok, ezért állítsa be azokat az értékeket, amelyek a legjobban megfelelnek az Ön tervének:
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%;
}Ha ugyanazokat az értékeket használja, mint én, a következőt kapja:
Nem úgy néz ki, mintha az összes csík szélességét beállítottuk volna, igaz? Ez azért van, mert auto az egyértékű szintaxis magassági viselkedése. A második csík szélesebb, mint a többi alatta, és ez fedi őket. Meg kell határoznunk a magasságokat, hogy láthassuk munkánkat. Mindegyiknek azonos magasságúnak kell lennie, és újra felhasználhatjuk --n változó, ismét az egyszerűség kedvéért:
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, sokkal jobb!
Hézagok hozzáadása a csíkok között
Ez egy teljesen opcionális lépés, ha az Ön tervezése nem igényel hézagot a csíkok között, de az enyém igen, és nem túl bonyolult. Minden csík magasságát változtatjuk background-size egy picit, csökkentve az értéket, így nem töltik be a teljes függőleges teret.
Továbbra is használhatjuk --n változó, de vonjunk le egy kis összeget mondjuk 5px, Felhasználva calc() hogy megkapjuk, amit akarunk.
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);Ez a sok ismétlés, amelyet egy másik változóval kiküszöbölhetünk:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}Maszkolás és keverés
Most pedig cseréljük fel palegreen háttérszínt, amit eddig vizuális célokra használtunk a fehérhez.
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. */
}Egy ilyen fekete-fehér minta tökéletes maszkoláshoz és keveréshez. Ehhez először becsomagoljuk
egy új szülőtárolóban, és vezessen be egy másodikat
alatta:
Itt egy kis CSS-refaktorálást végzünk. Most, hogy van egy új szülőtárolónk, átadhatjuk a javítottat width és a height tulajdonságainkat használtuk
ott:
section {
width: 500px;
height: 500px;
} A kettő elhelyezéséhez a CSS Grid-et is fogom használni
elemek egymásra. Ez ugyanaz a trükk, amit Temani Afif használ a saját létrehozásához szuper jó képgalériák. Az ötlet az, hogy mindkét div-t a teljes tárolóra helyezzük a grid-area ingatlant, és igazítson mindent a központ felé:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}Most nézd meg ezt. Az ok, amiért korábban szilárd színátmenetet használtam, amely feketéről feketére megy át, az az, hogy beállítsam a kettő elfedésére és keverésére.
rétegek. Ez nem igazi maszkolás abban az értelemben, ahogyan mi a mask tulajdonság, de a rétegek közötti kontraszt szabályozza, hogy milyen színek jelenjenek meg. A fehérrel fedett terület fehér marad, a feketével fedett terület pedig átszivárog. Az MDN dokumentációja a keverési módokról van egy szép magyarázata ennek működésére.
Ahhoz, hogy ez működjön, alkalmazom a valódi színátmenetet, amelyet először látni szeretnénk
miközben alkalmazzuk a kezdőbetűnk stílusszabályait
az újon, a :nth-child() pszeudo-választó:
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);
}Ha itt megállunk, valójában semmiféle vizuális különbséget nem fogunk látni a korábbiaktól. Ez azért van, mert még nem végeztük el a tényleges keverést. Tehát tegyük ezt most a screen keverési mód:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}A cikk elején bemutatott bemutatóban bézs háttérszínt használtam. Ez a kissé sötétebb fajta törtfehér színezés lehetővé teszi, hogy egy kis szín átszivárogjon a háttér többi részén:
A lebegő effektus
A kirakós játék utolsó darabja a hover effektus, amely teljes szélességre szélesíti a csíkokat. Először is írjuk ki a hozzá tartozó válogatónkat. Azt akarjuk, hogy ez akkor történjen meg, amikor a szülőtároló (
esetünkben) lebeg. Ha lebeg, megváltoztatjuk a másodikban lévő csíkok háttérméretét
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
} Szeretnénk változtatni a background-size a csíkokat a tartály teljes szélességéig, miközben megtartja ugyanazt a magasságot:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}Ez a hátteret teljes szélességre „pattintja”. Ha egy kicsit hozzátesszük transition erre, akkor azt látjuk, hogy a csíkok kitágulnak a lebegtetéskor:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}Íme még egyszer az utolsó demó:
Csak szöveget adtam oda, hogy megmutassam, hogyan nézhet ki, ha ezt más kontextusban használjuk. Ha ugyanezt teszi, akkor érdemes megbizonyosodni arról, hogy a szöveg színe és a színátmenetben használt színek között elegendő kontraszt van-e, hogy megfeleljen WCAG irányelvek. És bár röviden érintjük a kisegítő lehetőségeket, megéri figyelembe véve a csökkentett mozgásra vonatkozó felhasználói preferenciákat ha a lebegő effektusról van szó.
Ez egy pakolás!
Elég ügyes, igaz? Biztosan így gondolom. Ebben az is tetszik, hogy elég karbantartható és testreszabható. Például néhány érték megváltoztatásával módosíthatjuk a csíkok magasságát, színét és irányát. Még néhány dolgot is módosíthat benne – például a színeket és a szélességet –, hogy még jobban konfigurálható legyen.
Nagyon érdekelne, ha másképp közelítette volna meg a dolgot. Ha igen, kérlek oszd meg kommentben! Jó lenne látni, hány variációt tudunk összegyűjteni.
