1

So far as I can tell, the non-standard -webkit-mask-attachment CSS property was used to control how CSS masks attach to an element in the same way that the existent background-attachment property works on backgrounds. This seems exactly like what I need for a CSS trick, but -webkit-mask-attachment was never widely implemented and looks to be abandoned. Is there anything else I can use to approximate the effect - i.e., to have an element's mask image behave like a background with background-attachment: fixed?

The specific effect I'm going for is to have a paragraph with a text-shadow that's different than the actual text. Easy enough; see the code snippet. But I'd also like to make it so the alternate reflections are only visible in the center of the screen (the red line in the code snippet), and normal reflections are shown everywhere else.

In the code snippet you should be able to see what I'm going for; basically, I want version 1 to be displayed outside the red zone and version 2 to be displayed inside it.

This doesn't seem possible with any amount of z-index and mask-image tricks unless you have -webkit-mask-attachment: fixed or something like it, although I'm certainly open to suggestions.

I could probably do this with Javascript by manipulating mask-position every time the user scrolls, but that's really ugly and I worry that it would lag. I'm hoping for a pure CSS solution if any exists.

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

let showAlternate = false;

function swapOut() {
  if (!showAlternate) {
    $$(".alt-reflect").forEach(e => e.style.visibility = "visible");
    $$(".no-reflect").forEach(e => e.style.textShadow = "none");
    $("#thebutton").innerHTML = "This is version 2; click to swap";
  } else {
    $$(".alt-reflect").forEach(e => e.style.visibility = "hidden");
    $$(".no-reflect").forEach(e => e.style.textShadow = "25vw 0 4px black");
    $("#thebutton").innerHTML = "This is version 1; click to swap";
  }
  showAlternate = !showAlternate;
}
p {
  color: black;
  padding: 0 30vw;
  text-shadow: 25vw 0 4px black;
}

p.alt-reflect {
  margin: 0;
  position: absolute;
  color: transparent;
  text-shadow: 25vw 0 4px black;
  visibility: hidden;
}

#background {
  background: linear-gradient(to bottom, red, red) center/100% 20vh fixed no-repeat;
}
<button id="thebutton" onclick="swapOut()">This is version 1; click to swap</button>

<div id='background'>
  <p class='alt-reflect'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  <p class='no-reflect'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.fjdipwoiejfpwopwoeif jwpoeifjwpoefijwpoefijwepqoiew jpoeijfpqoiwefjpoqijfpqosidjfa
    pildfj;alkjbpoadnfs;dilfj; zlxkvbn;ozsdfhaposidfjao;dsklf</p>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
little dutch boy
  • 11
  • 3
  • 1
    Can you show a simpler example (probably a clear photo or a websit that you're trying to replicate if any) or clearly describe what you want to do? – Kevin M. Mansour Jun 12 '23 at 20:18
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Jun 12 '23 at 20:38
  • Sorry, couldn't find the code snippet button. Have some example code now that should make it clear what I'm going for. – little dutch boy Jun 12 '23 at 21:39

0 Answers0