Am construit un generator de CSS pentru glassmorphism

Salutare devs,

Am construit impreuna cu un prieten un generator de CSS pentru glassmorphism. Poti sa schimbi tipul background-ului, culoarea background-ului + card-ului, proprietatile de glassmorphism (blur, transparency), border radius, dark mode/light mode si chiar si tipul de componenta.

Este prima versiune si este posibil sa existe probleme de UI/UX + bugs. Orice feedback constructiv ar fi foarte apreciat :slight_smile:

Link: https://ui.glass/generator/

4 Likes

E foarte bună ideea, ce aș face eu pentru a fi și mai util, ar fi să suporți framework-urile mari css, gen bootstrap, material, probabil și tailwind.

Cu asta ai acoperi probabil 80% din nevoi și ar fi foarte ușor să dai drop in la code și designul e implementat.

1 Like

Generatorul este bazat pe Bootstrap 5 in acest moment, fara jQuery. Libraria este de fapt un fork din Bootstrap, si regandit destul de mult. Ne gandim la integrarea in Tailwind CSS pentru viitor. Merci pentru feedback!

Edit: acum inteleg mai bine ce zici… la Tailwind CSS cred ca ai putea sa generezi clasele, dar pentru Bootstrap nu ai clase de utility sa bagi blur, bg transparency etc. Cred ca e bine sa keep it simple si CSS is fiecare integreaza unde vrea :slight_smile:

Pentru componente, da, ne putem gandi sa dam HTML in functie de CSS framework pentru viitor.

Nu neaparat, pentru bootstrap ai putea avea un selector de componentă, și ai genera variantă.

De exemplu pentru un buton: ai avea btn-cool-glass și voi generați clasele necesare, drop in sass/css și ai varianta ai de buton disponibilă oriunde.

Sau ai putea avea o opțiune să genereze varianta pentru toate componentele, doar pe baza variantei. Așa aș avea și un card transparent, un button transparent, alerte, nav, etc.

Pentru tailwind puteți folosi clasele lor dacă au, sau eventual generați ale voastre, ca aici.

Evident, varianta css standard e de bază și trebuie să rămână, pentru compatibilitate universală, corect :slight_smile:

Aduce putin a Github, tema dark :slight_smile:

404 Not Found?

Fixed cu redirect. L-am pus pe ui.glass/generator.