0

CSS Raštų Fono Generatorius

Kurkite pasikartojančius dryžius, taškus, šachmatų lentą, tinklelį, įstrižas kryžmines linijas ir trikampius iš tikrų sluoksniuotų CSS gradientų – jokių paveikslėlių – arba eksportuokite tą patį raštą kaip SVG <pattern>, skirtą naudoti SVG dokumentuose.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

20px
45°
Apdorojama... 0%

Rezultatas

Dauguma „raštų generatoriaus“ įrankių tyliai naudoja tą pačią pasikartojančio tiesinio gradiento formulę kiekvienai parinkčiai ir tik keičia skaičius. Šis – ne: kiekvienas iš šešių čia esančių raštų tipų sukurtas naudojant būtent tą CSS techniką, kuri realiai sukuria tą formą. Dryžiai naudoja viengubą pasikartojantį tiesinį gradientą su dviem spalvų juostomis. Taškai naudoja vieną radialinį gradientą, išdėstomą mozaikos principu vien tik per background-size – klasikinį CSS taškų triuką – o ne pasikartojantį radialinį gradientą, kuris negali švariai išdėstyti apskrito taško stačiakampiame tinklelyje. Šachmatų lenta naudoja tikrą keturių ketvirčių kūginio gradiento formulę: kvadratiniame laukelyje centruotas kūginis gradientas natūraliai suskyla į keturis ketvirčio kvadratus ties 90 laipsnių ribomis, o kaitaliojant dvi spalvas tuose ketvirčiuose gaunama tikra šachmatų lenta, o ne apytikslė imitacija.

Tinklelis ir įstrižos kryžminės linijos abu sluoksniuoja du pasikartojančius tiesinius gradientus kaip atskirus background-image įrašus, o ne imituoja antrąją kryptį rėmelio gudrybėmis. Tinklelis sujungia „į dešinę“ ir „į apačią“ pasikartojančius gradientus, kad gautųsi ryškios horizontalios ir vertikalios linijos. Kryžminės linijos sluoksniuoja +45° ir -45° pasikartojančius gradientus, sukurdamos pynimo raštą primenantį įstrižą pynimą – verta pabrėžti tikslumą: tai sąžiningas kryžminių linijų raštas, o ne tikra silkės geometrija, ir įrankis taip jį ir vadina, neperdėdamas. Trikampiai pakartoja šachmatų lentos keturių pleištų kūginio gradiento techniką, bet pradeda gradientą pasuktą 45 laipsniais, o tai perstumia pleištų ribas nuo laukelio kraštų vidurio taškų prie kampų ir paverčia tuos pačius keturis pleištus keturiais nuo kampo iki kampo trikampiais, o ne keturiais ketvirčio kvadratais.

Kiekvienas rašto tipas rodo tik tuos valdiklius, kurie jam iš tikrųjų taikomi – kampo slankiklis rodomas dryžiams, taško spindulys ir tarpai – taškams, linijos storis – tinkleliui ir kryžminėms linijoms – o didelis mozaikos peržiūros langas persipiešia po kiekvieno pakeitimo, kad galėtumėte matyti keletą pilnų pasikartojimų prieš patvirtindami reikšmę. Pakeiskite išvesties režimą į SVG, ir tas pats raštas vėl pasirodys kaip <pattern> elementas, sudarytas iš paprastų rect, circle, path arba polygon primityvų, paruoštas įklijavimui į bet kurio SVG dokumento <defs> sekciją, su galimybe vienu paspaudimu atsisiųsti atskirą .svg failą.

Viskas vyksta vietoje jūsų naršyklėje: jokių paveikslėlių įkėlimų, jokių užklausų į serverį, jokios paskyros. Kietiems ar gradientiniams užpildams be pasikartojimo tinkamesnis įrankis yra šioje svetainėje esantis CSS gradientų generatorius; šis skirtas būtent pasikartojantiems geometriniams fonams, sukurtiems be jokių paveikslėlių resursų.