CSS question in Rivers

[scripting]

I have an idea that will make items in rivers look better when they are longer than the space allowed.

Here's a screen shot of an item.

I'd like the text to gradually fade out as it approaches the bottom boundary.

You see this technique in various publishing sites, when they want you to sign up for a subscription to see the text. It just fades out as you get to the bottom.

I asked ChatGPT for advice on how to do this, but my experiments haven't worked. The last attempt finally got to the point. I don't know how many lines there are but i do know the number of vertical pixels.

If you can help here, I suggest creating a news product, following the pattern in the previous issue here and use the CSS section the tweak the CSS in the river.

If this doesn't make sense, that's ok, I can use this writeup to ask for help from others. :-)

[fmfernandes]

I believe I somewhat achieved that "vanishing" effect. Check out my news product: https://a8c.feedland.org/newsproduct?username=fernando.

It's worth noting that I didn't follow exactly the instructions outlined here to edit the CSS, instead, I added the CSS code directly in the CSS field in the Settings window.

[fmfernandes]

Here's the snippet I used:

.divRiverItemBody.bodyTruncated .divTitledItemBody {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 100%);
  mask-image: linear-gradient(to bottom, black, transparent 100%); 
  height: 150px;
}

height is the container height you mentioned is a known value for ChatGPT.

[scripting]

Will report back on how it works with demo if it does. Thanks! :-)

[scripting]

It works.

https://wpprojects.feedland.dev/

[scripting]

Next step, I'm going to fix the way the CSS works in FeedLand to make this easier to play with.

I think in this context I want the default height to be more than 150px. It has to be something that can be changed in the CSS part of a News Product spec.

[scripting]

Leaving this open, for continued development...

[scripting]

Good morning!

So I've done two things to start.

1. I've changed the maxBodyTextHeight from 150 to 200 globally.
2. I've included the CSS you provided in the template for wpprojects.feedland.dev.

It's beyond my ability to tweak the CSS to work the way I want it to.

I only want the last three lines to fade out. The line before the fading starts should be normal, and the last line should be 2/3 faded. It should still be readable if you squint. The idea is to not have the border be so abrupt, esp since it often comes in the middle of a line.

What would be even better is if we could figure out how to have it not show the last partial line at all, but I couldn't begin to figure out how that would work when I initially did this design over a year ago..

Anyway, now I'm probably going to spend the rest of the day working on websockets stuff. ;-)