webecho designs

3D heading

3D heading

3D Headings using CSS

Browser Compatibility: Works in Mozilla / Firefox 1.5, Opera 8.51 and IE 6.0

Resizing: At the moment it can only stand 3 upsizes in text, but the second upsize just about makes the effect disappear.

Accessibility: not great - This method involves writing the heading twice in the code.

Downsides: You get a large bottom margin (it's where the second heading 'naturally' sits in the XHTML)

Comments ...make one here.

CSS

The example on this page has the CSS embedded to make it easy to reference


XHTML

Just right click and "View Source"


Go back to CSS articles