Streaming live at 10am (PST)

Customizing image sizes to disregard shadow


#1

Hi, I am using PNGs that I created with shadows. Webflow/CSS is taking the shadow into account when determining size, but I’d like to size the image without regard for the shadow. I can’t seem to solve it with adjusting paddings and/or margins at all.

See the app screenshots in the 3rd section of my site. :pray:


Here is my site Read-Only: https://preview.webflow.com/preview/portfolio-dbe333?utm_source=portfolio-dbe333&preview=d891f23cabf1122d897d4b7b1add32c6


#2

If the images are square you should use CSS shadows, if they’re rounded squares, same appies, you’ll have to carefully craft your shapes though.

But normally you should be able to address part of the issue using negative margins.


#3

You can export your app preview images as a separate images and apply CSS shadow to them. I think it is better approach than just placing one big image. You can also apply interactions or animations to them later if you wish.


#4

Legend! Thanks man. Yea I feared that I’d have to recreate the images without shadows but the one in question is an edge case because it combines 3 images with a shadow on each.


#5

Legend! Will do, thanks for the tip. Vincent alluded to same thing