CSS фон үлгісінің генераторы

Бұл құрал тек CSS градиенттерін пайдаланып қайталанатын фон үлгілерін жасайды — суреттер файлдары қажет емес. Көкжиек нүктелерін, диагональ жолақтарды, шахмат тақтасын немесе тор сызықтарын таңдап, түстер мен аралықты реттеп, background-image CSS кодын тікелей стиль кестеңізге көшіріңіз.

Бұл құрал не істейді?

CSS суреттер файлдарынсыз қайталанатын үлгілерді градиенттер арқылы сала алады — radial-gradient() пен linear-gradient() background-image ретінде, элементтен кіші background-size-мен бірге, осылайша градиент кірпіш секілді қайталанады. Көкжиек нүктелер repeating radial-gradient пайдаланады, жолақтар мен шахмат тақталары қайталанатын немесе қабатталған linear-gradient() пайдаланады, ал тор сызықтары екі қабаттасатын linear-gradient() сызығын пайдаланады.

Бұл құрал сол градиент декларацияларын сіз үшін құрастырады. Үлгі түрін таңдаңыз, үлгі түсін, фон түсін және аралықты реттеп, тірі алдын ала қарауды жаңартылып тұрғанын бақылаңыз — содан кейін дәл background-image мен background-size CSS кодын көшіріңіз.

Дереккөз: CSS Images Module Level 3, W3C — repeating-linear-gradient() пен repeating-radial-gradient() функцияларын анықтайды, осы үлгілер солардан құрастырылған.

Оны неге пайдалану керек?

Суреттер файлдары мен HTTP сұраныстары жоқ — үлгі таза CSS болғандықтан, кез келген айырымдылықта, соның ішінде retina/жоғары DPI экрандарда бірден көрсетіледі.
Градиент синтаксисін қолмен жазбай немесе кірпіштеу математикасын есептемей түс пен аралықты толық реттеуге болады.
Тірі алдын ала қарау ешнәрсе көшірместен бұрын дәл қайталанатын үлгіні көрсетеді.
Бұл растрлық сурет емес, векторлық математика болғандықтан таза масштабталады — элемент өлшемі өзгергенде бұлдырлық болмайды.
Толығымен браузеріңізде жұмыс істейді — сіз баптаған ешнәрсе ешқайда жүктелмейді.
Тегін, тіркеусіз, мобильді құрылғыда жұмыс істейді.

Оны қалай пайдалану керек

Үлгі түрін таңдаңыз: көкжиек нүктелер, диагональ жолақтар, шахмат тақтасы немесе тор сызықтары.
Үлгі пішіндерінің арасында/артында көрінетін үлгі түсі мен фон түсін таңдаңыз.
Нүктелерді, жолақтарды немесе тор ұяшықтарын үлкенірек немесе кішірек ету үшін өлшем сырғытпасын реттеңіз — бұл сонымен қатар үлгінің қаншалықты тығыз қайталанатынын басқарады.
Жасалған CSS кодын көшіріп, оны кез келген элементтің background-image (және көрсетілген жерде background-size/background-position) ретінде қойыңыз.

Мысал

Енгізу

Үлгі: көкжиек нүктелер · Түс: көк · Фон: ақ · Өлшем: 24px

Нәтиже

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 оны нүктелердің кірпіштелген торы ретінде қайталайды.
Диагональ жолақтар: 45 градустық repeating-linear-gradient() тұрақты аралықпен үлгі түсі мен фон түсін кезектестіреді.
Шахмат тақтасы: бір-бірінен жарты кірпіштей ығысқан екі қабаттасатын 45 градустық linear-gradient() қабаты кезектесетін ашық/қара шаршыларды тудырады.
Тор сызықтары: екі жіңішке linear-gradient() сызығы — біреуі көлденең, біреуі тік — таңдалған аралықпен кірпіштеліп, графикалық қағазға ұқсас тор құрайды.

Сурет файлдарының орнына CSS үлгілерін қашан пайдалану керек

CSS градиент үлгісінде файл өлшемі мен HTTP сұранысы жоқ, сондықтан ол бірден жүктеледі және растрлық PNG фон кірпішінен айырмашылығы, жоғары DPI экрандарда ешқашан бұлдыр көрінбейді. Ол мәтін артындағы нәзік текстуралар, бөлім бөлгіштер, бос күй иллюстрациялары немесе орынбасар карточкалар үшін тамаша. Күрделі иллюстрацияланған немесе фотографиялық үлгілер үшін нақты сурет әлі де дұрыс құрал болып қала береді — CSS градиенттері осындағыдай қарапайым, геометриялық, қайталанатын пішіндерге ең қолайлы.

Басқа CSS эффекттерімен үйлестіру

Үлгілер glassmorphism карточкаларының артқы фоны ретінде жақсы жұмыс істейді, себебі бұлдырлықтың көрінуі үшін артында визуалды текстурасы бар нәрсе қажет. Олар сондай-ақ контейнер элементінің дөңгеленген бұрыштарымен табиғи түрде үйлеседі.

→ CSS Glassmorphism Generator · Border Radius Generator

Жиі қойылатын сұрақтар

Бұл үлгілер қандай да бір сурет файлдарын талап ете ме?

Жоқ. Мұндағы әрбір үлгі тек CSS градиенттері арқылы background-image ретінде жасалады — PNG, SVG немесе басқа файл қатыспайды, сондықтан қосымша HTTP сұранысы да, жоғары айырымдылықты экрандарда бұлдырлану қаупі де жоқ.

Үлгінің қаншалықты үлкен екенін өзгерте аламын ба?

Иә — өлшем сырғытпасы background-size-ды басқарады, ол үлгінің бір қайталанатын кірпішінің қаншалықты үлкен екенін белгілейді. Кішірек өлшем нүктелерді, жолақтарды немесе тор ұяшықтарын бір-біріне жақынырақ қояды; үлкенірек өлшем оларды жайып жібереді.

Шахмат тақтасы үлгісі неге екі градиентті пайдаланады?

Бір linear-gradient() тек бір бағытта ғана түстерді кезектестіре алады. Бір-бірінен жарты кірпіштей ығысқан екі 45 градустық градиентті қабаттау шахмат тақтасының кезектесетін ашық/қара шаршыларын тудырады — бұл тек CSS-тен жасалған шахмат тақталарының стандартты техникасы.

Бұл үлгі retina/жоғары DPI экрандарда өткір көріне ме?

Иә. Үлгі растрлық сурет емес, математикалық градиент болғандықтан, ол экранға қажетті кез келген айырымдылықта, ешбір ұлғайтусыз немесе бұлдырсыз көрсетіледі — жоғары пиксель тығыздығында созылған немесе қайталанған кішкентай растрлық сурет кірпішінен айырмашылығы.

Бұл үлгілерді бүкіл беттің фоны ретінде пайдалана аламын ба?

Иә — жасалған background-image, background-size және background-position (қолжетімді болған жерде) параметрлерін body немесе кез келген толық енді контейнер элементіне қолданыңыз. Контрастты есте ұстаңыз: мәтін артындағы шулы, жоғары контрастты үлгі оқылымдылыққа зиян тигізуі мүмкін, сондықтан үлкен фон аймақтары үшін әдетте жеңілірек/нәзігірек параметрлер жақсырақ жұмыс істейді.