Kevin Powell - Community•2w ago

Transparency and overriding

I'm curious, if we have 3 elements on top of each other, lets say blue is the lowest (takes the full screen), orange is in the middle (also takes the full screen), and on the top is the square elememt (like 400x400px) that's transparent Can we do anything do make the square area show blue isntead of the orange? Aka somehow make the middle layer transparent from the square? Like piercing transparency? If that makes any sense? Otherwise if the box is transparent we will just see orange

11 Replies

ἔρως•2w ago

you probably will want to do that with a clip-path

CatypicalOP•2w ago

Oh wait can I use an image for pathing perhaps? If any more complex shape is possible?

ἔρως•2w ago

you can use svg paths

curiousmissfox•2w ago

Clip path or masks. In other situations blend modes can work but I don’t believe this example is one of them

CatypicalOP•2w ago

Aye so basically it cannot be done, it's fine tho thank ya : )

ἔρως•2w ago

it can, we just told you how

curiousmissfox•2w ago

It def can be done. Clip-path or masks. Sorry to be confusing, I just mentioned blend modes as they are good to know about but not applicable with the colours you described. Forget I mentioned blend modes though. Use masks or clip-path as epic suggested

MarkBoots•7d ago

as i read it OP wants to use an element to mask out a region of another element (so not a clippath or blendingmode) The only way i can think of is with a svg filter that removes a specific color (in my case black) where the square area is a child with that color https://codepen.io/MarkBoots/pen/yyOOMxG

Mark Boots

CodePen

Untitled

...

MarkBoots•7d ago

(full code, might delete pen later)

<div style="position: fixed; inset: 0; background-color: blue"></div>
<div style="position: fixed; inset: 0; background-color: orange">
  <div class="hole" style="width: 400px; height: 400px"></div>
</div>

<div style="position: fixed; inset: 0; background-color: blue"></div>
<div style="position: fixed; inset: 0; background-color: orange">
  <div class="hole" style="width: 400px; height: 400px"></div>
</div>

/* Apply filter to any element that has a .hole child */
*:has(>.hole) {
  /* ref: https://expensive.toys/blog/black-pixel-masking */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='remove-black' color-interpolation-filters='sRGB'><feColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -255 -255 -255 0 1' result='black-pixels'/><feMorphology in='black-pixels' operator='dilate' radius='0.5' result='smoothed'/><feComposite in='SourceGraphic' in2='smoothed' operator='out'/></filter></svg>#remove-black");
  > .hole {
    background: black;   
  }
}

/* Apply filter to any element that has a .hole child */
*:has(>.hole) {
  /* ref: https://expensive.toys/blog/black-pixel-masking */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='remove-black' color-interpolation-filters='sRGB'><feColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -255 -255 -255 0 1' result='black-pixels'/><feMorphology in='black-pixels' operator='dilate' radius='0.5' result='smoothed'/><feComposite in='SourceGraphic' in2='smoothed' operator='out'/></filter></svg>#remove-black");
  > .hole {
    background: black;   
  }
}

CatypicalOP•4d ago

God I was busy and forgor about this thread smh me Thank ya both kindly @MarkBoots and @curiousmissfox ❤️

CatypicalOP•4d ago

Whoever needs this, I'll just show here how resized elememts look so it's a bit clearer Awesome job by MarkBoots

Gaming

Programming

Transparency and overriding

Did you find this page helpful?