Ok, I'm fan of Glassmorphism in dark mode, any chance I can do this?

Hi, guys :cherry_blossom: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 :grin:
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

​/* From https://css.glass */
background: rgba(143, 96, 114, 0.14);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(143, 96, 114, 1);

THIS IS THE RESULT I WANT for the door (opacity, blur, color)
image

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 :wink: :skull:(From a crazy Brit guy called William S.)
What say you?
Doable? Waste of Time?
Thks anyway :cherry_blossom:

2 Likes

I’m not sure I understand this 100%, so you want a component that imitates a glass door that covers the whole screen?

1 Like

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.

1 Like

@Pedroydzito new challenge. Can you achieve it?

3 Likes

Maybe, i can try! :sunglasses:

3 Likes

Thks, ThinhDinh :slightly_smiling_face:.
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 :cherry_blossom::slightly_smiling_face:.
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 :cherry_blossom:
Yes, Please! @Pedroydzito :cherry_blossom::slightly_smiling_face:
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!

1 Like

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 :slightly_smiling_face:
Bonne chance! Good Luck!

You don’t necessarily have to restrict your self to existing objects, you can write HTML then customize it with CSS in the rich text component.

2 Likes

Seems like this should get you halfway there:

1 Like

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?
:purple_heart::cherry_blossom::heavy_check_mark: 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.

When I recently implemented these modals, I had the same issue. Managed to fix that with the following:

z-index:1 !important;
1 Like

Oh LOL, @Darren, so you have to hard code the floating to help it float above the crowd?
How Funny! :grinning_face_with_smiling_eyes:
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 :frowning:

That’s actually for the button which sits inside the modal. The z-index brings it to the front so it doesn’t get hidden underneath.

Can you see my loom? @ThinhDinh @Lucas_Pires @Robert_Petitto @Darren_Murphy @nathanaelb ?
Thks everybody! @Manu.n @Jeff_Hager (have I forgotten anyone?)

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?

6 Likes

Very nice, well done :+1:

1 Like

:star_struck::smiling_face_with_three_hearts::grin::yum::sparkles:

Well done!

1 Like

Gnaw :grin::cherry_blossom::heartpulse: Thank U! Lucky me to have you all!