Генератор CSS позадинских шаблона

Šta je ovaj alat?

CSS може да исцрта понављајуће шаблоне без иједне слике користећи градијенте — radial-gradient() и linear-gradient() — као background-image, у комбинацији са background-size који је мањи од елемента, тако да се градијент понавља у облику плочица. Тачкасти шаблони користе repeating radial-gradient, пруге и шаховнице користе понављајући или слојевити linear-gradient(), а линије мреже користе две преклапајуће linear-gradient() линије.

Овај алат уместо вас гради те декларације градијента. Изаберите тип шаблона, подесите боју шаблона, боју позадине и размак, и посматрајте како се уживо преглед ажурира — затим копирајте тачан CSS код за background-image и background-size.

Извор: CSS Images Module Level 3, W3C — дефинише repeating-linear-gradient() и repeating-radial-gradient(), функције од којих су ови шаблони изграђени.

Zašto ga koristiti?

• Без слика, без HTTP захтева — шаблон је чист CSS и рендерује се тренутно на било којој резолуцији, укључујући retina/екране високе густине пиксела.
• Потпуно подесива боја и размак без ручног писања синтаксе градијента или израчунавања математике поплочавања.
• Уживо преглед приказује тачан понављајући шаблон пре него што ишта копирате.
• Скалира се чисто јер је реч о векторској математици, а не растерској слици — без замућења при промени величине елемента.
• Ради у потпуности у вашем прегледачу — ништа што подесите се никуда не отпрема.
• Бесплатно, без регистрације, ради на мобилним уређајима.

Kako se koristi

1. Изаберите тип шаблона: тачкасти шаблон, дијагоналне пруге, шаховницу или линије мреже.
2. Изаберите боју шаблона и боју позадине која се приказује између/иза облика шаблона.
3. Подесите клизач величине да бисте тачке, пруге или ћелије мреже учинили већим или мањим — ово такође контролише колико густо се шаблон понавља.
4. Копирајте генерисани CSS код и налепите га као background-image (и background-size/background-position где је приказано) било ког елемента.

Primer

Unos

Шаблон: тачкасти · Боја: плава · Позадина: бела · Величина: 24px

Rezultat

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Класичан светли тачкасти шаблон који се често користи као суптилна позадина секције или текстура картице.

Како је изграђен сваки шаблон

• Тачкасти шаблон: radial-gradient() исцртава један мали попуњени круг, а затим background-size чини да се понавља као поплочана мрежа тачака.
• Дијагоналне пруге: repeating-linear-gradient() под углом од 45 степени наизменично мења боју шаблона и боју позадине у фиксном интервалу.
• Шаховница: два преклапајућа слоја linear-gradient() под 45 степени, померена један у односу на други за пола плочице, стварају наизменичне светле/тамне квадрате.
• Линије мреже: две танке linear-gradient() линије — једна хоризонтална, једна вертикална — поплочане на изабраном размаку да формирају мрежу, слично милиметарском папиру.

Када користити CSS шаблоне уместо слика

CSS градијентни шаблон нема величину датотеке нити захтева HTTP захтев, па се учитава тренутно и никада не изгледа замућено на екранима високе густине пиксела, за разлику од растерске PNG позадинске плочице. Идеалан је за суптилне текстуре иза текста, раздвојнике секција, илустрације за празна стања или замене за картице. За сложене илустроване или фотографске шаблоне, права слика је и даље прави алат — CSS градијенти су најпогоднији за једноставне, геометријске, понављајуће облике попут ових овде.

Комбиновање са другим CSS ефектима

Шаблони добро функционишу као позадина иза glassmorphism картица, јер замућењу треба нешто са визуелном текстуром иза себе да би било видљиво. Такође се природно уклапају са заобљеним угловима на контејнер елементу.

→ CSS Glassmorphism Generator · Border Radius Generator

Često postavljana pitanja