CODEWITHSUNDEEP
htmlcss
Asme Just
Asme Just

Reputation: 1337

box shadow on bottom body

using this code, I can apply a shadow on the top of the windows: http://jsbin.com/awedir/1/edit

But I want it at the bottom. So how can I achieve this?

body:before 
{ 
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   }

Upvotes: 0

Views: 116

Answers (3)

user2496033
user2496033

Reputation: 

body{
     border:3px; 
     box-shadow:0px 10px 8px rgba(0,0,0,8); 
     position:fixed; 
     width:100;
     margin-left:0px;
     margin-right:0px;
     margin-top:0px;
     margin-bottom:0px;
     }

Upvotes: 1

Chanckjh
Chanckjh

Reputation: 2597

change top to bottom.

This is what box-shadow is.

box-shadow: horizontal vertical blur spread color

box-shadow: 0px(horizontal) 0px(vertical) 10px(blur) 10px(spread) rgba(0,0,0,.8)(color)

so what u want to do is change the direction of the shadow. By giving the vertical a minus it will be above the vorm. so something like this: box-shadow: 0px -10px 10px rgba(0,0,0,.8);

Upvotes: 1

Passerby
Passerby

Reputation: 10070

OK, extending from comment:

Just "reverse" the way you do with ::before:

http://jsbin.com/uyosuk/1

body::after
{ 
   content: "";
   position: fixed;
   bottom:-10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100; 
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

Upvotes: 2

Related Questions