Its good to learn - Pretty Shadow effects with just one DIV!
Wow the internet has come a long way, I remember when all the top designers were using 4-5 divs just to create rounded corners around a single page element. Now with the magic of CSS3 you can create a beautiful "up-turned corners" with only one div! The basis of the up-turned corner is 3 angled shadow effects. Now doing this with an image can be fairly effective, but not only is that "cheating", it is not the cleanest, simplest low bandwidth method. With just a minor CSS trick you can have such an effect without images and all the extra bandwidth, late loading, etc issues that can occur. So how do you get 3 different shadow angles on a single DIV? The answer is to apply two classes to the DIV. This way you can use the :before and :after selectors along with the content attribute to create 3 distinct shadows. You can then use the transform property to rotate the before and after DIVs to create a lovely shadow on any CSS3 compliant browser. So our HTM...