- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘Design’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi everyone!
I was wondering if someone could help me recreate the effect that you can see on this page: https://www.penguin.co.uk/search/?charset=UTF-8&q=
You can see that the book description goes on for much longer than is actually visible, but that at after certain point the text fades out. This point has a consistent length that is maintained while the screen increases/decreases in size.
Is it possible for me to do the same sort of thing on my website using CSS?
Thank you for your help,
Lola
Have you tried inspecting that page/area with the developer console? F12 in most browsers. You’ll be able to see exactly how they’ve done it and take your cues from there.
Off the top of my head (I’m on mobile), you could position a pseudo element at the bottom of the text container (higher z-index so it sits over the text), and give it a linear gradient, from transparent to whatever colour matches your background.
More info about pseudo elements https://css-tricks.com/almanac/selectors/a/after-and-before/ and linear gradients https://css-tricks.com/snippets/css/css-linear-gradient/
It’s a semi transparent image that’s been put over the text:
Edit – had not seen Beverleyh’s response. A gradient would be nicer indeed (although that’s not what is used on the reference site).