0

CSS modeļu fona ģenerators

Veidojiet izkārtojamas svītras, punktus, šaha dēli, režģi, diagonālo šķērssvītru un trīsstūra fonu no reāliem slāņveida CSS gradientiem — nulles attēliem — vai eksportējiet to pašu paraugu kā SVG <rakstu>, lai to izmantotu SVG dokumentos.

20px
45°
Notiek apstrāde... 0%

Rezultāts

Lielākā daļa "rakstu ģeneratora" rīku katrai opcijai mierīgi atkārtoti izmanto to pašu atkārtojošā lineārā gradienta formulu un vienkārši maina skaitļus. Šis nav: katrs no sešiem modeļu veidiem šeit ir veidots no konkrētas CSS tehnikas, kas faktiski rada šo formu. Svītras izmanto vienu atkārtojošu lineāru gradientu ar divām krāsu joslām. Punktiem tiek izmantots viens radiālais gradients, kas ir aprīkots tikai ar fona izmēru — klasiskais CSS punktu triks —, nevis atkārtots radiālais gradients, kas nevar tīri izkārtot apļveida punktu uz taisnstūra režģa. Šaha laukā tiek izmantota īsta četru kvadrantu konusveida gradienta formula: konusveida gradients, kas centrēts kvadrātveida flīzē, dabiski sadalās četros kvadrantu kvadrātos pie 90 grādu robežām un mainot divas krāsas starp šīm kvadrantu daļām, veidojot īstu šaha laukumu, nevis tuvinājumu.

Režģis un diagonāles šķērssvītra abi slāņi ir divi atkārtoti lineāri gradienti kā atsevišķi fona attēla ieraksti, nevis viltot otro virzienu ar apmaļu trikiem. Režģis apvieno "pa labi" un "uz leju" atkārtojošu gradientu, lai iegūtu izteiksmīgas horizontālās un vertikālās kārtulu līnijas. Crosshatch slāņo +45° un -45 grādu gradientu, kas atkārtojas groza pinuma stila diagonālai pinumam — ir vērts būt precīzam: šis ir godīgs krustojums, nevis patiesa skujiņas ģeometrija, un rīks to apzīmē šādi, nevis pārmērīgi. Trijstūri atkārtoti izmanto šaha galdiņa četru ķīļu koniska gradienta paņēmienu, bet gradientu sāk pagriezt par 45 grādiem, kas novirza ķīļa robežas no flīzes malu viduspunktiem uz tās stūriem un pārvērš tos pašus četrus ķīļus četros stūra līdz stūra trīsstūros četru kvadrantu kvadrātu vietā.

Katrs raksta veids parāda tikai tās vadīklas, kas uz to attiecas — leņķa slīdnis tiek parādīts svītrām, punktu rādiuss un atstarpes tiek parādīts punktiem, līnijas biezums tiek parādīts režģim un šķērssvītram — un lielais priekšskatījuma lodziņš tiek pārkrāsots katrā izmaiņā, lai jūs varētu redzēt vairākus pilnus atkārtojumus pirms vērtības noteikšanas. Pārslēdziet izvades režīmu uz SVG, un tas pats raksts atkal parādās kā elements <pattern>, kas veidots no vienkāršiem taisnstūra, apļa, ceļa vai daudzstūra primitīviem un ir gatavs ielīmēšanai jebkura SVG dokumenta <defs> iekšpusē, ar vienu klikšķi lejupielādējot atsevišķu .svg failu.

Viss darbojas lokāli jūsu pārlūkprogrammā: nav attēlu augšupielādes, nav servera turp un atpakaļ, nav konta. Vienmērīgai vai gradienta aizpildīšanai bez atkārtošanās CSS gradientu ģenerators šajā vietnē ir piemērots rīks. šis ir īpaši paredzēts flīzējamiem ģeometriskiem foniem, kas izveidoti no nulles attēla līdzekļiem.