Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do i darken the whole page? ( html )

When i use an other div to do it, it will not affect other dom classes, so i have to modify each dom class when i want the whole page to get darker.

Is there a way to overlap the whole document with a gray transparent plane?

like image 758
Sahkan Avatar asked May 11 '15 06:05

Sahkan


People also ask

How do I darken the whole page in CSS?

You can achieve this effect by using only one CSS property: box-shadow . This works by specifying the spread-radius of the box-shadow . By increasing the spread, you increase the size of the box-shadow . The goal is to make it so big, that it covers the whole page.

How do I darken the background in HTML?

Method 1: Use “filter” Property to Darken Background Image in CSS. In CSS, the “filter” property is utilized to add graphical effects on HTML elements, especially on images. This property can also help in darkening the background image when its “brightness” value is added.

How do I dim a background color in CSS?

The opacity of the black gradient can be changed to control the amount of darkening. This can be used accordingly to darken the image as required. Example: Using an opacity of 0.5 of the background gradient to darken the image.


2 Answers

There is a codepen ilustrating your needs. (creating a dismissable popup and dimming the view)

HTML:

<div class="wrapper">
  <button class="btn btn-success dim">Dim the page!</button>
  <div class="dimmer">
    <span class="exit">&times;</span>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p>
  </div>
</div>

CSS:

.wrapper {
  padding: 2.5em;
  margin: 0 auto;
  width: 80%;
}

.dimmer {
  display: none;
    background: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.dim {
  display: block;
  margin: 2em auto;
  z-index: 200;
}

.exit {
  font-size: 100px;
  color: red;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  cursor: pointer;
}

Javascript:

$(function() {
  var dimmerButton = $('.dim');
  var dimmer = $('.dimmer');
  var exit = $('.exit');
  dimmerButton.on('click', function() {
    dimmer.show();
  });
  exit.on('click', function() {
    dimmer.hide();
  });
});

Note: The author of this is @srikarg

like image 97
George Netu Avatar answered Oct 20 '22 01:10

George Netu


You will need to show an overlay div

<div id="overlay"></div>

Make it position fixed

#overlay {
  background-color: rgba(0,0,0,0.5);
  position:fixed;
  left:0;
  top: 0;
  width:100%;
  height:100%;
}

and make it visible when you want to darken the page, here is how you do it

$(function(){
  //Am hiding the overlay after 2 sec
  $("#overlay").delay(3000).hide(200);
})
 #overlay {
      background-color: rgba(0,0,0,0.5);
      position:fixed;
      left:0;
      top: 0;
      width:100%;
      height:100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div id="overlay"></div>
  <h1>My Awesome Page</h1>
</body>
like image 43
Saqueib Avatar answered Oct 20 '22 01:10

Saqueib