Six Tools For CSS3 Success
Browser updates often introduce new and exciting features that make browsing the web faster, more secure, and easier. These types of changes have typically have users doing fist pumps, but what about developers? Lately, we’ve been getting our fill of fist-pump worthy additions as well. Simple animations, fancy transitions, and dynamic drop shadows are all possible with CSS3. With the latest round of browser releases, many of these features are at a level of support where they are able to be used more widely. Keep in mind that not all users upgrade their browsers the instant an update is released. However, the older browsers will just ignore the features they doesn’t support.
Firefox 4 has been in beta for several months and is scheduled for a release in November. While it already supports some CSS3 in version 3.5, Firefox 4 brings in support for some of the more flashy features. IE9 was just unleashed last month. As is typical for Microsoft, IE9 supports CSS3 at a very rudimentary level, but any improvements over previous releases are welcome. Of course the Webkit-based Chrome and Safari have led the pack with their CSS3 support for quite a while and the latest versions continue to uphold this pace. Not to be forgotten are the mobile browsers; the most popular of which are based on Webkit. The browser landscape is still varied, but it’s at a point where we can start dropping in CSS3 features and know that most users will see them. Besides, do websites need to look exactly the same in every browser? I’ll give you a hint, the answer is no. If you’re looking to add that next level of polish to your design and you haven’t tried CSS3 yet, think about giving it a shot.
A number of very specific and some more generic tools have popped up online to help you craft the most widely compatible CSS3 possible.
Border Radius – Dynamically rounds corners of a box depending on the values entered. Handy for coming up with different radii on different corners or for rounding less than all 4 corners.
Mother Effing Text-Shadow – Drag the sliders to create a text shadow effect. Also allows you to change the color of the shadow using HSL values.
Ultimate CSS Gradient Generator – This tool allows you to generate CSS3 gradients and provides a familiar interface for Photoshop users.
CSS3 Please – The kitchen sink of CSS3 generator sites. Includes corners, shadows, gradients, transitions, animations, and fonts.
Selector Gadget – Javascript bookmarklet that gives CSS3 rules by selecting an element. OK, so this tool isn’t CSS3 specific, but it is handy nonetheless and does spit out complex CSS3 selectors.
CSS3.info Previews – CSS3 examples. Alright, this isn’t a tool either, but it comes in handy when you just want to see what a particular CSS3 feature looks like.