1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make box shadows only for the left and right sides?

Discussion in 'CSS' started by Mr.Dog, Dec 13, 2013.

  1. #1
    Hello...

    I have a box shadow setting in the CSS and the problem is it appears all around in my case it should only appear on the left and right:

    .bttm-wrapper{
    margin: auto;
    height: 29px;
    padding-top: 5px;
    padding-bottom: 15px;
    width: 1080px;
    float: left;
    border: 0px;
    background-color: #FFFFFF;
    moz-box-shadow: 0 0 14px #404040;
    webkit-box-shadow: 0 0 14px #404040;
    box-shadow: 0 0 14px #404040;   
    } 
    HTML:
    I could make it by putting it into a parent DIV that cuts down the top and bottom shadows (while setting "overflow: hidden"), but I want to make it simpler.

    I know there was a way to compensate for the right side and left side shadows in order to make the resulting value zero.

    Ideas?
     
    Mr.Dog, Dec 13, 2013 IP
  2. Strider64

    Strider64 Member

    Messages:
    40
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    25
    #2
    Strider64, Dec 13, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    The trick is a negative global offset.

    box-shadow:
    	7px 0 7x -7px #404040,
    	-7px 0 7px -7px #404040;
    
    Code (markup):
    This results in the corners being blurred though -- if you want it to run flat up to the edge, you'd have to use the overflowed parent approach... though usually if you wanted it run up to the edge that's because you've got siblings doing the same, which is when ALL those siblings should be getting shadow from a parent wrapper... but I'd have to see what it is you're actually trying to do in order to say for certain... that massive fixed width being a warning sign that whatever it is you're doing on the page, it can't be a good thing.
     
    deathshadow, Dec 14, 2013 IP
  4. Murugesan.quadraincorp

    Murugesan.quadraincorp Greenhorn

    Messages:
    15
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #4
    hi,
    should be set correct site you want shadow.. left and right means try this code...

    .bttm-wrapper{
    margin: auto;
    height: 29px;
    padding-top: 5px;
    padding-bottom: 15px;
    width: 1080px;
    float: left;
    border: 0px;
    background-color: #FFFFFF;
    moz-box-shadow: 0px; 14px; 0px; 14px; #404040;
    webkit-box-shadow: 0px; 14px; 0px; 14px; #404040;
    box-shadow: 0px; 14px; 0px; 14px; #404040;
    }
     
    Murugesan.quadraincorp, Jan 23, 2014 IP
  5. Mr.Dog

    Mr.Dog Active Member

    Messages:
    912
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thank you all, I solved it almost 2 months ago. I finally decided to use shadows all around, just that I made them look different from what I had planned.

    Sorry, I should have written a "problem solved" here, but thank you for your tips!
     
    Mr.Dog, Feb 9, 2014 IP