Help with Shadow

HTML & CSS
1

Hello CSS Gurus

Please have a look at the attached header. I want to do something same.
I have the yellow header, but I want to know what is the best practice to put the shadow under the header on the left and right ?

Please guide me (the image is attached.)!

Best regards
ZH

2

You could use an image, but that would take a while to load. Faster than css.
Also in IE6 any transparency behind the shadow or in the image would not show.
Then you could do a drop shadow using css3, and -webkit,

-moz css extensions

and khtml and more if you wish for maximum support. Then since IE does not support shadows in css3 you could use conditional statements to apply an image for styling.

So something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title> Yellow box with drop shadow</title>
<style type="text/css">
/* allow html5 styling in non-webkit browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
header{
           background:#cccc00;
           box-shadow: 10px 10px 5px #000;
           -moz-box-shadow: 10px 10px 5px #000;
           -webkit-box-shadow: 10px 10px 5px #000;
}
</style>
<!--[if lt IE 9]>
<!-- Allows the styling of HTML5 elements in IE -->
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
<!--[if lte IE 8]>
<style type="text/css">
header{
           background:url(http://www.sitepoint.com/forums/attachment.php?attachmentid=55392&d=1290569570) no-repeat;
           box-shadow:0px;
           -moz-box-shadow:0px;
           -webkit-box-shadow:0px;
</style>
<![endif]-->
</head>
<body>
<header>
<p> This is my Header </p>
</header>
</body>
</html>

Hope this helps or gives an idea of what to do!

Regards,
Team 1504

3

Great !

thanks a lot for your great support. I will try this and will let you know.

4

Can you please guide me How i can use the option that will have the Image ?

I actually Have the images and their sizes are small, even I am using Javascript Preloader, to make it smooth.

Can uplease guide me how I can place same shadow images that can stick on the proper position in most of the browsers ?