Dim entire screen except a fixed area?

html

responsive-design

css

javascript

byNikita Barsukov·Oct 2, 2024

To accomplish this task, you can utilize a div with a box-shadow to create a highlighting effect on a specified area, while keeping the rest of the screen dimmed. Here's a quick and dirty solution using CSS and HTML:

/* The incredible disappearing div */
.dim-screen {
  position: fixed;
  top: 0;   /* Or as Captain Picard would say, "Make it so." */
  left: 0;  /* Not right, mind you, but left */
  width: 100%; /* An offer you can't refuse: full coverage */
  height: 100%; /* No half measures here */
  background: rgba(0, 0, 0, 0.7); /* 30% opacity. Just the right amount of shady */
  z-index: 1;
  pointer-events: none; /* Like your mom, it cares but doesn't interfere */
}

/* The div that dared to stand out */
.highlight-area {
  position: fixed;
  top: 100px; /* Start me up... */
  left: 100px; /* It ain't right, but it is okay */
  width: 300px; /* 'Cause size matters */
  height: 300px; /* Make it tall and make it count */
  background: #FFF; /* Wouldn't it be nice - Beach Boys */
  z-index: 2; 
}

The corresponding HTML tags simply apply this styling:

<!-- Meet your masters -->
<div class="dim-screen"></div>
<div class="highlight-area">Visible content</div>

Just adjust the dimensions as per your needs, and you have a straightforward and effective solution in place.

How does it work?

Option 1: Harnessing the power of `box-shadow`

The trick here builds upon a pretty neat CSS property: box-shadow. When applied to a singular div, it not only takes care of tenacious layers, but can also help streamline your page's performance:

/* This div is not just a div, it's a div with a vision */
.emphasized-area {
  position: fixed;
  width: 300px; /* As wide as your imagination can stretch */
  height: 300px; /* Stand tall, stand firm */
  top: 100px; /* Atlas, at your service */
  left: 100px; /* Eastward ho! */
  box-shadow: 0 0 0 200vmax rgba(0,0,0,0.7); /* Shadow, my loyal follower */
  pointer-events: none; /* Cant touch this - MC Hammer */
}

Option 2: Dynamic interaction with JavaScript

To infuse your website with a vibrant touch, slap on some JavaScript magic. Add functions that toggle the visibility and position of your overlay based on user interaction:

/* Match my level of extra: SHOW */
function showHighlight(x, y, width, height) {
  const highlightArea = document.querySelector('.highlight-area');
  highlightArea.style.top = `${y}px`; /* Science, meet arts */
  highlightArea.style.left = `${x}px`;
  highlightArea.style.width = `${width}px`;
  highlightArea.style.height = `${height}px`;
  highlightArea.style.display = 'block'; /* SHOWTIME! */
}

/* Hide and Seek, anyone? HIDE */
function hideHighlight() {
  const highlightArea = document.querySelector('.highlight-area');
  highlightArea.style.display = 'none'; /* Now you see me, now you don't */
}

Option 3: Backward compatibility

vmax and viewport units with calc() might not be supported by age-old browsers. For IE9+ support, switch up the fixed dimensions for dynamic sizes by using percentages or JavaScript polyfills.

More advanced and practical considerations

Option 1: SVG for diverse shapes

If your highlight area ain't no regular square or rectangle, consider SVG overlay with a cut-out hole of your desired shape:

<!-- Because circles are cool -->
<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="rgba(0,0,0,0.7)"/> <!-- The All-encompassing Rect -->
  <circle cx="250" cy="250" r="100" fill="transparent"/> <!-- The Standout Circle -->
</svg>

Ensure the SVG has pointer-events:none, allowing interactions with underlying elements.

Option 2: Cascading layers for interactive content

To create interactive tutorials, use a cascading layers approach that allows user interaction with content beneath the dimmed overlay. Does the trick every time!

Option 3: Responsive designs

Keep things snazzy and responsive by utilizing relative units like percentages or viewport units (whichever takes your fancy). This ensures a highlight area that adapts as per the screen size.

explain-codes / Html / Dim entire screen except a fixed area?

Linked

Outline radius?



Draw circle using CSS alone



Css Inset Borders



Border length smaller than div width?



Offsetting an HTML anchor to adjust for fixed header

