CODEWITHSUNDEEP
htmlcssshadow
Atadj
Atadj

Reputation: 7180

Is it possible to create shadow like that in CSS3?

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:

enter image description here

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)?

Upvotes: 1

Views: 283

Answers (5)

Chris
Chris

Reputation: 27384

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

Upvotes: 5

SpaceBeers
SpaceBeers

Reputation: 13947

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

Upvotes: 0

Uttara
Uttara

Reputation: 2534

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;
}

Upvotes: 0

Nikola K.
Nikola K.

Reputation: 7155

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

Upvotes: 0

BiAiB
BiAiB

Reputation: 14122

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.

Upvotes: 0

Related Questions