box-shadow pick up the four corners of the image

Asked

Viewed 466 times

6

Can anyone tell me how I leave the box-shadow in the same tone as the right and the top on the left and the bottom? http://prntscr.com/j3lwl7

inserir a descrição da imagem aqui

HTML:

<div id="wrapper_login" class="fixed"></div>

CSS:

<style type="text/css">
body {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    background: url(../images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.fixed {
     position: fixed;
}
#wrapper_login {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    box-shadow: inset -120px 120px 120px #000;
}
</style>
css

2 answers

6

What happens is that the first two values of the Box-Shadown represent the axis X and Y

/* offset-x | offset-y | blur-radius | color */
box-shadow: -120px 120px 120px #000;

So since you want the shadow to grow inward in all directions equally, you should not move the horizontal and vertical axes (-120px 120px), just keep them with the valor 0, and you work with just the Blur which is the third value. box-shadow: inset 0 0 120px #000

See below for your code with X and Y in the 0

body {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    background: url(http://placecage.com/510/380) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    margin:0;
}
.fixed {
     position: fixed;
}
#wrapper_login {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    box-shadow: inset 0 0 120px #000;
}
<div id="wrapper_login" class="fixed"></div>

4


Complementing the answer of colleague @hugocsl, has a fourth parameter besides Blur, which may be interesting for your case. It says how much the shadow will "advance" before beginning the transition of the blur, definitely leaving solid (or with the initial transparency) the color up to that point.

For comparison purposes I used exactly the same code of the colleague, but I added the fourth parameter (I exaggerated a little for you to see the difference), and decreases the Blur a little:

body {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 2px;
    background: url(http://placecage.com/510/380) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    margin:0;
}
.fixed {
     position: fixed;
}
#wrapper_login {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    box-shadow: inset 0 0 30px 50px #000;
    /* ajustar aqui o avanço ---^      */
}
<div id="wrapper_login" class="fixed"></div>

  • That’s right, that fourth figure is known as spread-radius

  • very good, just what I needed

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.