2

Problem Statement:

Hi, I want to fade out the div and it's contents from the left and right edge using pure CSS. Currently I'm able to achieve this based on an answer to a question on stack overflow.

enter image description here

Code:

   .container {
      height: 234px;
      width: 234px;
      overflow: scroll;

      mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
      -webkit-mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
    }

    .container::-webkit-scrollbar {
      display: none;
    }
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Impedit dolorem libero, dolor,
      fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
      Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Impedit dolorem
      libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
      autem fugiat! Dicta eius repellendus totam qui maiores odio a!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a!
    </p>
  </div>

How can I do make the linear gradient make left and right edges fade instead of top and bottom?

Also: This syntax is pretty neat but I fail to understand that how the args passed to linear-gradient are able to specify to fade the container only from top and bottom, and leave the rest as it is. In short, we have not specified any directions something like to-top and to-bottom so how's this actually working?

NOTE: I know this question is a duplicate of this. But the answer specified on the question does not solve my use case, as it's not fading out the inner content of the div.

Thanks! :)

Vinay Sharma
  • 3,291
  • 4
  • 30
  • 66
  • Pur the text in a p, then put the p inside a div with “width:tot px; position: relative”, and position the div::after and div::before with “content’ ’; position:absolute; top/bottom:0px; left:0 right:0” and then add a shadow to those (sorry I’m on my phone so I can’t make a rigorous answer) – Alberto Sinigaglia Jul 18 '20 at 11:55
  • you could have asked here: https://stackoverflow.com/questions/62678236/css-how-to-fade-text-from-top-and-bottom .. you were already getting answers there – Temani Afif Jul 18 '20 at 12:10
  • I don't want to use after and before selectors. – Vinay Sharma Jul 18 '20 at 12:10
  • @TemaniAfif yes, I could've but then, I might have to edit question and stuff. Edited questions receive less audience as compared to new one. Correct me, if I my thinking is wrong :) – Vinay Sharma Jul 18 '20 at 12:12
  • no need to edit the question, you ask the person who answered. You didn't even comment on my answer that I can easily make it left to right in 2 seconds – Temani Afif Jul 18 '20 at 12:22

2 Answers2

2

The default of linear gradients run from top to bottom. So, you need to use to left or to right with transparent. To make it more clear you have to reduce transparency. The transition is made between two-color or more which creates a band of colors that progress in a straight line. See here.

.container {
      height: 234px;
      width: 234px;
      overflow: scroll;

      mask-image: linear-gradient(transparent,
          black 20%,
          black 80%,
          transparent 100%);
      -webkit-mask-image: linear-gradient( to right,transparent,
          black 20%,
          black 80%,
          transparent 100%);
          
    }

    .container::-webkit-scrollbar {
      display: none;
    }


 
<div class="container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Impedit dolorem libero, dolor,
      fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
      Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Impedit dolorem
      libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
      autem fugiat! Dicta eius repellendus totam qui maiores odio a!
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
      dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
      perferendis dolore autem fugiat! Dicta eius repellendus totam
      qui maiores odio a! Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
      rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
      repellendus totam qui maiores odio a!
    </p>
  </div>
I_Al-thamary
  • 3,385
  • 2
  • 24
  • 37
  • Hey, that works perfect! Can you please me with the syntax as asked in **Also** section in my question? :) – Vinay Sharma Jul 18 '20 at 12:47
  • @VinaySharma see this https://www.webdesignerdepot.com/2010/11/adding-transparencies-and-gradients-with-css/ – I_Al-thamary Jul 18 '20 at 13:29
  • I meant what're these arguments supposed to mean: `transparent, black 40%, black 60%, transparent 100%`. How do they specify to fade only top and bottom, and why's the percentage kept different for them? – Vinay Sharma Jul 18 '20 at 13:48
  • @VinaySharma, it is to specify how transparent you need for the color and as you change it, you will get a different degree of transparency. See the links that I provide. – I_Al-thamary Jul 18 '20 at 13:57
  • I read the article but it's about something related to hex codes and stuff. It doesn’t really explain the use of transparent attribute in linear-gradient and the reason for different percentages. – Vinay Sharma Jul 18 '20 at 14:46
  • @VinaySharma what I need to tell you is how the transition can be done between the colors and this explains the transparency. – I_Al-thamary Jul 19 '20 at 04:20
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218128/discussion-between-vinay-sharma-and-i-thamary). – Vinay Sharma Jul 19 '20 at 07:04
1

here is the code. I put justify so you can see it better. Here is the example

  .container {
  width: 234px;
  text-align: justify;
  mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent, black 40%, black 60%, transparent 100%);
<div class="container">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo
    nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem
    fugiat! Dicta eius repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores
    odio a! Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius repellendus totam qui maiores odio a!
  </p>
</div>

If you need less strong version of the fade:

<style>
.container {
    width: 234px;
    text-align: justify;
    mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    -webkit-mask-image: linear-gradient(to left,#00000030, black 20%, black 80%, #00000030 100%);
    }
</style>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Marko Ilić
  • 43
  • 1
  • 1
  • 5
  • Hey, that works perfect! Can you please me with the syntax as asked in **Also** section in my question? :) – Vinay Sharma Jul 18 '20 at 12:47
  • Default is top to bottom. Please upvote an answer :) thanks – Marko Ilić Jul 18 '20 at 13:45
  • I know default is top to bottom. I meant what're these arguments supposed to mean: `transparent, black 40%, black 60%, transparent 100%`. How do they specify to fade only top and bottom, and why's the percentage kept different for them? – Vinay Sharma Jul 18 '20 at 13:48
  • @VinaySharma maybe it is about time to get familiar with specification from rules you want to use, MDN makes it easier than W3C most of the time . linear-gradients ? see : https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#:~:text=A%20linear%20gradient%20is%20defined%20by%20an%20axis%E2%80%94the,gradient%20line%20%E2%80%94and%20two%20or%20more%20color-stop%20points. / mask ?https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image – G-Cyrillus Jul 18 '20 at 21:29