CSS-mustritausta generaator
Looge kihilistest CSS-gradientidest plaaditavaid triipe, punkte, malelauda, võrku, diagonaalset ristviirutust ja kolmnurkseid taustu — null pilti — või eksportige sama muster SVG <pattern>-ina kasutamiseks SVG-dokumentides.
🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.
Tulemus
Enamik "mustrigeneraatori" tööriistu taaskasutab vaikselt sama korduva lineaar-gradiendi valemit iga valiku jaoks ja lihtsalt muudab numbreid. See siin seda ei tee: iga kuuest mustritüübist on siin loodud konkreetse CSS-tehnikaga, mis tegelikult selle kuju toodab. Triibud kasutavad ühte korduvat lineaar-gradienti kahe värviribaga. Punktid kasutavad ühte radiaalgradienti, mis on plaaditud puhtalt background-size'i kaudu — klassikaline CSS-punktide trikk — mitte korduvat radiaalgradienti, mis ei saa ümmargust punkti puhtalt ristkülikukujulisele võrgule plaatida. Malelaud kasutab ehtsat nelja kvadrandi koonusgradiendi valemit: ruudukujulisel plaadil tsentreeritud koonusgradient jaguneb loomulikult 90-kraadiste piiridega neljaks kvadrandiks ja nende kvadrantide vahel kahe värvi vaheldumine plaadib tõeliseks malelauaks, mitte ligikaudseks.
Võrk ja diagonaalne ristviirutus mõlemad kihistavad kahte korduvat lineaar-gradienti eraldi background-image kirjetena, mitte ei võltsi teist suunda ääriste trikkidega. Võrk kombineerib "paremale" ja "alla" suunduvat korduvat gradienti teravate horisontaalsete ja vertikaalsete joonte jaoks. Ristviirutus kihistab +45-kraadise ja -45-kraadise korduva gradienti korvipunnalaadse diagonaalse põimiku jaoks — olgu see siis täpne: see on aus ristviirutus, mitte tõeline kalasabageomeetria, ja tööriist märgistab seda nii, selle asemel et liialdada. Kolmnurgad taaskasutavad malelaua nelja kiilu koonusgradiendi tehnikat, kuid alustavad gradienti 45 kraadi pööratult, mis nihutab kiilude piirid plaadi servade keskpunktidest nurkadesse ja muudab samad neli kiilu neljaks nurk-nurka kolmnurgaks, mitte neljaks kvadrandiruuduks.
Iga mustritüüp paljastab ainult need juhtnupud, mis sellele tegelikult kehtivad — triipude puhul ilmub nurga liugur, punktide puhul punkti raadius ja vahe, võrgu ja ristviirutuse puhul joone paksus — ja suur plaaditud eelvaatekast värvitakse iga muudatuse peale uuesti, nii et näete mitut täiskordust enne väärtuse kinnitamist. Lülitage väljundrežiim SVG-le ja sama muster ilmub uuesti <pattern>-elemendina, mis on loodud lihtsatest rect-, circle-, path- või polygon-primitiividest, valmis kleepimiseks mis tahes SVG-dokumendi <defs>-i, koos ühe klõpsuga allalaadimisega eraldiseisva .svg-faili jaoks.
Kõik töötab lokaalselt teie brauseris: pole piltide üleslaadimist, pole serveripöördust, pole kontot. Tahkete või gradienttäidete jaoks ilma korduseta on õige tööriist selle saidi CSS-gradigeneraator; see siin on spetsiaalselt mõeldud plaatitavate geomeetriliste taustade jaoks, mis on loodud nullist pildivaradest.