Generator de fundal de modele CSS

Majoritatea instrumentelor „generatoare de modele” reutiliza în liniște aceeași formulă de gradient liniar repetat pentru fiecare opțiune și doar schimbă numerele. Acesta nu: fiecare dintre cele șase tipuri de model de aici este construit din tehnica CSS specifică care produce de fapt acea formă. Dungile folosesc un singur gradient liniar care se repetă cu două benzi de culoare. Punctele folosesc un gradient radial plasat exclusiv prin dimensiunea fundalului - trucul clasic de puncte CSS - mai degrabă decât un gradient radial care se repetă, care nu poate plasa un punct circular curat pe o grilă dreptunghiulară. Tabla de șah folosește formula reală a gradientului conic cu patru cadrane: un gradient conic centrat într-o plăci pătrată se împarte în mod natural în patru pătrate pătrate la limite de 90 de grade și alternând două culori de-a lungul acestor cadrane într-o tablă de șah autentică, nu o aproximare.

Grila și diagonala încrucișează ambele strate două degrade-liniari repetate ca intrări separate de imagine de fundal, mai degrabă decât falsificarea a doua direcție cu trucuri de chenar. Grila combină un gradient care se repetă „în dreapta” și „în jos” pentru linii de regulă clare orizontale și verticale. Hașura încrucișată stratifică un gradient care se repetă de +45 de grade și -45 de grade pentru o țesătură diagonală în stil coș - merită să fiți precis: aceasta este o hașura încrucișată cinstită, nu o geometrie adevărată în schelet, iar instrumentul o etichetează în acest fel, mai degrabă decât în ​​exces. Triunghiurile reutiliza tehnica de gradient conic cu patru pene a tablei de șah, dar încep gradientul rotit cu 45 de grade, ceea ce mută limitele panei de la mijlocul marginii plăcii la colțurile sale și transformă aceleași patru pene în patru triunghiuri de la colț la colț în loc de patru pătrate cadrane.

Fiecare tip de model expune doar controalele care i se aplică efectiv — un glisor unghiular apare pentru dungi, raza punctelor și spațierea sunt afișate pentru puncte, grosimea liniei apare pentru grilă și hașura încrucișată — iar caseta mare de previzualizare cu gresie se revopsește la fiecare modificare, astfel încât să puteți vedea mai multe repetări complete înainte de a vă angaja la o valoare. Întoarceți modul de ieșire la SVG și același model reapare ca un element <pattern> construit din primitive simple rect, cerc, cale sau poligon, gata de lipit în <defs> ale oricărui document SVG, cu o descărcare cu un singur clic pentru un fișier .svg independent.

Totul rulează local în browserul dvs.: fără încărcări de imagini, fără călătorii dus-întors pe server, fără cont. Pentru umpleri solide sau gradient fără repetare, generatorul de gradient CSS de pe acest site este instrumentul potrivit; acesta este special pentru fundaluri geometrice care pot fi plătite, construite din zero elemente de imagine.