Generator CSS vzorcev ozadja

To orodje ustvari ponavljajoče se vzorce ozadja z uporabo samo CSS gradientov — brez slikovnih datotek. Izberi pike, diagonalne črte, šahovnico ali mrežne črte, prilagodi barve in razmik, nato pa kopiraj CSS za background-image neposredno v svojo slogovno predlogo.

Kaj je to orodje?

CSS lahko riše ponavljajoče se vzorce brez slikovnih datotek z uporabo gradientov — radial-gradient() in linear-gradient() — kot background-image, v kombinaciji z background-size, ki je manjši od elementa, tako da se gradient ploščiči in ponavlja. Pike uporabljajo ponavljajoč radial-gradient, črte in šahovnica uporabljajo ponavljajoč ali sloji linear-gradient(), mrežne črte pa dve prekrivajoči se liniji linear-gradient().

To orodje zate zgradi te deklaracije gradientov. Izberi vrsto vzorca, prilagodi barvo vzorca, barvo ozadja in razmik, ter opazuj, kako se živ predogled posodablja — nato kopiraj natančen CSS za background-image in background-size.

Vir: CSS Images Module Level 3, W3C — definira repeating-linear-gradient() in repeating-radial-gradient(), funkcije, iz katerih so ti vzorci zgrajeni.

Zakaj ga uporabiti?

Brez slikovnih datotek, brez zahtev HTTP — vzorec je čist CSS in se izriše takoj pri kateri koli ločljivosti, vključno z zasloni retina/visoke gostote.
Popolnoma prilagodljiva barva in razmik, brez ročnega pisanja sintakse gradientov ali izračunavanja matematike ploščičenja.
Živ predogled prikaže natančen ponavljajoč se vzorec, preden kopiraš karkoli.
Čisto se prilagaja velikosti, ker gre za vektorsko matematiko, ne rastrsko sliko — brez zamegljenosti pri spreminjanju velikosti elementa.
Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se nikamor ne naloži.
Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

Izberi vrsto vzorca: pike, diagonalne črte, šahovnica ali mrežne črte.
Izberi barvo vzorca in barvo ozadja, ki se prikaže med/za oblikami vzorca.
Prilagodi drsnik velikosti, da povečaš ali zmanjšaš pike, črte ali mrežne celice — to nadzoruje tudi, kako gosto se vzorec ponavlja.
Kopiraj ustvarjen CSS in ga prilepi kot background-image (ter background-size/background-position, kjer je prikazano) katerega koli elementa.

Primer

Vnos

Vzorec: pike · Barva: modra · Ozadje: bela · Velikost: 24px

Rezultat

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Klasičen svetel vzorec pik, pogosto uporabljen kot subtilno ozadje razdelka ali tekstura kartice.

Kako je zgrajen vsak vzorec

Pike: radial-gradient() nariše en majhen zapolnjen krog, nato pa background-size poskrbi, da se ta ponavlja kot ploščičena mreža pik.
Diagonalne črte: repeating-linear-gradient() pri kotu 45 stopinj izmenično prikazuje barvo vzorca in barvo ozadja pri fiksnem intervalu.
Šahovnica: dva prekrivajoča se 45-stopinjska sloja linear-gradient(), zamaknjena drug od drugega za pol ploščice, ustvarita izmenična svetla/temna polja.
Mrežne črte: dve tanki liniji linear-gradient() — vodoravna in navpična — ponavljajoči se pri izbranem razmiku tvorita mrežo, podobno milimetrskemu papirju.

Kdaj uporabiti CSS vzorce namesto slikovnih datotek

Vzorec s CSS gradientom nima velikosti datoteke in zahteve HTTP, zato se naloži takoj in nikoli ne izgleda zamegljen na zaslonih z visoko gostoto slikovnih pik, za razliko od rastrskega PNG ploščičastega ozadja. Idealen je za subtilne teksture za besedilom, delilnike razdelkov, ilustracije praznih stanj ali nadomestne kartice. Za kompleksne ilustrirane ali fotografske vzorce je prava izbira še vedno prava slika — CSS gradienti so najbolj primerni za preproste, geometrijske, ponavljajoče se oblike, kakršne so tukaj.

Kombiniranje z drugimi CSS učinki

Vzorci dobro delujejo kot podlaga za kartice v slogu steklenega motiva (glassmorphism), saj zabrisanje potrebuje nekaj vizualno teksturiranega za seboj, da je sploh vidno. Prav tako se naravno kombinirajo z zaobljenimi robovi na vsebniku.

→ Generator CSS Glassmorphism · Generator border-radius

Pogosta vprašanja

Ali ti vzorci zahtevajo slikovne datoteke?

Ne. Vsak vzorec tukaj je ustvarjen izključno s CSS gradienti kot background-image — ni vključena nobena datoteka PNG, SVG ali druga, zato ni dodatne zahteve HTTP in ni tveganja zamegljenosti na visokoločljivostnih zaslonih.

Ali lahko spremenim, kako velik je vzorec?

Da — drsnik velikosti nadzoruje background-size, ki določa, kako velika je ena ponavljajoča se ploščica vzorca. Manjša velikost stisne pike, črte ali mrežne celice bližje skupaj; večja velikost jih razširi.

Zakaj vzorec šahovnice uporablja dva gradienta?

En sam linear-gradient() lahko izmenjuje barve le v eni smeri. Postavitev dveh 45-stopinjskih gradientov drug na drugega, zamaknjenih za pol ploščice, ustvari izmenična svetla/temna polja šahovnice — to je standardna tehnika za CSS-only šahovnice.

Ali bo ta vzorec izgledal oster na retina/visokoločljivostnih zaslonih?

Da. Ker je vzorec matematični gradient in ne bitna slika, se izriše pri kateri koli ločljivosti, ki jo zaslon potrebuje, brez povečave ali zamegljenosti — za razliko od majhne rastrske slikovne ploščice, raztegnjene ali ponovljene pri visoki gostoti slikovnih pik.

Ali lahko te vzorce uporabim kot ozadje cele strani?

Da — uporabi ustvarjen background-image, background-size in background-position (kjer je prisoten) na body ali kateri koli celozaslonski vsebniški element. Pazi na kontrast: pretiran, kontrasten vzorec za telesnim besedilom lahko poslabša berljivost, zato pri velikih ozadjih ponavadi bolje delujejo svetlejše/subtilnejše nastavitve.