Test of CSS properties

Note: If no menu appears above, please refresh the page.

This page is very unfinished, just reorgnising the site into some order. There are further test in the directories listed below.

CSS 3

New tests and demonstrations with CSS3. The can be found on the CSS3 main page or CSS3 directory

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.

Directories of CSS properties

• Backgrounds
• Bidirection
• Box Model
• Colors
• Defaults
• Selectors
• Shadows
• Text
• Visual formatting

Created: March 2008
Updated: 4th January 2011

Some content