Today I Learned

10 posts by arkadiuszjanik

Box-shadow vs. drop-shadow from filters

When using box-shadow on an image with transparent background like png, the alpha channel gets neglected and the shadow is applied to the boundaries of the image, eg. box-shadow: 8px 16px 24px rgba(29,35,65,0.4). With CSS filters, like filter: drop-shadow(8px 16px 24px rgba(29,35,65,0.4)) the shadow is coming from the opaque sections of the image. You probably know that already.

shadows

Turns out the drop-shadow works the same way on background images. You can apply that effect either on the tag with the background image, or even the whole wrapper to get the same shadow from the text, inline svg icons, images and backgrounds.

backgrounds

Don't hide images with display: none

Images or wrapper elements that have display: none set, will still get loaded. So if you want to eg. load a different image for desktop and mobile, you can either:

  • use display: none, but with the loading="lazy" parameter set on img. Currently works on Firefox and Chromium
  • or use picture element with source. Over 95% support with a fallback to IE11 (just the img will be loaded.

See the example implementation of the 2 methods on Codepen.