CODEWITHSUNDEEP
htmlcss
Musixauce3000
Musixauce3000

Reputation: 559

Is there any way to grow a box shadow width independantly from height?

box-shadow: 0 0 0 10px; puts 5 pixels of all each side.

I have a centered div that spans the height of the view port styled with a box-shadow like this box-shadow: 0 0 10px 0; for the layered illusion, but because the div stops at the top and bottom of the browser, the corners of the shadow show. This is ill desired. I think if I could somehow grow the height (but not the width) of the shadow, I could achieve the exact appearance I have currently, minus the curved corners.

https://jsfiddle.net/nu4j0htf/

Upvotes: 0

Views: 204

Answers (1)

jeffjenx
jeffjenx

Reputation: 17467

Using a pseudo-element, like :before you can create a box shadow of different dimensions that your primary element. However, my implementation causes vertical scrolling that needs to be remedied.

https://jsfiddle.net/nu4j0htf/1/

body {
 overflow: hidden; /* added */
}

/* removed box-shadow from .backDrop and added this */
.backDrop:before {
  content:'';
 box-shadow: 0 0 20px 0 black;
 position: absolute;
 height: 120vh;
 width: 75vw;
}

If you need vertical scrolling on your page, you will need to think of a different solution.

Upvotes: 1

Related Questions