1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Shadow lef/right only

Discussion in 'Styling and Customization Questions' started by bogus, Jul 28, 2011.

  1. bogus

    bogus Guest

    Is it possible to make a css shadow just to the left and right?
     
  2. EQnoble

    EQnoble Well-Known Member

    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.png
     
  3. bogus

    bogus Guest

    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 ;)
     
  4. EQnoble

    EQnoble Well-Known Member

    shoot me a pm of your site and tell me where you are looking to do this sideshadow stuff -n- maybe we can come up with a solution. :)
     
  5. EQnoble

    EQnoble Well-Known Member

    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.png

    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.png

    Untitled2.png

    Untitled3.png
     

Share This Page