#tinysvgtip — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #tinysvgtip, aggregated by home.social.
-
#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
-
#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!
Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa
The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes
#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment