Egyrészt egyszerű, kockás háttereket készíteni CSS-sel. Másrészt azonban, hacsak nem a CSS-gradiens-nindzsák közé tartozunk, valahogy leragadunk az alapvető mintáknál.
Legalábbis erre gondoltam, miközben a képernyőm kockás hátterét bámultam, és próbáltam egy kicsit lekerekíteni a négyzetek sarkait… amíg eszembe nem jutott a kedvenc golyópontos jelképem – ✦ – és arra jutottam, hogy ha csak a minta minden kereszteződése fölé tudnám helyezni, akkor biztosan megkapom a kívánt tervet.
Kiderül, hogy lehetséges! Itt a bizonyíték.
Kezdjük az alapmintával:
<div></div>div {
background:
repeating-linear-gradient(
to right, transparent,
transparent 50px,
white 50px,
white 55px
),
repeating-linear-gradient(
to bottom, transparent,
transparent 50px,
white 50px,
white 55px
),
linear-gradient(45deg, pink, skyblue);
/* more styles */
}Ez a négyzetek ismétlődő hátterét ad, amelyek rózsaszíntől kékig változnak 5px fehér rések közöttük. Minden négyzet ötven pixel széles és átlátszó. Ez a segítségével jön létre repeating-linear-gradient, amely egy lineáris gradiens képet hoz létre, ahol a színátmenet ismétlődik az egész tartalmazó területen.
Más szavakkal, a sorozat első színátmenete fehér vízszintes csíkokat, a második színátmenet pedig fehér függőleges csíkokat hoz létre. Rétegezve alkotják a kockás mintát, és a harmadik színátmenet kitölti a tér többi részét.
Most hozzáadjuk a korábban említett csillagjegyet a háttérmintázat tetejére. Ezt úgy tehetjük meg, ha ugyanarra adjuk background tulajdonságot színátmenetként, miközben kódolt SVG-t használ az alakzathoz:
div {
background:
repeat left -17px top -22px/55px 55px
url("data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
<foreignObject width='35px' height='35px'>
<div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
</foreignObject>
</svg>"
),
repeating-linear-gradient(
to right, transparent,
transparent 50px,
white 50px,
white 55px
),
repeating-linear-gradient(
to bottom, transparent,
transparent 50px,
white 50px,
white 55px
),
linear-gradient(45deg, pink, skyblue);
/* more style */
}Bontsuk szét. Az első kulcsszó, repeat, azt jelzi, hogy ez egy ismétlődő háttérkép. Ezt követi az egyes ismétlődő egységek helyzete és mérete, ill.left -17px top -22px/55px 55px). Ez az eltolási pozíció a karakterjel és a minta méretén alapul. Az alábbiakban láthatja, hogyan van megadva a karakterjel mérete. Az eltolás hozzáadódik ahhoz, hogy az ismétlődő karakterjel pontosan a kockás minta minden metszéspontja fölé kerüljön.
Az SVG-nek van HTML-je <div> hordozza a jelet. Figyeljük meg, hogy kijelentettem a font-size Rajta. Ez végső soron meghatározza a sakktábla-mintában a négyzetek határ sugarát – minél nagyobb a karakterjel, annál lekerekítettebbek a négyzetek. Az adat URL-ből kigöngyölt SVG így néz ki:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
<foreignObject width='35px' height='35px'>
<div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
</foreignObject>
</svg>Most, hogy létrejött a CSS-minta, adjunk hozzá a :hover effektus, ahol a karakterjelet eltávolítják, és a fehér vonalakat enyhén áttetszővé teszik a használatával rgb() színértékek alfa átlátszósággal.
div:hover {
background:
repeating-linear-gradient(
to right, transparent,
transparent 50px,
rgb(255 255 255 / 0.5) 50px,
rgb(255 255 255 / 0.5) 55px
),
repeating-linear-gradient(
to bottom, transparent,
transparent 50px,
rgb(255 255 255 / 0.5) 50px,
rgb(255 255 255 / 0.5) 55px
),
linear-gradient(45deg, pink, skyblue);
box-shadow: 10px 10px 20px pink;
}tessék! Mostantól nemcsak lekerekített sarkaink vannak, hanem jobban szabályozhatjuk az ehhez hasonló effektusok mintáját is:
Ez az egész gyakorlat ismét egy kísérlet volt egy négyzetrács létrehozására egy sakktábla-mintázatban, amely támogatja a lekerekített sarkokat, egy háttérszínátmenetet, amely átfedésként szolgál a mintán, és interaktív stílusokat. Szerintem ez elég jól megoldja a feladatot, de az is érdekel, hogyan közelítetted meg. Mondd el kommentben!
