CSS tausta mustri generaator

Mis see tööriist on?

CSS suudab joonistada korduvaid mustreid ilma pildifailideta, kasutades gradiente — radial-gradient() ja linear-gradient() — background-image'ina, koos elemendist väiksema background-size'iga, nii et gradient kordub ja mosaiseerub. Täpid kasutavad korduvat radial-gradient'i, triibud ja malelaud kasutavad korduvat või kihilist linear-gradient()-i, ning ruudustikujooned kasutavad kahte üksteise peale asetatud linear-gradient() joont.

See tööriist ehitab need gradient-määratlused sinu eest. Vali mustri tüüp, kohanda mustri värvi, tausta värvi ja vahesid, ning jälgi elavat eelvaadet — seejärel kopeeri täpne background-image ja background-size CSS.

Allikas: CSS Images Module Level 3, W3C — määratleb repeating-linear-gradient() ja repeating-radial-gradient() funktsioonid, millest need mustrid ehitatud on.

Miks seda kasutada?

• Pildifaile ega HTTP-päringuid pole — muster on puhas CSS ja renderdub koheselt igas resolutsioonis, sealhulgas retina/kõrge tihedusega ekraanidel.
• Täielikult kohandatav värv ja vahe, ilma gradient-süntaksit käsitsi kirjutamata või mosaiseerimise matemaatikat arvutamata.
• Elav eelvaade näitab täpset korduvat mustrit enne kopeerimist.
• Skaleerub puhtalt, sest tegemist on vektormatemaatikaga, mitte rasterpildiga — elemendi suuruse muutumisel udusust ei teki.
• Töötab täielikult sinu brauseris — miski, mida seadistad, ei laadita kuhugi üles.
• Tasuta, registreerimist pole vaja, töötab mobiilis.

Kuidas kasutada

1. Vali mustri tüüp: täpid, diagonaaltriibud, malelaud või ruudustikujooned.
2. Vali mustri värv ja tausta värv, mis paistab mustrikujundite vahel/taga.
3. Kohanda suuruse liugurit, et muuta täppe, triipe või ruudustiku ruute suuremaks või väiksemaks — see mõjutab ka mustri kordumise tihedust.
4. Kopeeri genereeritud CSS ja kleebi see mis tahes elemendi background-image'iks (ning background-size/background-position'iks, kus näidatud).

Näide

Sisend

Muster: täpid · Värv: sinine · Taust: valge · Suurus: 24px

Tulemus

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

Klassikaline hele täpimuster, mida sageli kasutatakse sektsiooni õrna tausta või kaardi tekstuurina.

Kuidas iga muster ehitatud on

• Täpid: radial-gradient() joonistab ühe väikese täidetud ringi, seejärel teeb background-size sellest korduva ruudustiku täppidest.
• Diagonaaltriibud: repeating-linear-gradient() 45-kraadise nurga all vaheldub mustri värvi ja tausta värvi vahel fikseeritud vahemaa tagant.
• Malelaud: kaks üksteise peale asetatud 45-kraadist linear-gradient() kihti, nihutatud üksteisest poole ruudu võrra, tekitavad vahelduvaid heledaid/tumedaid ruute.
• Ruudustikujooned: kaks õhukest linear-gradient() joont — üks horisontaalne, üks vertikaalne — korratuna valitud vahega ruudustiku moodustamiseks, sarnaselt graafikupaberile.

Millal kasutada CSS-mustreid pildifailide asemel

CSS-gradient mustril puudub failisuurus ja HTTP-päring, seega laadib see koheselt ega mõju kunagi hägusena kõrge tihedusega ekraanidel, erinevalt rasterpõhisest PNG taustaplaadist. See sobib ideaalselt õrnale tekstuurile teksti taga, sektsioonide eraldajatele, tühja oleku illustratsioonidele või kohahoidjatele. Keeruliste illustreeritud või fotograafiliste mustrite jaoks on tõeline pilt endiselt õige valik — CSS-gradiendid sobivad kõige paremini lihtsatele, geomeetrilistele, korduvatele kujunditele nagu need siin.

Kombineerimine teiste CSS-efektidega

Mustrid toimivad hästi taustana klaasmorfismi kaartide taga, kuna hägustus vajab nähtavaks olemiseks midagi visuaalselt tekstureeritut taustaks. Need sobivad hästi kokku ka ümarate nurkadega konteinerelemendil.

→ CSS Glassmorphism Generaator · Border Radius Generaator

Korduma kippuvad küsimused