Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

CSS border art and other treats

Chris Hester’s 3D Border Demo 2 (via Web Graphics) is an impressive demo of just how much you can achieve with CSS borders. His Tips & Demos collection is worth browsing through as well; I particularly liked this Shadow Demo, although markup purists may be distressed by the number of nested divs. The sooner we can use the CSS3 ::outside pseudo element to achieve effects like this without the surplus divs the better.

Update: On closer inspection the additional divs aren’t nested within each other; they are individually positioned to achieve the desired effect.

This is CSS border art and other treats by Simon Willison, posted on 18th October 2003.

View blog reactions

Next: The Python Web SIG

Previous: Kansas Blog

3 comments

  1. We would probably use the box shadow property for that. Far more easier to use than a couple of pseudo elements with background styles applied to it. See also bugzilla bug 212633.

    Anne - 18th October 2003 22:20 - #

  2. I do a similar thing with shadows on my business website, Keystone Websites, although I have just one box. As Anne pointed out, CSS3 offers more satisfactory solutions, but until it's implemented by IE/Win we are probably stuck with a plethora of div elements.

    Simon Jessey - 18th October 2003 23:21 - #

  3. Am trying to come up with a blogger template for a small mission church. Would like to have some graphics in the header and a calendar on the right side. Am completely lost. much like Ned and the first reader. Can any one out ther help me in design?

    Bobby Hall - 4th February 2006 14:18 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/10/18/borderArt

A django site