Circtangles: A JavaScript art installation

25 April 2008

15 comments

A Blue Perspective: Circtangles: A JavaScript art installation

The thought only just occurred to me that I'd never used the newly emerging technology for creating rounded corners in CSS – border-radius. So to rectify this, I set about experimenting with abstract uses for rounded corner rectangles. This is the result:

Circtangles

border-radius is only available in Firefox Gecko and Safari Webkit, so don't bother trying Circtangles out in anything else.

There's a few tweakable options at hand for you to try out, but they all result in a rather nice looking piece of randomly generated art. To generate different random patterns you can hit the regenerate button at bottom centre.

A couple of notes about using border-radius in your CSS:

  • Safari's rounded corners look so much better because they're anti-aliased.
  • Safari's border-radius is also less buggy than Firefox's – Firefox (v.2) will not let you specify a border-radius that is larger than half the height of the total element height.
  • Safari (true to form) has much faster redraw when changing the display properties of large numbers of objects (so Firefox will be a bit slow on this experiment).
  • If you're accessing Mozilla custom CSS attributes via the DOM, you should capitalise the "M" in "Moz". So, for example: -moz-border-radius becomes MozBorderRadius.

So, with those caveats, enjoy Circtangles. I can only wait for the day when rounded corners are native to every browser out there.

Categories

, , ,

Comments

  1. 1/15

    Carina commented on 25 April 2008 @ 03:27

    "border-radius is only available in Firefox and Safari, so don't bother trying Circtangles out in anything else."

    Heck, go ahead and bother! It works just fine in Camino 1.5.4

  2. 2/15

    Lukasz Nowak commented on 25 April 2008 @ 04:08

    Hi.
    I'm newbie in CSS. I made rounded corners in gif. I''ve to learn a lot.

  3. 3/15

    Scott Johnson commented on 25 April 2008 @ 04:14

    Do you know whether Firefox 3 antialiases rounded corners?

  4. 4/15

    Finanzamt commented on 25 April 2008 @ 04:16

    Do you know if border-radius will be supported by IE 8?

  5. 5/15

    Jason Campbell commented on 25 April 2008 @ 04:30

    Lovely, I can't stop playing. Cheers!

    J.

  6. 6/15

    Scott Schiller commented on 25 April 2008 @ 06:49

    Fun and inspiring work as usual! :) Yes, Firefox 3 (beta at time of writing, at least) does anti-aliased rounded corners. Long live border-radius.

    I'm contemplating ditching image-based rounded corners for this technique, and (perhaps boldly) letting it "degrade" for browsers that don't support them.

  7. 7/15

    Dylan commented on 25 April 2008 @ 07:28

    It's usually best to refer to the rendering engines rather than the browsers which use them. Gecko is used in many different browser front ends (http://www.geckoisgecko.org/) and Webkit looks like it will be another popular choice for web browser developers to adopt.

    I'm sure you already knew all that though, just a reminder, or maybe simply obsessive pedantry :).

  8. 8/15

    Dylan F.M. commented on 25 April 2008 @ 11:01

    Brilliant! I wonder what will come first: widespread support of border-radius, or support for multiple background images.

  9. 9/15

    The Man in Blue commented on 25 April 2008 @ 12:16

    Yeah, I knew obsessive pedantry would triumph over my usage of the word "Firefox". But I generally assume that Firefox is 95% of Gecko, and that people who use Gecko derivatives will know that Firefox == whatever they use. (Although Webkit's probably a little more covert)

  10. 10/15

    anon commented on 26 April 2008 @ 10:20

    "But I generally assume that Firefox is 95% of Gecko"
    These days, probably much closer to 99% of Gecko.

  11. 11/15

    Shaal commented on 27 April 2008 @ 01:10

    Your experiment was worth it, the palette has less colors though and takes time to load over my lousy broadband! Less colors btw.

  12. 12/15

    Ricky Onsman commented on 27 April 2008 @ 21:07

    That's lovely work, Cameron.

    Why does the gradient fade as the corners get rounder?

  13. 13/15

    The Man in Blue commented on 27 April 2008 @ 22:05

    The gradient fades because it's actually a PNG image (sandwiched between two different colours). Unfortunately you can't mask images yet, so you can't do a gradient with all rounded corners (i.e. a circle). As a compromise, I faded it out :D

  14. 14/15

    Chloe Baby commented on 28 April 2008 @ 12:59

    Wow, this is cool.
    I haven't used this before instead been poking my own eyes out with rage trying to get rounded tab corners in IE 6, 7 and FF..
    On a side note, i hate IE :)

  15. 15/15

    Daniel commented on 30 April 2008 @ 09:05

    Nice one, Cameron... created some good looking 60s wallpapers:-)

    16. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

Monthly Archives

Popular Entries

My Book: The JavaScript Anthology

The JavaScript Anthology

The JavaScript Anthology contains over 100 solutions to common Web development challenges such as drag-and-drop interfaces, client-server communication with AJAX/remote scripting, DHTML animation, and many more.

All code used in the book is unobtrusive and accessible, and a key focus is placed upon creating modern, cross-browser scripts.

RSS feed