HTML/CSS-Only Data Pager Control

After reading these two articles I thought it would be interesting to see if I could this technique to create a HTML/CSS-only (i.e. no background images) data pager control. Here are some screen shots of what I came up with (the second and third screen shots show the roll-over states) …

image

image

image

You can check out the live demo here.  I tried it in the major browsers (FF, Opera, IE7, Safari and Chrome) and it worked great.  Unfortunately it looks like crap in IE6 …

If you didn’t know it was possible to render angled shapes using straight HTML/CSS - I recommend checking out the following articles …

 

That’s it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/166

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)