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.

    If you've got some vitriol that just has to be spat, then contact me.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the write way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed