Industry Leader in Digital Business

Howto: Using CSS3 in a CSS2 world (part 2: an example)

As promised, I made a rather simple example using the mentioned CSS (level 3) syntaxes. The demo has been build using a very simple login screen (two fields) with a leading text introducing the demo. In total, only one image has been used for the background of the fieldset (the gradient) as all other effects were created using CSS (level 3). While you could use one background image including a shadow and rounded corners for the inner box in some cases, I do not recommend this as this is not flexible enough when you are loading dynamic content (thus varying the height of the box). In the demo you will find a link to extent the login box with additional text showing the outcome using CSS for the effects.

Non-supporting browsers

Although the login screen does not look as fancy in Internet Explorer 8 and lower, it does show all elements correctly and is thus user friendly. Below you see a reference showing the differences between FireFox and Internet Explorer 8. Note that I added a border to one of the boxes to make it look pretty in Internet Explorer (using two CSS hacks in the stylesheet).

Reference image

Source code

You can either view the source code on the demo page or in the stylesheet. If you want to browse the demo offline you can also download all files in a combined zip archive. Have fun using CSS (level 3)!

Related Posts