Генератор CSS узорака позадине

Већина алата за „генерисање узорака“ тихо користи исту формулу repeating-linear-gradient за сваку опцију и само мења бројеве. Овај не: сваки од шест типова узорака овде је изграђен помоћу специфичне CSS технике која заиста производи тај облик. Пруге користе један repeating-linear-gradient са две траке боје. Тачкице користе један radial-gradient испуњен искључиво помоћу background-size – класични CSS трик са тачкицама – а не repeating-radial-gradient, који не може чисто да испуни кружну тачкицу на правоугаоној мрежи. Шаховница користи праву формулу conic-gradient са четири квадранта: конични градијент центриран у квадратном пољу природно се дели на четири квадратна квадранта на границама од 90 степени, а смењивање две боје кроз те квадранте се испуњава у праву шаховницу, а не апроксимацију.

Мрежа и дијагонална шрафура обе слоје два repeating-linear-gradient као одвојене ставке background-image, уместо да фалсификују други правац триковима са border-ом. Мрежа комбинује понављајући градијент „на десно“ и „на доле“ за оштре хоризонталне и вертикалне линије. Шрафура наслојава понављајући градијент од +45° и -45° за дијагонално плетиво налик корпи – вреди бити прецизан: ово је исправна шрафура, а не права геометрија рибље кости, и алат је тако означава уместо да преувеличава. Троуглови поново користе технику conic-gradient са четири дела из шаховнице, али са градијентом ротираним за 45 степени, што помера границе делова са средина ивица поља на његове углове и претвара исте четири делове у четири троугла од угла до угла, уместо у четири квадратна квадранта.

Сваки тип узорка приказује само контроле које се на њега заиста односе – клизач за угао се појављује за пруге, полупречник тачкица и размак за тачкице, дебљина линије за мрежу и шрафуру – а велики прозор за испуњени приказ се ажурира при свакој промени, тако да можете видети неколико потпуних понављања пре него што потврдите вредност. Пребаците излазни режим на SVG и исти узорак се поново појављује као елемент <pattern> изграђен од основних rect, circle, path или polygon примитива, спреман да се налепи у <defs> било ког SVG документа, са преузимањем самосталне .svg датотеке једним кликом.

Све ради локално у вашем прегледачу: нема отпремања слика, нема комуникације са сервером, нема налога. За попуне пуном бојом или градијентом без понављања, генератор CSS градијената на овом сајту је прави алат; овај је посебно за испуњене геометријске позадине направљене без иједне слике.