Skip to main content

CSS generatoriai

Simonas Dimavičius

Dirbant su frontend visada prieiname tokią vietą, kur prireikia paieškos pagalbos kaip aprašyti vieną ar kitą parametrą – pvz.: šešėlis, gradientas ir t.t. Taip, žinoma, galima per inspect element pasikeisti parametrus ir iš karto matyti rezultatus, bet visada ir ne visais parametrais tai yra patogu. Tai čia pasidalinsiu viešai prieinamais įrankiais kurie palengvina tų parametrų generavimą:

Kito lygio šešėliai

Retai, bet kai prireikia šešėlio, tai geriau iš karto matyti rezultatą, ypač kai galima panaudoti ne vieną sluoksnį. Smooth shadow.

Nuoroda: https://shadows.brumm.af

Preview

Netolygus kampų apvalinimas

Elemento kampų aprašymas yra paprastas, kai tiek kampai paprasti, bet jeigu prireikia kažko neįprasto, be generatoriaus greičiausiai neišsiverčiame.

Nuoroda: https://9elements.github.io

Preview

Tolygus spalvų perėjimo generatorius – easing gradients

Šis generatorius ne tik padės lengvai pasidaryti tolygų perėjimą iš vienos spalvos į kitą, bet paaiškins kas tai yra ir kuo skiriasi nuo įprastinio spalvos perėjimo.

Nuoroda: https://larsenwork.com/easing-gradients/

Preview

Grid’o generatorius

CSS grid nėra plačiai paplitęs, tačiau tikrai daug žadantis CSS funkcionalumas, daugiau apie patį grid galima pasiskaityti čia: https://css-tricks.com/snippets/css/complete-guide-grid/ O šis generatorius padės lengviau pasidaryti savo norima grid’ą

Nuoroda: https://cssgrid-generator.netlify.app/

Preview

Neumorphism/Soft UI generator

Sunku net aprašyti, ką konkrečiai generuoja, pamėginkite patys.

Nuoroda: https://neumorphism.io

Preview