Is it possible to create shadow like that in CSS3? - html

Question

I'm almost sure that it's not possible to create shadows like that in CSS3 but I'm asking just in case anybody tried that and found a way:
I have sidebar to the right (limited height) and longer content the the left. The shadow fades in at the beginning and fades out at the end. Can this shadow be purely procedural (no raster images at all)?

Answer 1

You can use radial gradients like so:
#leftshadow
{
margin-left: 10px;
height: 200px;
width: 20px;
border-left:1px solid #ebebeb;
border-left:1px solid rgba(0,0,0,0.4);
background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),to(rgba(0,0,0,0)));
-webkit-mask-box-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
background-image:-moz-radial-gradient(left,ellipse farthest-side,rgba(0,0,0,.3),rgba(0,0,0,0));
}​
jsFiddle here
Different tweak is here
Original Answer
If you require a "simple" inset shadow you can also achieve this like so:
#leftshadow
{
-webkit-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
box-shadow: inset inset 5px 0px 5px -2px rgba(0,0,0,0.4);
}​
jsFiddle here

Answer 2

here's the trick I talked about, that is, layering a secondary div with a white shadow:
http://jsfiddle.net/dmezK/
it is not perfect but you can tweak it to fit your needs, I think.
here's the HTML:
<div id="main">
<div id="cheat"></div>
</div>​
here's the CSS:
#main
{
width: 100px;
height: 300px;
-webkit-box-shadow: inset 10px 0px 5px -2px #888 ;
position: relative;
}
#cheat {
width: 300px;
height: 300px;
-webkit-box-shadow: inset 10px 0px 5px -50px white ;
position: absolute;
left: -100px;
}
note: maybe you could use multiple box shadows, but it isn't as widely supported.

Answer 3

This is the closest I could make:
div {
width: 300px;
height: 600px;
border: solid 1px;
box-shadow:
inset 0px 10px 10px #fff,
inset 0px -10px 10px #fff,
inset 10px 0px 20px rgba(0, 0, 0, .3);
}
Live demo: Tinkerbin

Answer 4

try this
http://jsfiddle.net/6QSEc/1/
div{
height:200px;
width:100px;
background-color:white;
border:1px solid #f1f1f2;
box-shadow:10px 0px 20px -10px rgba(0,0,0,0.5) inset;
}

Answer 5

.box {
z-index: 100;
border: none;
padding: 0 0 0 10px;
background-image: url("images/topShadow"), url('images/bottomShadow'), url('images/shadow');
background-position: 0 top, left top, 0 bottom;
background-repeat: no-repeat, repeat-x, no-repeat;
}
Ok this is untested but should work with some tweaking that I don't have time for at the moment. You have 3 images, top, middle, and bottom. You use CSS3 multiple background images to use this as your left border, just add some padding to the left of the box. The order is important as it handles the layering of the images. The 1st one will be on top of all the others. The order acts as z-index for the images.