Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Box-shadow only on right and left

Tags:

html

css

I need to make a box-shadow only on the right and left of an element. It should fade and get thinner to the top and bottom. It also shouldn't oveflow on top and bottom.

box-shadow effect right and left

The main issue is that I can't prevent the shadow to overflow on the top and bottom of the element.

This is what I have :

HTML :

<div></div>

CSS :

div{
    box-shadow: 0px 0px 20px 0px #000000;
}
like image 634
Gopikrishna Avatar asked Jun 27 '14 04:06

Gopikrishna


2 Answers

You will need to use two box-shadows one for the left shadow and one for the right one. You need to specify both box-shadows in the same box-shadow attribute and seperate them with a coma :

box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;

Both need to have a negative spread value so they are shorter than the divs height and don't overflow on the top and bottom.

DEMO

output :

box-shadow only on the left and right

You will need to tweak the values of the shadow in order to adapt it to the size of the element you want to use it on.

HTML :

<div></div>

CSS :

div{
    height:500px;
    width:300px;
    margin:0 auto;
    box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;
}
like image 78
web-tiki Avatar answered Nov 09 '22 14:11

web-tiki


You're going to need to go to use images for your shadow. What I mean is, the left and right 'shadows' are going to need to be two images that you can then position on the edges of your div to create the effect. Obviously I didn't test this and it might need a little tweaking, but you'll need to do something like this:

<style>
    .weird-image{
        height: 100px;
        width:100px;
        position: relative; /* do this so the absolutely positiond imgs are relative to this container */
    }

    .weird-image-left-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        left:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }

    .weird-image-right-shadow{
        position: absolute; /*positioned relative to .weird-image*/
        top: 0px; /*align img with top of div*/
        right:-15px; /* some negative value so that the shadow goes on the outside of div*/
    }
</style>
<div class="weird-image">
    <img class="weird-image-left-shadow" src="left-shadow.png"/>
    <img class="weird-image-right-shadow" src="right-shadow.png" />
    <p>My Actual Div Content</p>
</div>
like image 43
p e p Avatar answered Nov 09 '22 13:11

p e p