CSS fono rašto generatorius

Šis įrankis generuoja pasikartojančius fono raštus naudodamas tik CSS gradientus — jokių paveikslėlių failų nereikia. Rinkitės taškelius, įstrižus dryžius, šachmatų raštą ar tinklelio linijas, koreguokite spalvas ir tarpus, tada kopijuokite background-image CSS kodą tiesiai į savo stilių lapą.

Kas yra šis įrankis?

CSS gali piešti pasikartojančius raštus be jokių paveikslėlių failų, naudodamas gradientus — radial-gradient() ir linear-gradient() — kaip background-image, kartu su background-size, mažesniu už patį elementą, kad gradientas kartotųsi kaip plytelės. Taškeliai naudoja pasikartojantį radial-gradient, dryžiai ir šachmatų raštai naudoja pasikartojantį arba sluoksniuotą linear-gradient(), o tinklelio linijos naudoja dvi persidengiančias linear-gradient() linijas.

Šis įrankis už jus sukuria šiuos gradientų aprašus. Pasirinkite rašto tipą, koreguokite rašto spalvą, fono spalvą ir tarpus, stebėkite gyvą peržiūrą — tada kopijuokite tikslų background-image ir background-size CSS kodą.

Šaltinis: CSS Images Module Level 3, W3C — apibrėžia repeating-linear-gradient() ir repeating-radial-gradient() funkcijas, iš kurių sukurti šie raštai.

Kodėl jį naudoti?

Jokių paveikslėlių failų, jokių HTTP užklausų — raštas yra grynas CSS ir atvaizduojamas akimirksniu bet kokia skiriamąja geba, įskaitant retina/aukštos DPI ekranus.
Visiškai koreguojama spalva ir tarpai be reikalo rašyti gradiento sintaksę ranka ar skaičiuoti plytelių matematiką.
Gyva peržiūra rodo tikslų pasikartojantį raštą prieš ką nors nukopijuojant.
Skaluojasi švariai, nes tai vektorinė matematika, o ne rastrinis paveikslėlis — elementui keičiant dydį jokio suliejimo.
Viskas vyksta jūsų naršyklėje — niekas iš to, ką konfigūruojate, niekur nesiunčiama.
Nemokama, be registracijos, veikia mobiliuosiuose.

Kaip naudoti

Pasirinkite rašto tipą: taškelius, įstrižus dryžius, šachmatų raštą ar tinklelio linijas.
Pasirinkite rašto spalvą ir fono spalvą, kuri matosi tarp/už rašto figūrų.
Koreguokite dydžio slankiklį, kad taškeliai, dryžiai ar tinklelio langeliai būtų didesni ar mažesni — tai taip pat valdo, kaip tankiai raštas kartojasi.
Nukopijuokite sugeneruotą CSS kodą ir įklijuokite jį kaip bet kurio elemento background-image (ir background-size/background-position, kur rodoma).

Pavyzdys

Įvestis

Raštas: taškeliai · Spalva: mėlyna · Fonas: baltas · Dydis: 24px

Išvestis

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

Klasikinis šviesus taškelių raštas, dažnai naudojamas kaip subtilus skyriaus fonas ar kortelės tekstūra.

Kaip sukurtas kiekvienas raštas

Taškeliai: radial-gradient() nupiešia vieną mažą užpildytą apskritimą, tada background-size padaro jį pasikartojantį kaip taškų tinklelį.
Įstriži dryžiai: repeating-linear-gradient() 45 laipsnių kampu kaitalioja rašto spalvą ir fono spalvą fiksuotu intervalu.
Šachmatų raštas: du persidengiantys 45 laipsnių linear-gradient() sluoksniai, pastumti vienas nuo kito per pusę plytelės, sukuria besikaitaliojančius šviesius/tamsius kvadratus.
Tinklelio linijos: dvi plonos linear-gradient() linijos — viena horizontali, viena vertikali — sudėliotos pasirinktu tarpu ir sudarančios tinklelį, panašų į grafikos popierių.

Kada naudoti CSS raštus vietoj paveikslėlių failų

CSS gradiento raštas neturi failo dydžio ir HTTP užklausos, todėl įkeliamas akimirksniu ir niekada neatrodo suliejamas aukštos DPI ekranuose, kitaip nei rastrinis PNG fono elementas. Jis idealiai tinka subtilioms tekstūroms už teksto, skyrių skirtukams, tuščios būsenos iliustracijoms ar užpildo kortelėms. Sudėtingiems iliustruotiems ar fotografiniams raštams tikras paveikslėlis vis dar tinkamas įrankis — CSS gradientai geriausiai tinka paprastoms, geometrinėms, pasikartojančioms formoms, kaip čia.

Derinimas su kitais CSS efektais

Raštai gerai tinka kaip fonas už glassmorphism kortelių, nes suliejimui reikia, kad už jo būtų kažkas su vizualia tekstūra, jog jis būtų matomas. Jie taip pat natūraliai dera su suapvalintais talpyklos elemento kampais.

→ CSS glassmorphism generatorius · border-radius generatorius

Dažniausiai užduodami klausimai

Ar šiems raštams reikia paveikslėlių failų?

Ne. Kiekvienas čia esantis raštas sukurtas grynai CSS gradientais kaip background-image — nėra jokio PNG, SVG ar kito failo, tad nėra papildomos HTTP užklausos ir jokio suliejimo pavojaus didelės skiriamosios gebos ekranuose.

Ar galiu pakeisti rašto dydį?

Taip — dydžio slankiklis valdo background-size, kuris nustato, kokio dydžio yra viena pasikartojanti rašto plytelė. Mažesnis dydis sutalpina taškelius, dryžius ar tinklelio langelius arčiau vienas kito; didesnis dydis juos išskirsto.

Kodėl šachmatų raštui naudojami du gradientai?

Vienas linear-gradient() gali kaitalioti spalvas tik viena kryptimi. Sluoksniuojant du 45 laipsnių gradientus, pastumtus vieną nuo kito per pusę plytelės, gaunami besikaitaliojantys šviesūs/tamsūs kvadratai — tai standartinė technika grynai CSS šachmatų raštams kurti.

Ar šis raštas atrodys ryškus retina/aukštos DPI ekranuose?

Taip. Kadangi raštas yra matematinis gradientas, o ne bitmap paveikslėlis, jis atvaizduojamas ta skiriamąja geba, kurios reikia ekranui, be didinimo ar suliejimo — kitaip nei mažas rastrinis paveikslėlio elementas, ištemptas ar kartojamas didelio pikselių tankio ekrane.

Ar galiu naudoti šiuos raštus kaip viso puslapio foną?

Taip — pritaikykite sugeneruotą background-image, background-size ir background-position (jei yra) body arba bet kokiam viso pločio talpyklos elementui. Turėkite omenyje kontrastą: intensyvus, aukšto kontrasto raštas už puslapio teksto gali pabloginti skaitomumą, tad lengvesni/subtilesni nustatymai paprastai geriau tinka dideliems fono plotams.