Generator CSS pozadinskih uzoraka

Većina alata za generiranje uzoraka tiho ponovno koristi istu repeating-linear-gradient formulu za svaku opciju i samo mijenja brojeve. Ovaj to ne radi: svaka od šest vrsta uzoraka ovdje izgrađena je specifičnom CSS tehnikom koja zapravo stvara taj oblik. Pruge koriste jedan repeating-linear-gradient s dvije trake boje. Točkice koriste jedan radial-gradient popločan isključivo putem background-size – klasični CSS trik s točkicama – umjesto repeating-radial-gradienta, koji ne može čisto popločiti kružnu točkicu na pravokutnoj mreži. Šahovnica koristi pravu četverokvadrantnu conic-gradient formulu: konični gradijent centriran u kvadratnoj pločici prirodno se dijeli na četiri kvadrantna kvadrata na granicama od 90 stupnjeva, a izmjenjivanje dviju boja preko tih kvadranata popločava se u pravu šahovnicu, a ne aproksimaciju.

Mreža i dijagonalna križna šara obje slažu dva repeating-linear-gradienta kao zasebne stavke background-image umjesto da lažiraju drugi smjer trikovima s rubovima. Mreža kombinira „udesno” i „prema dolje” ponavljajući gradijent za oštre vodoravne i okomite linije rešetke. Križna šara slaže ponavljajući gradijent pod +45° i -45° za dijagonalno tkanje u stilu košarice – vrijedi biti precizan: ovo je iskrena križna šara, a ne prava geometrija riblje kosti, i alat je tako označava umjesto da pretjerano tvrdi. Trokuti ponovno koriste tehniku četveroklinog conic-gradienta šahovnice, ali započinju gradijent zakrenut za 45 stupnjeva, što pomiče granice klinova sa središnjih točaka rubova pločice na njezine kutove i pretvara ista četiri klina u četiri trokuta od kuta do kuta umjesto u četiri kvadrantna kvadrata.

Svaka vrsta uzorka prikazuje samo kontrole koje se na nju stvarno odnose – klizač kuta pojavljuje se za pruge, polumjer i razmak točkica pojavljuju se za točkice, debljina linija pojavljuje se za mrežu i križnu šaru – a veliki popločani okvir za pretpregled ponovno se iscrtava pri svakoj promjeni tako da možete vidjeti nekoliko punih ponavljanja prije nego što se odlučite za vrijednost. Prebacite način ispisa na SVG i isti uzorak ponovno se pojavljuje kao <pattern> element izgrađen od jednostavnih primitiva rect, circle, path ili polygon, spreman za lijepljenje unutar <defs> bilo kojeg SVG dokumenta, s preuzimanjem samostalne .svg datoteke jednim klikom.

Sve se izvodi lokalno u vašem pregledniku: nema prijenosa slika, nema povratnog puta na poslužitelj, nema računa. Za jednobojne ili gradijentne ispune bez ponavljanja, generator CSS gradijenata na ovoj stranici je pravi alat; ovaj je posebno za popločive geometrijske pozadine izgrađene od nula slikovnih resursa.