skip to menu

Test of CSS properties

Note: Please refresh the page to reveal new sub menus on the right.

This page is for test with CSS2.1 and older CSS3 (pre 2011). Below are specific demos and to the right are other demos found in the listed directories.

For new tests and demonstrations with CSS3 (2011 and onwards), please go to the CSS3 main page or the CSS3 directory.

CSS 3 (pre 2011)

Text-Shadow and box-shadow

Creating depth by using text-shadow and box-shadow (view with Safari 3).

Text-Shadow with depth

Similar to the above demo but with distinct layering (view with Safari 3).

Box-Shadow glow

Using text-shadow to emulate neon lights on a dark background (view with Safari 3).

Box-Shadow demo

Using box-shadow and borders to emulate depth with drop shadows (view with Safari 3).

Multiple Backgrounds

How to served up multiple backgrounds for supporting browsers and a one image for other browsers by the cascading order (view in Safari 3 and Opera 9.50).

Background Origin Background Origin with Border Radius

Two linked test with examples of background-origin and the second test with aditional border radius. (view in Safari 3 and Firefox 3).

Using PNGs with 'background-size'

Create stunning backgrounds for page headers (view in Safari 3 and Opera 9.50).

CSS 2.1

CSS2.1 User Agent Style Sheet Defaults

A table showing all UA style sheet default properties and values for IE7, IE8, FF2, FF3, Opera 9.50 and Safari 3 and the non-normative UA style sheet default properties and values in Appendi 4 of the CSS 2.1 specifications.

Default margins on block elements

A test case showing default margins on block elements.

Positioning with z-index

Misunderstood and non standard across browsers the z-index using relative and absolute positioning is a web designer challenge.

Page created: March 2008
Page last updated: 27th August 2012

Directories for CSS2.1 and older CSS3

See this page for newer CSS3.

Copyright © 2008-2011 Alan Gresley

My dream... A one inter-operable open web!