CSS fona rakstu ģenerators

Šis rīks ģenerē atkārtotus fona rakstus, izmantojot tikai CSS gradientus — attēlu faili nav nepieciešami. Izvēlies punktiņus, diagonālas svītras, šaha rūtis vai režģa līnijas, pielāgo krāsas un attālumus un kopē background-image CSS kodu tieši savā stila failā.

Kas ir šis rīks?

CSS var zīmēt atkārtotus rakstus bez jebkādiem attēlu failiem, izmantojot gradientus — radial-gradient() un linear-gradient() — kā background-image, kombinētu ar background-size, kas mazāks par elementu, lai gradients tiktu izklāts un atkārtots. Punktiņi izmanto repeating radial-gradient, svītras un šaha rūtis izmanto repeating vai slāņotu linear-gradient(), un režģa līnijas izmanto divas pārklājošās linear-gradient() līnijas.

Šis rīks veido šos gradienta aprakstus tavā vietā. Izvēlies raksta tipu, pielāgo raksta krāsu, fona krāsu un attālumu, un vēro, kā atjaunojas tiešais priekšskatījums — tad kopē precīzu background-image un background-size CSS kodu.

Avots: CSS Images Module Level 3, W3C — definē repeating-linear-gradient() un repeating-radial-gradient() funkcijas, no kurām šie raksti ir veidoti.

Kāpēc to izmantot?

Nav attēlu failu, nav HTTP pieprasījumu — raksts ir tīrs CSS un atveidojas tūlītēji jebkurā izšķirtspējā, tostarp retina/augstas izšķirtspējas ekrānos.
Pilnībā pielāgojama krāsa un attālums bez gradienta sintakses rakstīšanas ar roku vai izklāšanas matemātikas aprēķināšanas.
Tiešs priekšskatījums parāda precīzu atkārtoto rakstu, pirms kaut ko nokopē.
Skalojas skaidri, jo tā ir vektoru matemātika, nevis rastra attēls — nav izplūšanas, mainot elementa izmēru.
Darbojas pilnībā tavā pārlūkā — nekas no tā, ko konfigurē, netiek nekur augšupielādēts.
Bezmaksas, bez reģistrācijas, darbojas mobilajās ierīcēs.

Kā to lietot

Izvēlies raksta tipu: punktiņi, diagonālas svītras, šaha rūtis vai režģa līnijas.
Izvēlies raksta krāsu un fona krāsu, kas parādās starp/aiz raksta figūrām.
Pielāgo izmēra slīdni, lai padarītu punktus, svītras vai režģa šūnas lielākas vai mazākas — tas arī nosaka, cik blīvi raksts atkārtojas.
Nokopē ģenerēto CSS kodu un ielīmē to kā jebkura elementa background-image (un background-size/background-position, kur norādīts).

Piemērs

Ievade

Raksts: punktiņi · Krāsa: zila · Fons: balts · Izmērs: 24px

Izvade

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

Klasisks gaišs punktiņu raksts, ko bieži izmanto kā smalku sadaļas fonu vai kartes tekstūru.

Kā tiek veidots katrs raksts

Punktiņi: radial-gradient() zīmē vienu mazu aizpildītu apli, tad background-size liek tam atkārtoties kā izklātam punktu režģim.
Diagonālas svītras: repeating-linear-gradient() 45 grādu leņķī mijas starp raksta krāsu un fona krāsu fiksētā intervālā.
Šaha rūtis: divi pārklājoši 45 grādu linear-gradient() slāņi, nobīdīti viens no otra par pusi rūts, veido mijas gaišus/tumšus kvadrātus.
Režģa līnijas: divas plānas linear-gradient() līnijas — viena horizontāla, viena vertikāla — izklātas ar izvēlēto attālumu, lai veidotu režģi, līdzīgu milimetru papīram.

Kad izmantot CSS rakstus attēlu failu vietā

CSS gradienta rakstam nav faila izmēra un nav HTTP pieprasījuma, tāpēc tas ielādējas tūlītēji un nekad neizskatās izplūdis augstas izšķirtspējas ekrānos, atšķirībā no rastra PNG fona flīzes. Tas ir ideāli piemērots smalkām tekstūrām aiz teksta, sadaļu atdalītājiem, tukša stāvokļa ilustrācijām vai vietturu kartēm. Sarežģītiem ilustrētiem vai fotogrāfiskiem rakstiem īsts attēls joprojām ir pareizais rīks — CSS gradienti vislabāk piemēroti vienkāršām, ģeometriskām, atkārtotām formām, kā šeit.

Apvienošana ar citiem CSS efektiem

Raksti labi darbojas kā fons aiz glassmorphism kartēm, jo izplūdumam vajadzīga vizuāla tekstūra aiz sevis, lai būtu redzams. Tie arī dabiski sader ar noapaļotiem stūriem konteinera elementā.

→ CSS Glassmorphism ģenerators · Border Radius ģenerators

Biežāk uzdotie jautājumi

Vai šiem rakstiem nepieciešami attēlu faili?

Nē. Katrs šeit esošais raksts tiek ģenerēts tikai ar CSS gradientiem kā background-image — nav PNG, SVG vai cita faila, tāpēc nav papildu HTTP pieprasījuma un nav izplūšanas riska augstas izšķirtspējas ekrānos.

Vai varu mainīt raksta izmēru?

Jā — izmēra slīdnis kontrolē background-size, kas nosaka, cik liela ir viena raksta atkārtotā flīze. Mazāks izmērs sablīvē punktiņus, svītras vai režģa šūnas tuvāk kopā; lielāks izmērs tos izklāj plašāk.

Kāpēc šaha rūšu raksts izmanto divus gradientus?

Viens linear-gradient() var mainīt krāsas tikai vienā virzienā. Divu 45 grādu gradientu slāņošana, nobīdot vienu no otra par pusi flīzes, ir tas, kas rada šaha rūšu mijas gaišos/tumšos kvadrātus — tā ir standarta tehnika tikai-CSS šaha rūtīm.

Vai šis raksts izskatīsies asi retina/augstas izšķirtspējas ekrānos?

Jā. Tā kā raksts ir matemātisks gradients, nevis bitkarte, tas tiek atveidots jebkurā izšķirtspējā, ko ekrāns pieprasa, bez palielināšanas vai izplūšanas — atšķirībā no mazas rastra attēla flīzes, kas izstiepta vai atkārtota augstā pikseļu blīvumā.

Vai varu izmantot šos rakstus kā pilnas lapas fonu?

Jā — pielieto ģenerēto background-image, background-size un background-position (kur norādīts) body vai jebkuram pilna platuma konteinera elementam. Paturi prātā kontrastu: noslogots, augsta kontrasta raksts aiz pamatteksta var pasliktināt lasāmību, tāpēc lielām fona zonām parasti labāk der gaišāki/smalkāki iestatījumi.