Hi all
I have a rough demo here - http://www.ttmt.org.uk/shadow/
I’ve seen this sort of thing loads where you hava a shadow longer at one end
to make it look like the container is peeling up.
What’s the best way to do this.
I’m certain the shadow is an image, but whats the bext way to add it.
In my example I added the image to a span and then positioned it absolutely outside the container.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background:#ccc;
}
#wrap{
background:#fff;
width:900px;
margin:0 auto;
overflow:auto;
min-height:100%;
}
#box{
width:300px;
height:400px;
border:1px solid #ccc;
border-radius:5px;
margin:50px;
position:relative;
z-index:2;
}
span{
display:inline-block;
width:300px;
height:50px;
background:url(shadow-right.png) 0 0 no-repeat;
position:absolute;
bottom:-51px;
left:0;
z-index:1;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div id="wrap">
<div id="box">
<span></span>
</div><!-- #box -->
</div>
</body>
</html>