CSS-mustri taustageneraator

Enamik "mustrite generaatori" tööriistu kasutab vaikselt iga valiku jaoks sama korduva lineaarse gradiendi valemit ja lihtsalt muudab numbreid. See mitte: kõik kuuest mustritüübist on üles ehitatud konkreetsest CSS-tehnikast, mis tegelikult selle kujundi toodab. Triibud kasutavad ühte korduvat lineaarset gradienti kahe värviribaga. Punktid kasutavad pigem ühte radiaalset gradienti, mis on plaaditud puhtalt tausta suuruse järgi – klassikaline CSS-punktide nipp –, mitte korduvat radiaalset gradienti, mis ei saa ristkülikukujulisel ruudustikul ringikujulist punkti puhtalt plaadistada. Kabe kasutab tõelist neljakvadrandilise koonusegradiendi valemit: ruudukujulisel paanil tsentreeritud kooniline gradient jaguneb loomulikult neljaks kvadrandi ruuduks 90-kraadise piiriga ja kahe värvi vaheldumine nende kvadrantide vahel ehtsaks kabelauaks, mitte ligikaudseks.

Ruudustik ja diagonaalne ristviirutus kihistavad mõlemad korduvat lineaarset gradienti eraldi taustapildi kirjetena, selle asemel, et võltsida teist suunda ääriste trikkidega. Grid ühendab korduva gradiendi "paremale" ja "alla" teravate horisontaalsete ja vertikaalsete reeglijoonte jaoks. Ristviirutus loob +45-kraadise ja -45-kraadise korduva gradiendi korvpunutis-stiilis diagonaalkudumiseks – tasub olla täpne: see on aus ristviirutus, mitte tõeline kalasaba-geomeetria ja tööriist märgistab selle pigem nii, mitte ei esita liiga palju. Kolmnurgad taaskasutavad malelaua nelja kiiluga koonusegradiendi tehnikat, kuid alustavad gradienti pööratuna 45 kraadi võrra, mis nihutab kiilu piire plaadi servade keskpunktidest selle nurkadesse ja muudab samad neli kiilu nelja kvadrandi ruudu asemel neljaks nurgast nurgani kolmnurgaks.

Iga mustritüüp paljastab ainult need juhtnupud, mis sellele tegelikult kehtivad – triipude jaoks kuvatakse nurga liugur, punktide jaoks kuvatakse punkti raadius ja vahe, ruudustiku ja ristviirutuse korral kuvatakse joone paksus – ning suur paanitud eelvaatekast värvitakse iga muudatuse korral uuesti, et saaksite enne väärtusele pühendumist näha mitut täielikku kordust. Pöörake väljundrežiim SVG-le ja sama muster ilmub uuesti elemendina <muster>, mis on koostatud lihtsatest rect-, ringi-, tee- või hulknurksetest primitiividest, mis on valmis kleepimiseks mis tahes SVG-dokumendi kausta <defs>, eraldiseisva svg-faili jaoks ühe klõpsuga allalaadimisega.

Kõik töötab teie brauseris lokaalselt: pilte ei laadita üles, edasi-tagasi serverisse ega kontot pole. Korduseta tahkete või gradientide täitmiseks on selle saidi CSS-i gradiendi generaator õige tööriist. see on spetsiaalselt plaaditavate geomeetriliste taustade jaoks, mis on ehitatud nullist pildivarast.