Ana Tudor 🐯

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.

Mar 18 at 8:29pmWeb
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 threadMosenMar 19
@anatudor I’m a dumbass so I’d probably artificially inflate line-height
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
Show threadAmelia Bellamy-RoydsMar 19

This is a doozy folks!

One of those little design touches that looks like it should be an easy fix, but the generalized solution — to get this working for any colour combination, and to be able to set those colours in CSS stylesheets — is an absolute brain twister. Ana's going to take you on a tour of the possibilities & limitations of CSS & SVG filters.

(And even the final fix, while supported cross-browser, can chew up your CPU doing graphical rendering.)

@anatudor

https://frontendmasters.com/blog/overlapping-inline-backgrounds/

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 threadAmelia Bellamy-RoydsMar 19

I'd love to see some discussion about how we could incorporate better backgrounds for inline elements directly in CSS.

Could we have `box-decoration: merge` that paints the backgrounds on a multi-line inline element as one operation, after merging together?

Or for the issue of the background of one inline overlapping the text of the previous line, a property like `paint-order` to send them to the back?

Or `background-clip: line-boxes` for when the full block should have highlight?

@anatudor

Show threadZoltan HawrylukMar 19

@AmeliaBR I absolutely love Ana's article since doing this type of accessible design (i.e. promoting good color contrast no matter what the background image) while not having unintended overlaps has been tricky in the past. Thanks @anatudor !

(And yes -- it would be great if there was a native CSS solution ... but this'll do for now ... 🙂 )

Show threadPatrick H. LaukeMar 19
@AmeliaBR @anatudor as already mentioned in earlier chats...yes, have been pining for a general solution that doesn't require a PhD or a supercomputer ... https://codepen.io/patrickhlauke/pen/jOzJwvZ
Missing CSS feature - setting background to always be in the back

...

Show threadAna Tudor 🐯Mar 19
@patrick_h_lauke @AmeliaBR I would like to point out I don't have a PhD and my laptop is from 2006.