Box in the Box: 3D effect

This is an experiment where i used the "box in the box" experiment but made the boxes appear with a bevel effect.

It was created by using border techniques so you get a 3D effect, just as when u use the bevel effect in an imaging program.

Because the 3D effect in operating systems is caused by a imaginary light source coming from the top left hand corner of the desktop, the trick to get your 3D effect is simple: create the border edges with top and left being a little lighter than the button, and right and bottom being a little darker.

This shows you how you can create a nice effect, just by playing with the borders. Borders are indeed powerful properties.

For the basic layout, refer to this experiment.

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.


People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo