As designers and developers we tend to always be on the look out for overwhelming resources to insert to our virtual toolboxes. With the web design landscape moving in the direction of CSS3 we thought that we would assist our readers discover a few choice tools to start building up their toolboxes. So we went out across the web looking for some of the top offerings from the development and design community that can assist get you started on using CSS3 and HTML5 today.
So take a look down through the round up of available resources that you can confidently find some tools that you have not come across before, and that can help aid both designers and developers alike.
CSS3 Button Maker
This instinctive tool from CSS-Tricks is labeled a “CSS3″ button maker due to the realism that it makes employ of gradients, shadows, and rounded corners which are usually not supported in older browsers. However, whenever these properties are not supported, the buttons degrade obviously and properly. To use, you simply adjust the settings until the example looks like you want it to then you just click the button to obtain the CSS code. Then you copy and paste it into your style sheet.
Another user easy and user-friendly code originator is CSS3 Maker which supports “border radius” “gradient” “css transform” “css animation” “css transform” “RGBA” “Text Shadow” “Box Shadow” “Text Rotation” and “@Font Face” with browser and mobile compatibility. Users can also make an account to keep snippets created during your session.
How about a handy cross-browser CSS3 rule generator? Just say please! CSS3 Please is an online stylesheet with an inlaid code generated example so you can observe the changes you create take instant effect. And the best part is, change one value, and all the corresponding values update to reproduce these changes too. Then when you are prepared and have the box styled as you like, then just copy the whole code or just part of the code and paste it into your own stylesheet. With great explanation this is an amazing learning implement to boot as you are working straight with the code itself.
If it is transforms that you are involved in, and then step right up! With this helpful tool you can rotate, scale, skew, and otherwise transform your HTML elements with CSS3.
If it is progressive development that you are looking for, and you are tired of holding off on using CSS3 due to older versions of IE, then CSS3 PIE is for you. Progressive Internet Explorer makes Internet Explorer versions 6 through 8 capable of depiction many of CSS3′s most promising and decorative features. Currently, PIE fully or partially supports the following CSS3 features:
- Multiple background images
- Linear-gradient as background image
- Other features are under active development
CSS3 Pattern Gallery
What toolbox would be complete without some patterns and textures that you can use for your web projects. CSS3 Pattern Gallery is a rising collection of both simple, repeating textures and patterns created using pure CSS3. This is helpful for reducing load time on large patterned backgrounds for websites.
As far as CSS3 motivation goes, CSS3 Watch is a fantastic resource that provides examples of tremendously creative, innovative and at times unexpected uses of CSS3. This is a great way to kick start your outside the box thinking with regards to the style of your site.
CSS3 Power Tools Tut
And now that you have all of these great tools to play with, you need to be sure that you completely understand the elements of CSS3 that you will be creating. Enter the NetTuts tutorial, Getting to Work with CSS3 Power Tools, which is a wonderful starting point.