#inset — Public Fediverse posts

What do you say to #encourage an #actor?

https://actingmagazine.com/2025/08/what-do-you-say-to-encourage-an-actor/

#acting #inset #onstage

Top layer has all 3 RGB channels 0 in this case ⇒ black inner shadow.

We paint it orangey using feColorMatrix as detailed here https://mastodon.social/@anatudor/112157559510002242

Finally, we put it on top of SourceGraphic (bottom layer in2 input). This is done with the default (normal) mode for feBlend.

#svg #filter #svgFilter #blending #compositing #blendMode #alpha #inset #shadow #css #code #coding #web #dev #webDev #frontend #webDevelopment

While I've seen the rare #SVG solution among the SO answers, I found those filters to be too complicated. So here's a much simpler SVG version, step by step 👆

Live demo https://codepen.io/thebabydino/pen/gOBxmOZ also for this week's #CodePenChallenge

No wrapper, no losing right click menu on img if not setting `pointer-events: none` on element on top of img in z order.

#CodePen #css #filter #svgFilter #shadow #inset #code #coding #frontend #web #dev #webDevelopment #webDev

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

#tinySVGtip How do you create an *inset* shadow on an `img` element?

You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

SVG filters to the rescue for an elegant solution!

✨ offset & blur image
✨ subtract it out of original image alpha ⇒ get black inner shadow
✨ paint it 🍊
✨ place it on top of img

#SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment

Last day of half term is an INSET. Really? It has a 30 min break, an hour lunch and hour "quiz"... Why not just start at 8 and go home at 1. I do not underatand this management system at all. I also don't even know what #INSET stands for! Haha. #teaching #InternationalSchool @edutooters

Global News BC: Associate of slain B.C. Sikh leader says he was also warned of threat to his life https://globalnews.ca/news/9992498/nijjar-associate-threat-warning/ #globalnews #britishcolumbia #news #GuruNanakSikhGurdwara #HardeepSinghNijjar #GurmeetSinghToor #Assassination #Nijjarkilling #DeathThreat #dutytowarn #Nijjar #Threat #Crime #World #India #INSET #Toor

Global News BC: Victim stabbed by alleged ISIS supporter aboard B.C. bus says attack was unprovoked https://globalnews.ca/news/9601866/victim-stabbed-alleged-isis-supporter-attack-unprovoked/ #globalnews #britishcolumbia #news #Surreybusattackvictim #Surreyterroristattack #RCMPnationalsecurity #VictimsofTerrorism #Sureybusstabbing #Canadaterrorism #SurreyBusAttack #AbdulAzizKawam #CanadianISIS #ISISvictims #Canada #Crime #INSET

Global News BC: Weekend knife attack on B.C. bus was terrorism, RCMP alleges https://globalnews.ca/news/9597664/knife-attack-surrey-bc-transit-bus-terrorism-rcmp-inset-abdul-aziz-kawam/ #globalnews #britishcolumbia #news #TerroristactivityCanada #canadaterroristattack #Surreyterroristattack #BCbusattackterrorism #RCMPnationalsecurity #TerroristactivityBC #canadianterrorism #Surreyknifeattack #Canadaterrorism #SurreyBusAttack #AbdulAzizKawam #Canada #Crime #INSET

Do you need a keynote speaker for your event or #INSET day? We provide high-quality, academic talks on a range of issues related to #education #diversity and #curriculum. See our website for a full list of services and testimonials. diversehistory.co.uk #EduMastadon #UKEdChat :earth_americas: :progresspride: