search

amitmerchant1990 / amitmerchant-dot-com-comments

1 stars 0 forks source link

fading-content-using-transparent-gradients-in-css/ #109

Open utterances-bot opened 10 months ago

utterances-bot commented 10 months ago

Fading content using transparent gradient in CSS — Amit Merchant — A blog on PHP, JavaScript, and more

So, I was checking out this trunk.io website recently and while the entire website is a masterpiece in itself, there’s one thing that caught my attention.

https://www.amitmerchant.com/fading-content-using-transparent-gradients-in-css/

He110te4m commented 10 months ago

You can try using border-image. The implementation is simpler and requires no additional elements.

https://codepen.io/t_afif/pen/vYbdVjb

This is where the example comes from: https://www.smashingmagazine.com/2024/01/css-border-image-property/

Rominou34 commented 10 months ago

A better solution, in my opinion, is to use a gradient as a mask-image, so it will not be a gradient that will mask the content, but the content itself which will have a gradient, allowing it to work if the background is something other than a flat color.

Here is an example, forking your original codepen.

It is a very powerful property, I have used it some times and it allows to make some beautiful layouts.

jcubic commented 9 months ago

I used the same with pseudo elements, but you need to use pointer-events: none to enable selection, which was mention on Polypane article as downside of your solution.