Генератор на фон на шаблони на CSS

Повечето инструменти за "генератор на шаблони" тихо използват отново същата формула за повтарящ се линеен градиент за всяка опция и просто променят числата. Този не го прави: всеки от шестте типа шарки тук е изграден от специфичната CSS техника, която всъщност създава тази форма. Ивиците използват един повтарящ се линеен градиент с две цветни ленти. Точките използват един радиален градиент, подреден чисто чрез размера на фона – класическият трик с CSS точките – вместо повтарящ се радиален градиент, който не може да подреди чисто кръгла точка върху правоъгълна мрежа. Шахматната дъска използва истинската формула за коничен градиент с четири квадранта: коничен градиент, центриран в квадратна плочка, естествено се разделя на четири квадрата на квадрант в граници от 90 градуса и редува два цвята в тези плочки на квадрантите в истинска шахматна дъска, а не приближение.

Мрежата и диагоналът щриховат и двата слоя с два повтарящи се линейни градиента като отделни записи на фоново изображение, вместо да фалшифицират втората посока с трикове с граници. Решетката съчетава повтарящ се градиент „надясно“ и „долу“ за ясни хоризонтални и вертикални линии. Crosshatch наслоява +45deg и -45deg повтарящ се градиент за диагонално сплитане в стил basketweave — заслужава си да бъдем прецизни: това е честен напречен щрих, а не истинска геометрия на рибена кост, и инструментът го обозначава по този начин, вместо да го преувеличава. Триъгълниците използват повторно техниката на шахматната дъска с четири клиновидни конични градиенти, но започват градиента, завъртян на 45 градуса, което измества границите на клиновете от средните точки на ръба на плочката към нейните ъгли и превръща същите четири клина в четири триъгълника от ъгъл до ъгъл вместо в четири квадрата на квадранта.

Всеки тип шарка излага само контролите, които действително се прилагат към него — плъзгач за ъгъл се показва за ивици, радиус на точка и разстояние се показват за точки, дебелина на линията се показва за решетка и щриховка — и голямото квадратче за предварителен преглед се прерисува при всяка промяна, така че можете да видите няколко пълни повторения, преди да се ангажирате със стойност. Обърнете изходния режим към SVG и същият шаблон се появява отново като <pattern> елемент, изграден от обикновени правоъгълни, кръгови, пътечни или многоъгълни примитиви, готови за поставяне в <defs> на всеки SVG документ, с изтегляне с едно щракване за самостоятелен .svg файл.

Всичко работи локално във вашия браузър: без качване на изображения, без обиколка на сървъра, без акаунт. За плътни или градиентни запълвания без повторение, генераторът на CSS градиенти на този сайт е правилният инструмент; това е специално за геометрични фонове с възможност за плочки, изградени от нулеви изображения.