Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

354K
active users

mastodon.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.0-nightly.2025-03-25

Ana Tudor 🐯

Want inline semitransparent text background with no overlap?

Here's how on @codepen
codepen.io/thebabydino/pen/gbO
(you can see the overlap problem and the desired result below)

The `filter` combines 2 `feColorMatrix` techniques:

1️⃣ using a channel as an alpha mask

2️⃣ solid fill

Screenshot showing the problem + the fix.
#CSS#SVG#filter
Feb 25, 2025, 01:04 PM·Public
4boosts·7favorites
Public
Ana Tudor 🐯

1⃣ using a channel as an alpha mask - the bottom row lets us choose which input channel is used for the output alpha; if we set one of the RGB channels (first 3 values) to 1 and zero all else on the last row, that channel is used as the alpha mask.

Here is the interactive demo illustrating this on @codepen
codepen.io/thebabydino/full/OJ

GIF
#CSS#SVG#filter
Public
Ana Tudor 🐯

2️⃣ solid fill - first three values on the last column are set to the desired RGB values (decimal representation of percentage RGB)

Interactive demo on @codepen
codepen.io/thebabydino/full/LY

mastodon.social/@anatudor/1121

Screenshot of the demo, with the feColorMatrix primitive using the values from an input[type=color] (which are also displayed in the hex. RGB and percentage RGB formats), a button to copy the SVG filter to clipboard, a visual test area and options to select what the filter gets applied on (text + emojis or a CSS gradient or a .png with transparency or a fully opaque .jpg).
#SVG#filter#css
Public
Ana Tudor 🐯

@patrick_h_lauke Wait, that's a slightly different problem and doesn't even require an SVG filter (like the semi-transparency overlap does). Here's a fork codepen.io/thebabydino/pen/ogN

codepen.ioSetting background to always be in the back...
Public
Patrick H. Lauke

@anatudor blend mode works in that case against white page background, but it's not quite a general approach for varying page backgrounds etc. just after some way of "merging" all backgrounds together as one unit there that sits behind all the text (and can then be opaque, or transparent, or whatever really). but yeah, can hack it for very specific controlled uses, sure...

Public *
Ana Tudor 🐯

@patrick_h_lauke You don't need a white page background. Refresh to see. In general, it works for any text that's super close to either white or black, regardless of the page backdrop. And with the SVG filter method I'm using in my transparency overlap demo, it can be made to work for any text/ highlight combo, like blue text + yellow highlight.

Public
Amelia Bellamy-Royds

@anatudor Probably worth a comment somewhere that your demo forces pure white text on a black background color, since you're setting color in the filter & using input color to distinguish text vs background.

I'd instead use feComponentTransfer on the alpha channel to normalize the semi-transparent background sections while preserving the opaque text regardless of color:

codepen.io/AmeliaBR/pen/XJWjEm

Only a little annoying because of the component transfer syntax (explained in the pen description).

Screenshot of the updated demo result, now with light yellow text on a semi-transparent purple-blue background. The text background is still a highlight around individual lines of text, not a rectangular block for the paragraph. In the problem example at the top, the highlight gets dark where the background from successive lines overlaps. In the example labelled SVG filter fix #2, the background is even. The page background is a light-coloured but busy image of a room.
Public
Amelia Bellamy-Royds

@anatudor Aside: It's been a while since I've played with SVG filters, and the definitions in the spec (drafts.fxtf.org/filter-effects) were making my head spin.

Then I remembered, I wrote a whole book on SVG with a chapter on filters, I'll go look up what I said! Except, I didn't actually discuss feComponentTransfer in the book (😭).

But, my SVG elements & attributes reference page was enough to help jog my memory: oreillymedia.github.io/Using_S

I used `table` not `discrete` to avoid harsh pixel aliasing.

Public
Ana Tudor 🐯

@AmeliaBR But not regardless of alpha. It still shows overlap if alpha is .75 and it breaks the text edges for an alpha of .25 :(

Public *
Amelia Bellamy-Royds

@anatudor Yeah, that's the annoying bit with the syntax. You need to adjust the number of repeats in the `tableValues` attribute to make sure it can cover closer-to-opaque levels.

I hadn't realized that less opaque backgrounds would result in more damage to the text anti-aliasing. But you could make *fewer* repeats in the table function for that.

Since the SVG code is being generated by a pre-processor anyway, I guess you could come up with a function for that? But it's definitely not optimal.

Public
Vesa Piittinen

@anatudor @codepen

Here is a fix to poor text selection color with the filter trick:

```css
/* inner span helps fix background-letter overlap */
span { isolation: isolate; }

::selection {
background: ;
color: ;
}
```

ExploreLive feeds
About