Hey everyone,
It’s time to give your app a CSS-Lift!
This plugin is meant to provide a curated content of CSS tools to elevate your app. Transform bubble elements into clay mockups, apply concepts of neumorphism, glassmorphism, skew, perspective, transform and other css styles/animations to lift your app. I will be adding more content as we go and based on interest. You can get creative with the tools in this plugin.
Plugin Demo: https://equina-playground.bubbleapps.io/css-lift
Plugin Page: CSS-Lift Plugin | Bubble
Enjoy. Let me know if you have any questions while integrating these snippets into your apps.
Muneer
5 Likes
Hello!
I hope all is well. Firstly, amazing job! I have to say I am very impressed with this plugin and I’m strongly considering using it, But I have a question.
I’m trying to experiment with a new type of layout for my website. I want to do something like a Prism. I am thinking I want to approach this by taking the group element and changing its dimensions from a normal square/rectangle to a triangle. I want to use groups because I want to put other things inside the group and have the option to initiate workflows like “when this group is clicked” or something like that.
My question is can this plugin allow me to style groups to be triangles + glass effect?
Thank you
Hello again, I decided to purchase the app. I got too excited.
Its pretty cool! Might I offer a few suggestions/ask some questions?
-
It seems that when I add effects to an element, like glass, it immediately makes the element white glass. I was wondering if there is a way to keep the color of the element when I apply such effects.
-
I’m not entirely sure how to add multiple effects to one element, like for example glass + perspective. I copy pasted it the way you wrote it, and it doesnt seem to work with or without the hashtags. Can you tell me what I’m doing wrong?
-
The description of your app implied, at least to me, that I would be able to get creative and mix and match effects in any way that I wanted, but I cant seem to figure this out.
Also, I suppose its not really possible to use your app to make different sized triangles?
All in all great plugin. I’m looking forward to if there will be more updates, etc. More capabilities.
Thank you.
Hi,
Thanks for purchasing the plugin and feedback.
-
I just updated the plugin to include the effect “flexibleglass”. This should inherit your element color but you will need to adjust your color transparency to see the glass effect. You can see this in the demo page under glass morphism
-
Use multiple groups. If you take a look at the editor for the combination example #glass + #perspective, you will see the outer group and inner group with different id attributes
-
Same as #2…using id attributes of different effects in nested groups is how to do it in current version. May look into other ways for the future to offer more flexibility
For the prism/triangle, I’ll work on adding some square to triangle effects, but can you share an image/diagram of what you want to achieve.
I do plan on doing more work on this plugin and open up some more to allow more customization. Don’t have an ETA on when I’ll get to that. In meantime, happy to update effects case by case like today.
Muneer
1 Like
Oh wow! That’s amazing!
Thank you so much. I truly appreciate the hard work.
Thanks for explaining to me how to use the effect. As for the prism triangle thing, I dont have a specific design/layout in mind, but my idea is inspired by the opening to Marvel’s What If show on Disney Plus.
My goal is to string together a few triangular groups in which I can fit elements inside of them and have them maintain their responsiveness on across devices. Your glass, perspective and transformation effect are great for these, although I’d have to understand how to mix and match.
Here are some screenshots of what I may try to attempt.
Thank you much for updating the plugin!
Thanks for the information. I’ll see what I can add.
1 Like
Thank you. I appreciate it.
Hello again,
I was wondering if you could help me with something else. The “transform1” attribute seems apply a white border around an element, and the “transform3” has a sorta shadow effect and I cannot seem to figure out how to remove it. Is this just part of the effect or is this something I can control? I dont mind it for some elements, but I’d like to get creative with others. Just wondering.
Thank you
hi,
Yes, like the original glass effect, there was a preset design. Plan was always to expand the plugin based on interest. I’ll work on opening up more effects to only include the core effect and not other element design attributes like border, shadow, etc.
Ah I see.
Thanks again. I hope more people start using this plugin. I’ll promote it whenever appropriate if that helps lol
1 Like
