Ana Tudor 🐯Mar 18

Hi, mastodon 🦣 I have a new article out!

A Deep Dive into the Inline Background Overlap Problem: https://frontendmasters.com/blog/overlapping-inline-backgrounds/

How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?

Answer in article, but think a bit about it first. 😼

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #blendMode #blending

A Deep Dive into the Inline Background Overlap Problem – Frontend Masters Blog

`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.

Show threadAna Tudor 🐯Mar 19

If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.

How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #blendMode #blending

Show threadMosen
@anatudor I’m a dumbass so I’d probably artificially inflate line-height
Mar 19 at 7:49amWeb
Show threadAna Tudor 🐯Mar 19
@mosen The overlap is desired, but not the increase in alpha.
Show threadMosenMar 19
@anatudor I’m happy to learn that’s why I follow you hehe