CSS-kuvioiden taustageneraattori

Useimmat "malligeneraattorin" työkalut käyttävät hiljaa uudelleen samaa toistuvan lineaarisen gradientin kaavaa jokaiselle vaihtoehdolle ja vaihtavat vain numeroita. Tämä ei ole: jokainen kuudesta kuviotyypistä on rakennettu tietystä CSS-tekniikasta, joka todella tuottaa kyseisen muodon. Raidat käyttävät yhtä toistuvaa lineaarista gradienttia kahdella värinauhalla. Pisteet käyttävät yhtä säteittäistä gradienttia, joka on laatoitettu puhtaasti taustakoon mukaan – klassinen CSS-pistetemppu – toistuvan säteittäisen gradientin sijaan, joka ei voi laatoittaa pyöreää pistettä puhtaasti suorakaiteen muotoiseen ruudukkoon. Shakkilaudassa käytetään todellista neljän neljänneksen kartiogradienttikaavaa: neliönmuotoiseen ruutuun keskitetty kartiogradientti jakaantuu luonnollisesti neljään kvadranttiruutuun 90 asteen rajoissa ja vuorottelee kahta väriä näiden kvadranttien välillä aidoksi shakkilaudaksi, ei likimääräiseksi.

Ristikko ja diagonaalinen ristikkäisviivaus molemmat kerrostavat kaksi toistuvaa lineaarista gradienttia erillisinä taustakuvamerkintöinä sen sijaan, että väärentäisivät toista suuntaa reunatemppuilla. Ruudukko yhdistää "oikealle" ja "alalle" toistuvan kaltevuuden teräville vaaka- ja pystysuoralle viivaviivalle. Crosshatch tasoittaa +45 asteen ja -45 asteen toistuvan gradientin korikudoksen tyyliin diagonaalista kudosta varten – kannattaa olla tarkka: tämä on rehellinen ristikko, ei todellinen kalanruotogeometria, ja työkalu merkitsee sen sellaiseksi, ei yliväittämistä. Kolmiot käyttävät uudelleen shakkilaudan nelikiilakartiogradienttitekniikkaa, mutta aloittavat gradientin 45 astetta kierrettynä, mikä siirtää kiilarajan laatan reunan keskipisteistä sen kulmiin ja muuttaa samat neljä kiilaa neljäksi kulmasta kulmaan -kolmioksi neljän kvadrantin neliön sijaan.

Jokainen kuviotyyppi paljastaa vain ne säätimet, jotka todellisuudessa koskevat sitä – kulman liukusäädin näkyy raidoille, pisteen säde ja välit näkyvät pisteille, viivan paksuus näkyy ruudukossa ja ristikkoviivassa – ja suuri laatoitettu esikatseluruutu maalataan uudelleen jokaisen muutoksen yhteydessä, jotta näet useita täydellisiä toistoja ennen arvoon sitoutumista. Käännä tulostustila SVG-muotoon ja sama kuvio tulee uudelleen näkyviin <pattern>-elementtinä, joka on rakennettu tavallisista rect-, ympyrä-, polku- tai monikulmioprimitiivistä ja joka on valmis liitettäväksi minkä tahansa SVG-dokumentin <defs>-tiedostoon, jolloin erillinen .svg-tiedosto ladataan yhdellä napsautuksella.

Kaikki toimii paikallisesti selaimessasi: ei kuvien latausta, ei edestakaista palvelinta, ei tiliä. Tämän sivuston CSS-gradienttigeneraattori on oikea työkalu kiinteisiin tai gradienttitäytöihin ilman toistoa. tämä on erityisesti laatoitaville geometrisille taustoille, jotka on rakennettu nollasta kuvasisällöstä.