?

Log in

No account? Create an account
CSS art! - Arvind Narayanan's journal [entries|archive|friends|userinfo]

CSS art! [Dec. 10th, 2007|02:04 pm]
Arvind Narayanan
[Tags|, , ]
[Current Mood |pleasedpleased]

Got firefox?

Point it to http://randomwalker.info/cssart/

I drew it with only CSS -- there are no images on the page!

(Note: works only in firefox, might work in Safari.)

This is just scratching the surface of what can be achieved with the CSS3 border-radius property. In the fine tradition of ASCII art, I think hacks of this form deserve to be explored further.

My head almost exploded last night when I realized this could be done. I had to get up this morning and try it :)

Anyone else want to give it a shot? I'll buy you a beer if you can make a cool hack.
LinkReply

Comments:
(Deleted comment)
[User Picture]From: arvindn
2007-12-10 08:40 pm (UTC)
i guess i can add one more item now to the list i gave you :)
(Reply) (Parent) (Thread)
From: fixious
2007-12-10 08:51 pm (UTC)
Nice. Hope this becomes a standard soon... I hate the rounded-corners hack.
(Reply) (Thread)
[User Picture]From: arvindn
2007-12-10 09:27 pm (UTC)
oh, you do webdesign too? interesting.
(Reply) (Parent) (Thread)
From: fixious
2007-12-10 09:38 pm (UTC)
Not too much. Used to, back in the day. But now anything I try to design starts looking like its from 2002. :)
(Reply) (Parent) (Thread)
[User Picture]From: mmk
2007-12-10 11:31 pm (UTC)

Holy cow

Very impressive.
(Reply) (Thread)
[User Picture]From: haran
2007-12-11 03:40 am (UTC)
Nice.
Firebug shows -moz* css attributes.
I assume these are currently Mozilla-specific features that are being standardized in CCS3?

There's also this: http://community.livejournal.com/evan_tech/206770.html
Arbitrary triangles.
(Reply) (Thread)
[User Picture]From: arvindn
2007-12-11 05:13 am (UTC)
yes, webkit also supports -webkit-border-radius.

css3 has been just around the corner for years now.. so basically it will become a standard when msie adds support for it. otherwise it will be yet another cool technique that died because microsoft wasn't interested.
(Reply) (Parent) (Thread)
[User Picture]From: arvindn
2007-12-11 06:35 am (UTC)
re. arbitrary triangles, see my latest post.

thanks for the link!
(Reply) (Parent) (Thread)