Dažnai rašai CSS ranka ? Atsibodo vis iš naujo rašyti tas pačias eilutes ? Rimtai, tu tikrai ne vienas. Nesvarbu, ar reikia per 2 minutes susikurti gražų mygtuką, uždėti šaunų šešėlį ar sugeneruoti responsive grid’ą be vargo… šiandien yra daugybė įrankių, kurie tau sutaupys krūvą laiko.
Bet ne visi jie vienodi. Vieni labai galingi, kiti – paprasti ir greiti. Taigi, skyriau laiko ir patikrinau nemažai jų (tarp kitko, važiuodamas traukiniu iš Vilniaus į Kauną), ir štai mano asmeninis geriausių CSS generatorių palyginimas.
1. CSS Grid Generator – Tobulas greitam grid’o sudėliojimui
Jeigu esi kada nors nervinęsis bandydamas išdėstyti blokus su grid-template-areas, tau šitas įrankis patiks.
Užeini į puslapį, pasirinki stulpelių skaičių, sureguliuoji tarpus… ir štai, kodas paruoštas. Viskas paprasta, aišku, be jokių nesąmonių.
Ką man patinka : viskas vizualu. Nereikia galvoti apie sintaksę – iš karto matai rezultatą.
Ko gal šiek tiek trūksta : paruoštų responsive šablonų. Bet greitam prototipavimui – tobula.
2. Fancy Border Radius – Kai norisi kažko daugiau nei apvalių kampų
Šitą įrankį radau visiškai atsitiktinai forume, ir rimtai… wow. Visi žinom border-radius : 50%, ok. Bet čia viskas žymiai įdomiau. Gali susikurti organines, šiek tiek « blob » stiliaus formas, su asimetriškais kampais.
Yra mažas vizualus redaktorius, tampai rankenėles, ir tau sugeneruoja tokį CSS kodą:
border-radius : 60% 40% 30% 70% / 60% 30% 70% 40%;
Jo, skamba painiai, bet atrodo tikrai įdomiai.
Mano nuomonė: puikus būdas išsiskirti su kažkuo netradiciniu. Ne būtinas, bet labai smagus.
3. CSS Buttons Generator – Tinginiams, kurie skuba (tarp jų ir aš, kartais)
Sukurti gražų CSS mygtuką – nesunku. Bet kai reikia 12 skirtingų landing page’ui, jau tampa vargas. Šitas įrankis siūlo begalę stilių: flat, 3D, ghost, su hover efektais, animuoti…
Pasirenki, šiek tiek pakoreguoji (dydį, spalvą, šešėlį), ir gali kopijuoti kodą. Rimtai, per 5 minutes turi visą mygtukų rinkinį.
Kas patinka : jie pateikia ir HTML, ne tik CSS. Smulkmena, bet labai naudinga.
4. Animista – Kad animuoti būtų smagu, ne skausmas
Tai geriausias CSS animacijų generatorius, kurį rekomenduoju visiems. Animista – tarsi švediškas stalas : spaudi, bandai, keiti, ir matai efektą iš karto. Įėjimai, išėjimai, atšokimai, sukimai, vėlavimai – viskas čia yra.
Ir svarbiausia : gali pilnai pritaikyti animaciją prieš kopijuodamas kodą. Ne tik šiaip kopijuoti « ką davė ».
Mano verdiktas : būtinas įrankis. Net jei gerai moki CSS, jis sutaupo krūvą laiko.
Mažas minusas : svetainė kiek lėta. Senesniame kompe – šiek tiek stringa.
5. Glassmorphism Generator – Tiems, kas mėgsta “elegantišką blur’ą”
Žinai tą stilių “matinio stiklo”, kurį visi pamėgo po to, kai macOS jį sugrąžino į madą? Šis generatorius paruoš tau viską, ko reikia tam įspūdžiui CSS’e : blur’as, permatomumas, švelnios ribos…
Pasireguliuoji opacity, blur’ą – ir štai, CSS kodas paruoštas. Nereikia galvoti, kaip kombinuoti backdrop-filter su rgba().
Pastaba : ne visi naršyklės tai dar gerai rodo (žiūrime į tave, Firefox). Bet kai veikia – atrodo tikrai įspūdingai.
6. Neumorphism.io – Tarp šešėlio ir šviesos
Šis stilius, labai populiarus apie 2020-uosius, turi tiek fanų, tiek skeptikų. Asmeniškai naudoju saikingai, bet kai kuriais atvejais – labai pataiko.
Generatorius padeda rasti tinkamus box-shadow parametrus “minkštam” iškėlimo efektui. Ir tai tikrai sunku padaryti rankiniu būdu be vizualinio testavimo, todėl čia jis labai naudingas.
Trumpas patarimas : nepersistenk su blur’u – kitaip atrodys kaip senas, neryškus 2000-ųjų puslapis.
Ir bonusas : Figma + CSS Scan duetas
Gerai, tai ne visiškai “klasikiniai” CSS generatoriai. Bet Figma, su tinkamais įskiepiais, gali tau realiu laiku pateikti CSS’ą, kai kuri dizainą. O CSS Scan (naršyklės plėtinys) leidžia tau užvesti pelę ant bet kurio elemento puslapyje… ir bam, visas CSS kodas – vienu spustelėjimu.
Integruotojams, kurie skuba (arba tiems, kas nori pamatyti, kaip kitas puslapis padarė kokį efektą) – tai tiesiog magija.
Dėmesio : ne visada generuotas kodas bus tobulas, todėl geriau vis tiek peržiūrėti. Bet mokymuisi ar greitam prototipavimui – puikus pasirinkimas.
Išvada : ar verta naudoti visus ?
Tikrai ne. Bet turėti 2–3 po ranka – tarsi turėti gerą įrankių rinkinį: labai padeda, kai spaudžia terminai arba tiesiog nenori visko rašyti ranka.
O tu, ar jau naudoji kokį nors ? Gal turi mėgstamiausią, kurio nepaminėjau ? Parašyk – visada ieškau ko nors naujo išbandyti.
Nes galų gale, visi mes norim vieno… kad atrodytų šauniai ir būtų greita. Ar ne taip ?