bubbleHacks

Share this post
How to add really cool shadows to your Bubble elements
bubblehacks.substack.com

How to add really cool shadows to your Bubble elements

Damian
Jun 21, 2022
1
1
Share this post
How to add really cool shadows to your Bubble elements
bubblehacks.substack.com

Here is a short issue on applying really cool shadows to your Bubble elements.

Creating cool shadow effects in Bubble is hard. At least if you rely on the standard Bubble editor. And usually, they end up looking, well, like you made them in Bubble. But the good news is that we can apply really cool shadows using a few lines of CSS. So, let’s go:

1. Install the Classify Plugin.

2. In your Bubble app, go to Settings / General and check ‘Expose the option to add an ID attribute to HTML elements’.

3. Put an HTML element somewhere on the page. If you want to be sure it does not interfere with your layout, just put it in a separate popup. Copy + Paste the following code into it.

<style>

.shadow6 {

box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;

}

</style>

4. Go to https://getcssscan.com/css-box-shadow-examples and find a shadow you like and click on it. This copies the respective CSS code to your clipboard. Use it to replace the box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px part in the code above. Make sure you keep the !important; at the end of the line.

In the element you want to apply the shadow to, add the following code to the ID Attribute field.

{addClass: "shadow6"}

That’s basically it. Go ahead and preview your page. You can also apply shadows using conditions (e.g. on hover or on click). See my setup here for how to do that (see the ID attributes and conditions on ‘Group Card cool shadow’).

Some useful stuff I came across

Twitter avatar for @DamianJanzi
Damian Janzi 🇺🇦 @DamianJanzi
Before writing a "single line" of #NoCode, be sure to ask yourself these 5 questions! 🧵👇
7:57 AM ∙ May 18, 2022
18Likes5Retweets
Twitter avatar for @DamianJanzi
Damian Janzi 🇺🇦 @DamianJanzi
bubbleHack of the week: You don't always need the API connector to make simple GET requests in @bubble. This (see pic below) is an API request using the UI Avatars API, made directly from a workflow
Image
12:06 PM ∙ May 17, 2022
41Likes3Retweets
Twitter avatar for @DamianJanzi
Damian Janzi 🇺🇦 @DamianJanzi
I am collecting a list of the best @bubble resources / plugins / templates / courses etc. What should not be missing?
4:39 PM ∙ May 16, 2022
50Likes4Retweets

That’s it. See you in two weeks.

Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io

Thanks for reading bubbleHacks! Subscribe for free to receive new posts and support my work.

1
Share this post
How to add really cool shadows to your Bubble elements
bubblehacks.substack.com
1 Comment
Romher Jude Quilantang
Sep 6, 2022Liked by Damian

pretty! thanks for this, damian!

Expand full comment
ReplyCollapse
TopNewCommunity

No posts

Ready for more?

© 2023 Damian Janzi
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing