Buzz word alert. CSS3! CSS3! CSS3! You've heard it a million times, and I'm sure at this point you've gotten over the faux-excitement surrounding the new CSS standards. Regardless of your excitement, though, it's hard to deny that there are some truly useful things that are starting to show up. For a long time, any sort of fancy design was dependent on using images. Anything with a gradient, a rounded corner - God forbid you want a text shadow - would drastically slow down your page from loading all the images. CSS3 gives us some powerful tools to do some great design without loading any images. The downside to all the magic in the CSS3 spec is that much of it isn't available in the leading browsers yet. So, with that said, take what I'm about to post with a grain of salt. It won't work in every browser (actually, currently, it only officially works in Chrome). I've put together a CSS3-based UI set that can be easily applied to any input element just by adding a class. No weird HTML structures, no javascript, and no images. Just add a class, and let CSS3 do the rest. The set is certainly pretty young at this point - much of the design is just a proof of concept - but I intend to build in enhancements over time. Also, my general design skills are awful (terrible) (disgusting), so don't expect an award-winning look. Anyways, here's a glimpse of what it looks like, and you can also check out this demo. Also, the source for this icon set can be found on Github.   Note: Upon further research, it turns out I didn't fully understand the CSS3 spec for pseudo elements. Apparently elements that are "void", or don't have any content, do not officially support the :after and :before meta tags. Much of this UI set depends on that, so it will only work in Chrome in its current state. I will think of a smarter way to do this, refactor, and update here when it's ready for prime time. Sorry!

comments powered by Disqus