0

I would like to have transparency effect on element working on any background color. How to do that with pseudo-elements like :before and :after? I need this effect for scroll fade out effect. Code below does not work

Effect I would like to achieve (working on any background):

enter image description here

  <style>

    .faded {
      width: 100px;
      /* background: red;  should work with any background */
    }

    .faded::before {
      content: "''";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
      z-index: 1;
      -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 100%
      );
    }
  </style>
  
    <div class="faded">Blablabla babalbalbalba balblablablal</div>
Sheppard25
  • 493
  • 1
  • 7
  • 22
  • it is not a duplicate. Please reopen this question. Linked topic does not answer my question – Sheppard25 Apr 06 '23 at 21:35
  • If the duplicate does not answer your question perhaps you could augment your question with an example which uses the code given there - which appears at first glance to exactly answer your question. – A Haworth Apr 06 '23 at 22:16

1 Answers1

-2

Find "Update 03.2023" on this page How to fade the edge of a div with just CSS?

body {
    background: red;
  }

  .faded {
    width: 150px;
    height: 100px;
    overflow: auto;
    --mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) 40%,
        rgba(0, 0, 0, 0) 95%,
        rgba(0, 0, 0, 0) 0
      )
      100% 50% / 100% 100% repeat-x;

    -webkit-mask: var(--mask);
    mask: var(--mask);
  }
<div class="faded">
    1) Item 1 - Test<br />
    2) Item 2 - Test<br />
    3) Item 3 - Test<br />
    4) Item 4 - Test<br />
    5) Item 5 - Test<br />

    6) Item 6 - Test<br />
    7) Item 7 - Test<br />
    8) Item 8 - Test<br />
    9) Item 9 - Test<br />
    10) Item 10 - Test<br />

    11) Item 11 - Test<br />
    12) Item 12 - Test<br />
    13) Item 13 - Test<br />
    14) Item 14 - Test<br />
    15) Item 15 - Test<br />
  </div>
furashcka
  • 1
  • 1
  • This answer does not use pseudoelements. – Sheppard25 Apr 06 '23 at 21:19
  • I'm sorry, but use pseudo-elements with fade effect on any background not possible, why you need pseudo-elements? Maybe I can you help in you problem without pseudo-elements? – furashcka Apr 06 '23 at 21:46
  • beause I need to have container with position:fixed above element with mask. zIndexes are not working when mask is applied – Sheppard25 Apr 06 '23 at 22:00
  • Can you show your code? zIndexes must work when mask applied, I think when you use mask you have another problem in your project. https://codepen.io/furashcka/pen/mdzdGvm – furashcka Apr 06 '23 at 22:26
  • yes, please https://stackoverflow.com/questions/75954259/fixed-positioned-element-above-css-mask-image fixed-header needs to be inside – Sheppard25 Apr 06 '23 at 22:35