Does Unbounce support drop shadows?
Best answer by Zoe_Tattersall
View original
Drop Shadow?
Hi Ryan,
At this time you aren’t able to add a shadow natively in the app, but if you’re crafty with an image editing program (photoshop, pixlr) then you should be able to make this work. Essentially it would require you to make an appropriately sized drop shadow image in Photoshop (or another image editing program). All you would need to do is then upload that image to your Unbounce landing page and place it behind the text box to create the appearance of an outer glow.
As for the text shadow, you’ll need to add a bit of custom CSS in order to get this to work. Basically, drop the code below into your page CSS and replace the #lp-pom-text-248 with the appropriate property ID.
<br /><span>#lp-pom-text-248 { text-shadow: 1px 1px 1px #000; }<br /></span><span>Hi Ryan,
At this time you aren’t able to add a shadow natively in the app, but if you’re crafty with an image editing program (photoshop, pixlr) then you should be able to make this work. Essentially it would require you to make an appropriately sized drop shadow image in Photoshop (or another image editing program). All you would need to do is then upload that image to your Unbounce landing page and place it behind the text box to create the appearance of an outer glow.
As for the text shadow, you’ll need to add a bit of custom CSS in order to get this to work. Basically, drop the code below into your page CSS and replace the #lp-pom-text-248 with the appropriate property ID.
<style> <br /> #lp-pom-text-248 { text-shadow: 1px 1px 1px #000; } <br /> </style>
Hey! I know this is an old topic, but how can I implement drop shadow to buttons?
I tried following code, but didn’t work:
Thanks 🙂
Userlevel 6
+3
You were almost there! Try this –
<style>
#lp-pom-button-723:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); !important;}
#lp-pom-button-723:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); !important;}
#lp-pom-button-728:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); !important;}
</style>When I implement this code I only see the shadow when I hover on the button. How do I need to customize the code to see the shadow on the “up” and “active” states?
check this…css drop shadow tutorial
Reply
Log in to the Unbounce Community
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.