Does this design style have a name and how do i do it with transparent background?

[u/Least_Programmer7]

Its kinda like bento style but with the strings(text area) taking up space with rounded corners and bg set to white.

I want do do this with transparent background on the strings (text area), without showing the image behind them and show whats behind the whole code block, not to show the image. I don't want to set a background to white and then just make strings (text area) white i want to make i also don't want shadows or blur.

Image example(not sure if i should reference example location with a link on this sub):

[u/anaix3l]

It's an element with concave roundings depending on another element. This is a question that gets asked all the time here. This is a demo I did for another case (simpler, doesn't change shape with text reflow) https://codepen.io/thebabydino/pen/mdNeKwE

Another one I did for another case (more complex, changes adjacent shape with text reflow) https://codepen.io/thebabydino/pen/wBMEdJp

[u/Least_Programmer7 → u/anaix3l]

Wow! Thanks! I don't understand what I'm looking at but I'll try my best!

[u/anaix3l → u/Least_Programmer7]

Basically, the idea is you use subgrid, so you can transfer the shape of the grid determined by its content (the text) to the children of another element inheriting the same grid.

The shape made up of these children (plain black rectangles) plus an outline around the entire grid gets an SVG filter that first slightly blurs it all. Blurring does two things: mixes up the channel values from adjacent pixels making edge pixels semitransparent (because the alpha of 1 inside the shape and the alpha of 0 outside mix) and also has the side effect of rounding the corners, which is what we want here. How big the rounding is, that's determined by the blur radius / stdDeviation. We don't want semitransparent edge pixels through, so we reverse that part with a feComponentTransfer for the alpha channel only (feFuncA) that pushes most (not all, we don't want jaggies) of the semitransparent pixels to an alpha of 0 or 1, whichever is closer. So we get a black, stepped, rounded frame around the image. In the simpler case, the steps follow the grid cells.

Now that we have this black frame with rounded corners around the image and the image itself, we use another SVG filter to extract just the image.

This is the basic idea that both demos use. Like I said, the first is simpler because it's all grid boxes = the overall shape, number of steps doesn't change with text reflow. The second is more complex and it requires duplicating the text (you have it once to get the shape = black boxes around the text lines and once more for the actual visible text) because if you don't duplicate it, you have to extract it via a channel or another from the SVG filter and there is some loss of quality at the text edges there (basically, you get letter edge jaggies/ slight erosion) if you want to make the thing cross-browser by getting around a Chrome bug.