3D Border Demo

3 October 2003 · Last updated: 18 December 2006

Comments

I created a demo page to test Opera 7.2's extra padding effect, which breaks my current layout used here. But I couldn't recreate the problem. However I ended up with an interesting way to use CSS borders to create 3D effects. My 3D Border Demo looks like the walls curve at the top, there are steps at the bottom, and bars in the middle. See what you think.

Comments (2)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Claire:
    OMG.. Chris.. I haven't even looked to see how that's done yet.. but it's absolutely gorgeous ;-)

    Put in in the site somewhere quick!

    Posted on 3 October 2003 at 10:05 pm
  2. LiteraryMoose:
    Chris, this 3D "door" is absolutely fantastic! Now think what will happen once CSS3 border values will be supported where you will be allowed to use... background images! 3D borders with images. Can you see this??? I've been waiting for this feature to be implemented, as this feature alone will revolutionize the display of web pages as nothing in CSS has ever done. Your "door" is really a door - to the future.

    Gaude laudamus te Door.

    best regards,

    M.

    Posted on 9 October 2003 at 1:18 pm

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 18 December 2006.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books