Generator pozadine CSS uzorka

Većina alata za "generiranje uzoraka" tiho ponovno koristi istu formulu ponavljajućeg linearnog gradijenta za svaku opciju i samo mijenja brojeve. Ovaj ne: svaki od šest tipova uzoraka ovdje izgrađen je od specifične CSS tehnike koja zapravo proizvodi taj oblik. Pruge koriste jedan ponavljajući linearni gradijent s dvije trake boja. Točke koriste jedan radijalni gradijent popločan isključivo kroz veličinu pozadine — klasični trik s CSS točkama — umjesto ponavljajućeg radijalnog gradijenta, koji ne može čisto popločati kružnu točku na pravokutnoj rešetki. Šahovnica koristi formulu pravog konusnog gradijenta s četiri kvadranta: konusni gradijent sa središtem u kvadratnoj pločici prirodno se dijeli na četiri kvadrata kvadranta na granicama od 90 stupnjeva i izmjenjujući dvije boje preko tih pločica kvadranta u pravu šahovnicu, a ne aproksimaciju.

Rešetka i dijagonalna šrafura slojevit će dva ponavljajuća linearna gradijenta kao zasebne unose pozadinske slike umjesto lažiranja drugog smjera trikovima s rubovima. Mreža kombinira ponavljajući gradijent "udesno" i "prema dnu" za oštre vodoravne i okomite linije. Poprečna šrafura postavlja slojeve od +45 stupnjeva i -45 stupnjeva koji se ponavljaju za dijagonalno tkanje u stilu pletenja košara — o čemu vrijedi biti precizan: ovo je poštena poprečna šrafura, a ne prava geometrija riblje kosti, i alat to tako označava, a ne pretjerano. Trokuti ponovno koriste tehniku ​​konusnog gradijenta s četiri klina šahovnice, ali započinju gradijent zakrenutim za 45 stupnjeva, što pomiče granice klinova sa središnjih točaka rubova pločice u njezine kutove i pretvara ista četiri klina u četiri trokuta od kuta do kuta umjesto četiri kvadrata kvadranta.

Svaka vrsta uzorka izlaže samo one kontrole koje se na nju zapravo odnose — klizač kuta prikazuje se za pruge, radijus i razmak točkica prikazuju se za točke, debljina linije prikazuje se za rešetku i šrafuru — a veliki popločani okvir za pregled ponovno se boji pri svakoj promjeni tako da možete vidjeti nekoliko punih ponavljanja prije nego što se posvetite vrijednosti. Prebacite izlazni način na SVG i isti uzorak se ponovno pojavljuje kao <pattern> element izgrađen od običnih primitiva pravokutnika, kruga, putanje ili poligona, spreman za lijepljenje unutar <defs> bilo kojeg SVG dokumenta, s preuzimanjem jednim klikom za samostalnu .svg datoteku.

Sve radi lokalno u vašem pregledniku: nema učitavanja slika, nema vraćanja poslužitelja, nema računa. Za pune ili gradijentne ispune bez ponavljanja, CSS gradijent generator na ovoj stranici pravi je alat umjesto toga; ovaj je posebno za geometrijske pozadine koje se mogu popločati i izgrađene od nulte slike.