#boxshadow — Public Fediverse posts

Almost all solutions I've seen involve wrapping the image in a wrapper, then either moving it behind its parent or placing an absolutely positioned pseudo on top, such that another element/ pseudo on top gets the shadow.

This means an extra element and often losing right click menu, save for the rare cases when the element on top of the img in z order gets `pointer-events: none`.

#css #shadow #boxShadow #inset #code #coding #frontend #web #dev #webDev #webDevelopment #shadows

Per spec, #boxShadow is painted under the actual image when applied on an img elem https://w3.org/TR/css-backgrounds-3/#shadow-layers

But we often want #inset #shadows on img elements. This has caused headaches, has been the topic of countless articles & SO questions since box-shadow has been a thing!

🔗 https://trentwalton.com/2010/11/22/css-box-shadowinset/
🔗 https://www.schmengler-se.de/en/2014/12/css-inset-box-shadow-on-image/
🔗 https://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/

🔗 https://stackoverflow.com/search?q=inset+shadow+img

#css #code #coding #svg #filter #svgFilter #blur #blending #compositing #frontend #web #webDev #dev #webDevelopment