Fun with CSS Border Radius
Here’s a CSS experiment I was playing with and posted on twitter recently, with no blog at the time there wasn’t much chance for an explanation or discussion so I thought I’d give it its own place here :)
→ View the CSS Border Radius experiments.
As you should see the demonstration uses CSS borders, border radius, positioning and a few other CSS techniques to get an entirely useless smiley face complete with animations (sort of). Actually I don’t think it’s entirely useless, sometimes I like to breaking away from looking at things in a web design perspective and simply exploring the technology available whether the end result is useful of not.
Check out the source code and you’ll see the html is nothing special, the good stuff happens in the CSS. It’s best viewed with Safari, Firefox 3 or Google Chrome although Internet Exploder and Opera are worth a look.
What do you think — other than round corners could there be other uses for border radius?
Ryan,
That is a really cool use of border-radius.
Almost got this to work in IE too!
Add this to the end (replacing [[ ]] with html tags of course):
[[script type=”text/javascript” src=”http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js”]][[/script]]
[[script type=”text/javascript”]]
var rounds = { ‘#face ‘:’200px’, ‘#eye-left, #eye-right’:’30px’,
‘#face:active #eye-left, #face:active #eye-right’:’42px’, ‘#upper-lip’:’140px’, ‘#mouth’:’120px’,
‘#face:hover #mouth’:’40px’, ‘#face:active #mouth’:’20px’ };
for(var key in rounds) DD_roundies.addRule(key, rounds[key], false);
[[/script]]