How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?


Tags: html,css

Problem :

In the following fiddle I successfully have made the spotlight stay in the same place (horizontally centered) except for when my zoom factor is too large. In other words, when I zoom in my spot light does not stay in the center of the horizontal view port.

Please note the use of .spotlight-2:before to fill the left portion of the shadow on the viewport. This is what I needed to prevent non shaded region from appearing.

How do I make the spotlight stay in center horizontally and not shift to the right when zooming in closely in the browser?

Fiddle

https://jsfiddle.net/u0onf23y/

Resulting Output

https://jsfiddle.net/u0onf23y/embedded/result/

CSS

td .div{
  height: 400px;
}

.extend-full {
  padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px; }

    .spotlight-2{
        top: 0px;
        margin-left:-80px;
        float: left;
        display: block;
        background: radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -moz-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -webkit-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        background: -o-radial-gradient(10px 10px at 560px 400px, transparent 0, transparent 150px, rgba(0, 0, 0, 0.5) 160px);
        margin-left: 0px;
        height: 100%;
        position: fixed;
        width: 100%;
        min-width: 100vw;
        min-height: 100vh;
        z-index: 10;
      };
      position: absolute;
      width: 100%;
      z-index: 10; }

    .account-settings-confirm-container-overlay {
      z-index: 10;
      background-color: white !important;
      height: 99px;
      position: absolute;
      margin-top: 10px;
      width: 250px;
      font-size: 12px;
      box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); }
    .spotlight-2:before {
      content: "";
      position: absolute;
      display: block;   
      left: -100%;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.5);  
    }


Solution :

Try flexbox. See example fullpage http://codepen.io/rhroyston/full/qadGgd/

html, body {
  height: 100%;
  margin: 0;
}

#viewport{
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  
} 

.a{
  box-shadow: 0px 0px 5px grey inset;
    margin: auto;
    padding: 20px;
    background-color: #fefefe;
    border-radius: 50%;
}
<div id="viewport">
  <div class="box">
    <div class="a"></div>
  </div>
</div>


    CSS Howto..

    How to prevent page jump when using # href to swap gallery images using a div ID?

    how to give conditional comments in firefox for a single css style statement

    How to remove outline dotted border with using css

    How to create a button with overlapping Ribbon Shape in CSS?

    CSS, HTML issue. How would I get the main body of the document to be a certain way down from the top?

    Customizing Clockdown.js to Show only Minutes and Seconds

    How to use css control to focus on div background when href link clicked

    How do I set css using jQuery .css after a period of time?

    How to ease the whole css animation

    How to get and extract matched css rules on dom-node?

    How can I register a css page from an ascx control?

    Percentages in CSS: How are they calculated internally?

    How to keep an image and text (vmax font) aligned when resizing browser?

    How to create a pure css slideshow? [closed]

    Wordpress nav menu images not showing up in mobile safari

    How to change the CSS from the last child?

    How to make this styling with css

    How to float Dojo DropDownMenu over a table cell

    How do I achieve this animation using javascript/jquery? [closed]

    how to drag and drop a
    across the page

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How to position two divs horizontally within another div

    How do I move this label inside my textarea?

    How do I add an attribute to a specific CSS class?

    How do I add css to datepicker jQuery?

    How to I create two containers with different backgrounds? [duplicate]

    How to convert a xml element into url using css?

    how to organize all js, css, php and html code?

    How is table layout fixed rendered?

    How to put text and image in a same line?