CODEWITHSUNDEEP
htmlcss
youssef elmajbri
youssef elmajbri

Reputation: 13

Box shadow not showing on both sides

I use this css code for box shadow but I get only on the top and bottom Look like this

div#blog-pager {
border-radius: 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.35);
box-shadow: 0 0 3px rgba(0,0,0,.35);}

this css style don't have shadow style

#blog-pager{background:#fff;clear:both;width:auto;padding:20px;line-height:normal;position:relative;display:block;text-align:right;overflow:visible;margin:20px 0 5px 0}

I don't know if this code above affect the code I added

This is my blog : Blog

Upvotes: 1

Views: 1923

Answers (3)

Nehemiah
Nehemiah

Reputation: 1140

Add margin:2px to #blog-pager. because the #main-wrapper have overflow: hidden;

#blog-pager {
box-shadow: 0px 1px 3px rgba(0,0,0,.35);
margin: 2px;
 }

Upvotes: 3

RAY
RAY

Reputation: 2289

You may try to add some spread radius as 4th attribute to the box-shadow

box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);

Upvotes: 0

Syam Pillai
Syam Pillai

Reputation: 5217

Need to change your css a bit

div#blog-pager {
  border-radius: 2px;
  -webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
  -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
  box-shadow: 0 0 3px 3px rgba(0,0,0,.35);
}

Each value in box-shadow means

first : offset-x second: offset-y third : blur-radius fourth: spread-radius last: color

For more information read here

Upvotes: 0

Related Questions