CSS Shadow lef/right only

  • Thread starter Thread starter bogus
  • Start date Start date
Is it possible to make a css shadow just to the left and right?
Directly no or not very nicely in my opinion. The only way would be to wrap you div with another div with the same height that the div you want a shadow has and set overflow to be hidden for the outer element and the top and bottom shadow will be cut off.

Short of doing all of that...this is a quick css fix you may be able to try and modify to your needs if you can...maybe someone has better...meh, it's a place to start. :)

Add this to your css.
Code:
div.bogus
{
-webkit-box-shadow: 8px 0 2px -1px #420420,  -8px 0 2px -1px #420420;
-moz-box-shadow: 8px 0 2px -1px #420420,  -8px 0 2px -1px #420420;
box-shadow: 8px 0 2px -1px #420420,  -8px 0 2px -1px #420420;
}
Will make a div look something like this.
css4Bogus.webp
 
Great ;) Thank you.
Xenforo needs a wrapper class ;)

I am using a shadow image now, because i needed to add box-shadow on to many different classes which gives an ugly looking overlay also with "overflow: hidden"

The image isnt that flexible but looks better ;)
 
Great ;) Thank you.
Xenforo needs a wrapper class ;)

I am using a shadow image now, because i needed to add box-shadow on to many different classes which gives an ugly looking overlay also with "overflow: hidden"

The image isnt that flexible but looks better ;)

Try this out...

CSS
Code:
div.shadowed {
margin-left:auto;
margin-right:auto;
width:300px;
height:75px;
border:none;
text-align:center;
vertical-align:text-middle;
border-radius:7px;
-webkit-box-shadow: 4px 0 4px 0px #420420,  -4px 0 4px 0px #420420,  inset 0 0 5px 0px #420420;
-moz-box-shadow: 4px 0 4px 0px #420420,  -4px 0 4px 0px #420420,  inset 0 0 5px 0px #420420;
box-shadow: 4px 0 4px 0px #420420,  -4px 0 4px 0px #420420,  inner 0 0 5px 0px #420420;
}

div.shadowedStrip {
width:316px;
border-radius:9px;
height:75px;
overflow:hidden;
}

Html
HTML:
<div class="shadowedStrip">      <!-- This strips the outside of the shadowed element on the top and bottom -->
    <div class="shadowed">        <!-- This is an element with a shadow  -->
    </div>
</div>

example: http://xenxero.com/xxfB1/
Untitled.webp

If you remove the inner and inset shadow you get this, you could go further and just remove the radius on both as well and make everything square.
Untitled1.webp

Untitled2.webp

Untitled3.webp
 
Top Bottom