The left content panel (this box) uses a background-image css attribute to apply a coloured gradient png image as the element background, and the png image fades to transparency towards the bottom allowing the page colour to bleed through

The widget panel (to the right) uses a background-color css attribute to apply a yellow background color, and a background-image css attribute to apply a transparent-to-white gradient png image, giving the effect of fading from the boxes simple background color to white.

The header box above uses a more complex layering method. The header div element contains 2 child div elements. Each of these child elements uses a background-image attribute to apply a background image, and each uses a negative z-index css attribute to cause the elements to be rendered below the main content of the header div element. The images in question are the deep blue background image with the Lorum Ipsum text, which is then masked by another image that applies a hot-pink horizontal gradient stripe effect. Finally the header div element itself uses a background-image css attribute to apply the same transparent-to-white png image used in the widget box on the right.

And finally... the Navigation bar above contains some "buttons" based on a div element which has css applied that makes use of the :before and :after psuedo-element css identifiers to apply the left and right cap images to the button body. The button body div element uses background-image css to apply its background

Get the source here :-)

A very handy resource for various web related topics is w3schools.com. For example, this is some info on the psudo-element css identifiers i used in the buttons on the navigation bar: css psuedo elements

• Widget1
• Widget2
• Widget3