Hello, i want to make a transparent window with a notch that is completely transparent. But probably i’m doing it incorrectly can anyone assist me with this ?
You can’t actually punch a hole in a background as that is impossible. What you have to do is place elements outside of the transparent section and make them semi-transparent while leaving the original untouched and not overlapped.
One way to simplify this is to use box-shadow and make that spread out from the element until a whole outside section is coloured by the box-shadow thus leaving the inner section untouched.
It’s a bit magic-numberish because you cannot have a box-shadow that is wider than the element itself or the shadow moves away from the element and spoils the effect.
Here is a codepen showing the technique in action.
Another way to accomplish what you wanted would be to place the left and right top sections absolutely above the box thus leaving the inner section untouched.
Of course all these methods depend on what you expect to happen next and how this will be used.
Here’s a similar one that doesn’t need media queries but needs a little extra html.
You can make holes in the background using circular linear gradients but is similar to the technique with box-shadow in that you colour outside the circle. However its more awkward to get right than the methods shown above.
Well thanks it kinda works but what if i want to have a border around that ? following down the notch but not going above it. then what ? also why not use tables ? this way much simpler why tables ar no longer used and what do you recommend instead of that ?
Yeah that is what i’m looking for thank you! But what i can do if i want to make the border white also same for the background but instead background will have opacity and the border will not. what do you will recommend then ?
As you keep moving the goalposts, I would recommend that
you use an image edtor - I used “PhotoShop” - and then
learn and practice the creation of images to meet your ever
changing requirements.
