A design like that of my blogs are virtually no umtzusetzen with flexible width. The various shadow effects would make it necessary to use on all edges and corners of boxes several individual graphics - that is, but is cumbersome, unmaintainable and harms the performance. One solution to this is heralded with the CSS3 box-shadow property . The idea of this fine piece of CSS technology is a new part for the series beautiful new CSS , the other parts, I at this point would also like to recommend again:

What box-shadow ? With

box-shadow can miss any HTML elements a nice shadow effect. The specifications see this shadow in front of several at once. Especially handy is that the shadow grows in size and change the box or mitschrumpft rounds at the rounded corners as well.

How to use box-shadow ?

A simple shadow is as follows: 
  / * Simple shadow * / # test  
    {box-shadow :  8px 8px      # 666;}
Ein einfacher Schatten
Ein weicher Schatten
The first two values describe the horizontal and vertical offset of the shadow, for which one can add positive and negative values. The last value sets the color of the shadow, for which one can use one of the new color details of CSS3 finely control the transparency. To get a soft shadow edge, just add a value for the blur behind the specifications for the horizontal and vertical offset Reviews 
  / * Soft Shadows * /  
  # test {  box-shadow : 8px    8px 8px      # 666;}
With a further indication, one can control the radius of the shadow: 
  / * shadow with a fixed radius * / # Test  
    {box-shadow :  8px 8px     8px 8px      # 666;}
here can also be registered negative values to a smaller shadow to produce.
Schatten mit erhöhtem Radius
Schatten mit verringertem Radius
Mehrfach-Schatten
It is also possible to assign an element arbitrarily many different shade at once. Multiple shadow you just listed, each separated by a comma in a row. This is the first defined Shadow over all others and the last defined at the bottom: 8px 8px 8px green red,-8px 8px 8px, 8px 8px 8px-blue: 
  / * Four Shadow at once * / # test  
    {box-shadow : 8px    8px 8px     red  -  8px     8px 8px   green ,  8px  -  8px 8px     blue  -  8px  -  8px 8px     yellow  ;}
Innerer Schatten
And finally, there are (at least in Firefox 3.5), the ability to assign an element of an inner shadow. You only need to only the inset keyword somewhere to place in the informal definition: 
  / * Inner Shadow * / # test  
    {box-shadow :  inset   8px   8px 8px     # 666 ;} is
For all of this as it is always a test page and who is lazy, is his joy in this Box-Shadow Generator have.

Which browsers support box-shadow ? In terms

Bowserunterstützung it looks comparatively dark. Although the next two Webkit browsers Safari and Chrome also supports the Firefox 3.5 box-shadow (with -webkit or -moz prefix), but between that which delivered the three browsers at the end of optical, still visible differences.
Opera has not implemented box-shadow and before there is an Internet Explorer CSS3 features that freezes the hell. That's a pity, because box-shadow I think it rather less fit for it, act like text shadows and rounded corners as additional decoration, to which one can do without at a pinch, too. If we had full support for this feature, however, we could save so many bytes of image file and flexible layouts, simple design and / or beautiful. But still it is not so far.