CSS Header Effects Demo

Header Styling Number 1

This first header uses CSS to create an underline. Since we are using CSS we can make the underline any color we'd like. For some of the more compliant browsers (such as Mozilla) the underline will actually change thicknesses to match the font depending on the users font-size settings.

Notice that when the font is large enough to wrap the line automatically shifts to be completely underneith the header. In this way it serves to better present the header over using "text-decoration: underline".

Header Styling Number 2

This second header uses CSS to create a simple gray pinstripe around the header.

Header Styling Number 3

This third header uses CSS to create a simple gray box around the header.

Header Styling Number 4

This header demonstrates how you can put a background image behind a header to create a very polished look.

Header Styling Number 5

This header has the same styling as the previous, but when you mouse over it the header flickers. This effect is known to work on IE6/PC and Moz/PC.

Header Styling Number 5

This header has the same styling as the previous, but when you mouse over it the background fades. This effect is known to work on IE6/PC and NOT to work on Moz/PC (Moz seems to have a bug where you cannot offset the background image).