help with shadows around a content area

[Ritesh_4]

Hello, I want to add some shadows around by content area (see img), and I do not want to use a static image as background for this as it will be limited in height value. Anyone can help me with this? my url also is :

http://preprod.prolectronic.ch

The shadow extends to the top as well, which however has a grey background almost same color as the shadow...

[pritaeas]

I don't use this much, but perhaps CSS3 can help.

[JorgeM]

Can you clarify your question a bit more. The picture above doesnt help with respect to the link you provided.

If you are trying to get a shadow around a div (content area), have you considered the box-shadow CSS3 property? The only downside at this time is that this property isnt supported by IE 8 or earlier.

[Biiim]

<style type='text/css'>
#myDiv{
    box-shadow: 5px 5px 20px #cccccc;// x, y, blur, colour
}
</style>

I forget which one is x and which is why but thats the format, some browsers might want their prefix still but should be standardised to the above now

-webkit-box-shadow: 5px 5px 20px #cccccc;
-moz-box-shadow: 5px 5px 20px #cccccc;
-o-box-shadow: 5px 5px 20px #cccccc;

[Ritesh_4]

I will try Biiim's method and see what i get
@JorgeM: sry for that, in fact if you go on the link, there is a text "Bienvenue ... ", which is in my content area, but not with the shadows so far around that area

[Ritesh_4]

hello again
for this issue, in the end I will have to go with the image uploaded earlier so as to get the exact shadow effect, however, if anyone opens this link, http://preprod.prolectronic.ch/page-fr-1-Accueil.html , you will see that since the image has a fixed height, any text going beyond it does not make it extend to fit along, while I need to make the shadows "fluid" in this case to stay at the end of the content, and also the left and right shadows must also expand along in height with the content.
Anyone can help me pls to proceed with this?

[pritaeas]

Wouldn't it be easier to separate the left/right, top and bottom images.

[Ritesh_4]

yes was giving this a thought as well, however concerning the left-right part, how to make them fluid? since they will be fixed in height the images...?

[pritaeas]

If stretching is not what you want (may render ugly), cut them in three: top, middle (1px should suffice) and bottom.

[Ritesh_4]

could you pls guide me on how to add them around the content block? also for cutting them in 3, it only applies to the left-right parts? this is the first time i've had to deal with something like this...

[drjohn]

Use the standard css3 method to get your box shadow.
Then visit this site http://css3pie.com/
And use their behavior: url(PIE.htc);

No need for images at all.
The PIE file also lets you add other css3 effects for older versions of IE.
Like text-shadow and broder-radius I do hope you are not wasting your time using images for rounded corners...

[Ritesh_4]

hello drjohn, my problem is not related to rounded corners but for using a fluid shadow on the left and right sides of my content...

[drjohn]

I know you want fluid shadows, PIE.HTC does that !

I simply mentioned a few other things it can also do, if you write the css3 code. I always make the pie.htc line the last one in a css declaration, and it enables older IEs to display css3 effects as intended.

Have a look here to see it giving very fluid shadows
http://lxavionics.co.uk/portables.htm
notice that the boxes with shadows are all different sizes. No images were harmed in making them.

[TonyG_cyprus]

Here's some css

.top{
  background-image: url(images/top.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 80px;
}

.mid{
  background-image: url(images/mid.png);
  background-position: center;
  background-repeat: repeat-y;
}

.bottom{
  background-image: url(images/bottom.png);
  background-position: center;
  background-repeat: no-repeat;
  height: 80px;
}

crop your image into 3 using a graphics package, name them file them and
bob's your uncle!
Oh yes, and dont forget the div's on the page i.e.

<div class="top"></div>
<div class="mid">

//here is your content

</div>
<div class="bottom"></div>

[Ritesh_4]

ok sorry for misunderstanding drjohn, and thanks for a quick example TonyG_cyprus