I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving this desired effect? My goal is to have the highlighted area fully clear and interactive, and the surrounding areas dimmed.
It's worth mentioning that I am seeking a solution that steers clear of JavaScript and intricate HTML structures if feasible, but also should be compatible with the newest browser versions.
Imagining something akin to this:
https://i.sstatic.net/lDnUG.png
Can CSS alone accomplish something like this, for instance:
/* An overlay spanning the entire viewport */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
}
I initially experimented with mask CSS properties for defining the selection area, although unsure if it's considered the optimal method.
Please note: The rectangle should be interactive (movable, resizable).
Update: A potential solution might involve utilizing box-shadow for the dimming effect outside the selected area.
.my-rectangle {
position: absolute;
z-index: 10001;
border: 2px solid rgba(255, 255, 255, 0.6);
background-color: rgba(102, 179, 255, 0.2);
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); /* Dimmed background outside the rectangle */
}