Hi, guys I found that CSS can create glassmorphism, which is cool, as you can set up everything from exact color to opacity, size, outline. And I assume + performant and less work than loading Figma or any tool to create just a rectangle in glassmorphism until itâs right. Especially if you have no skills whatsoever as graphist/designer.
Thus said âŚ
Can I achieve this?
This is a simulation with hint component (which I love it really looks like glassmorphism already) and spaces.
My idea is to design a glassmorph door that covers almost the whole background over a background image (OK) and a black background (OK), with an impression the contour is glowing (well, like a door at night, with the light on to show there must be indoor âpresenceâ. Or a magic box).
I found this
THIS IS THE RESULT I WANT for the door (opacity, blur, color)
And my capture below simulating sth close (yeah, not sure the Indiana Jones hat can manage to go over the door) from the default hint component (so no opacity, no blur, no custom color) to give you an idea of how it covers the screen.
I know this is Madness, but there must be Method in it (From a crazy Brit guy called William S.)
What say you?
Doable? Waste of Time?
Thks anyway
Glassmorphism with CSS. I have never heard of this, itâs fun!
For experimental purposes and to push the current limits of Glide: why not use CSS and experiment as much as possible! Whatâs being done in Glide with css is impressive.
To build an app for work that brings tremendous value to a business: I think CSS might be unnecessary and it might even become a distraction to the builder more than anything.
Thks, ThinhDinh .
I want anything that displays like a rectangle
that covers almost full screen
in glassmorphism
with configurable color, size, blur, opacity, border color
bonus: glowing
in background
It does not matter whether itâs a hack of a hint, a button, any object.
I donât know if No Code are supposed to allow various shapes to customize UI/UX, but it would open many possibilities.
If not, Iâll have to create a background image, which is the hard way, less smart, less flexible, longer to load?
Thks, Nat .
Well, Iâm no designer, but Design trends matter to keep pace with userâs affordance requirements, so customersâ as well. Theyâre no longer impressed by mobile apps. They know how to use them. If your app has great features but poor and âinterchangeableâ look, it may seem like a comfort zone to make it âuser-friendlyâ with very standard UI, but âle revers de la mĂŠdailleâ can also to lose usersâ interest.
Especially if I target educational, recreative purposes.
Dark mode, glassmorphism, aurora borealis / northern light gradients belong to the trends that agree with the personality I want to express in my apps.
For the humanity, the privileged intimacy they inspire.
So the essence of what triggers customer to CTA in the 1st place: primary emotions.
All the features are for the brain.
All the pleasure is for the heart.
And the heart of any user, customer, is still: human.
Thks, Lucas
Yes, Please! @Pedroydzito
From my educated guess, maybe you can only hack with CSS only existing objects like components, not to introduce a shape like a rectangle out of nowhere.
So maybe it can be a hack of the hint, the button component that can be in the background and accept many or all of the CSS.
Maybe we have to use an image after all. But maybe it could be just a tiny blank image to get css sth to target?
Anyway, enjoy!
Thks, Pedro!
May all the Muses amuse you!
Should you come up with sth else, please let us know.
I wish you the best tests.
If itâs a no go, well, so be it
Bonne chance! Good Luck!
Whohoho! The whole thread looks very promising, indeed.
Iâve copied the @Jeff_Hager + @Manu.n + You @Robert_Petitto CSS and I already got a box as bcg. There should be nothing to stop me from getting what I want. Even the border, the radius, the bonus shadow, and who knows, the glowing? Merci, Robert ! (and all the guys in the topic).
Canât wait to work on this.
On 1st try, my floating button completely disappears. Ouch that hurts! I hope itâs not incompatible.
Oh LOL, @Darren_Alderman, so you have to hard code the floating to help it float above the crowd?
How Funny!
Itâs like telling so what s.heâs expected to do when itâs in his/her job description!
Thks!
Ach, too bad I canât work on it now
Argh, the video is too cropped, you donât see the light under the door!
You have to move you mouse on the video to unhide the bottom.
The video quality is not so good in Loom. Can I enhance it?
I found that CSS can create glassmorphism, which is cool, as you can set up everything from exact color to opacity, size, outline. And I assume + performant and less work than loading Figma or any tool to create just a rectangle in glassmorphism until itâs right. Especially if you have no skills whatsoever as graphist/designer.
âŚ
(From a crazy Brit guy called William S.)
.
Merci, Robert ! (and all the guys in the topic).
Thank U! Lucky me to have you all!