CSS šablono fono generatorius

Dauguma „schemų generatoriaus“ įrankių tyliai iš naujo naudoja tą pačią pasikartojančio linijinio gradiento formulę kiekvienai parinkčiai ir tiesiog pakeičia skaičius. Tai ne: kiekvienas iš šešių modelių tipų yra sukurtas naudojant specifinę CSS techniką, kuri iš tikrųjų sukuria tą formą. Juostelės naudoja vieną pasikartojantį linijinį gradientą su dviem spalvų juostomis. Taškuose naudojamas vienas radialinis gradientas, išklotas tik fono dydžiu (klasikinis CSS taškų triukas), o ne pasikartojantis radialinis gradientas, kuris negali tvarkingai iškloti apskrito taško ant stačiakampio tinklelio. Šachmatų lentoje naudojama tikroji keturių kvadrantų kūgio gradiento formulė: kvadratinės plytelės centre esantis kūginis gradientas natūraliai suskaidomas į keturis kvadratinius kvadratus ties 90 laipsnių ribomis, o šiose kvadrantų plytelėse pakeičiamos dvi spalvos į tikrą šaškių lentą, o ne apytikslis.

Tinklelis ir įstrižainė kryžminami du pasikartojantys linijiniai gradientai kaip atskiri fono vaizdo įrašai, o ne suklastoti antrąją kryptį kraštinių gudrybėmis. Tinklelis sujungia pasikartojantį gradientą „į dešinę“ ir „į apačią“, kad būtų aiškios horizontalios ir vertikalios taisyklių linijos. „Crosshatch“ sluoksniuoja +45 laipsnių ir –45 laipsnių pasikartojantį gradientą krepšinio stiliaus įstrižai pynimui. Verta būti tikslūs: tai sąžiningas kryžminis, o ne tikroji silkės geometrija. Trikampiai pakartotinai naudoja šaškių lentos keturių pleištų kūgio gradiento techniką, tačiau gradientas pradedamas pasuktas 45 laipsniais, o tai perkelia pleišto ribas nuo plytelės krašto vidurio taškų į jos kampus ir tuos pačius keturis pleištus paverčia keturiais trikampiais nuo kampo iki kampo vietoj keturių kvadratų.

Kiekvienas modelio tipas rodo tik tuos valdiklius, kurie iš tikrųjų taikomi – kampo slankiklis rodomas juostoms, taško spindulys ir tarpai rodomi taškams, linijos storis rodomas tinkleliui ir kryželiui – o didelis išklotas peržiūros laukelis perdažomas kiekvieną kartą pakeitus, kad galėtumėte matyti kelis pilnus pakartojimus prieš nustatydami vertę. Apverskite išvesties režimą į SVG ir vėl atsiras tas pats šablonas kaip elementas <pattern>, sudarytas iš paprastų tiesiosios, apskritimo, kelio ar daugiakampių primityvų, paruoštas įklijuoti bet kurio SVG dokumento <defs> viduje, vienu spustelėjimu atsisiunčiant atskirą .svg failą.

Viskas veikia lokaliai jūsų naršyklėje: nėra vaizdų įkėlimo, nėra serverio kelionės pirmyn ir atgal, nėra paskyros. Jei norite užpildyti vientisus arba gradientus be pasikartojimo, CSS gradiento generatorius šioje svetainėje yra tinkamas įrankis; šis skirtas specialiai išklotam geometriniam fonui, sukurtam iš nulinių vaizdo išteklių.