4 Extremely Useful Tools For Speeding Up Your CSS3 Coding
CSS3 is the latest incarnation of CSS and can be a really powerful tool for creating beautiful webpages. One of my favourite features about CSS3 is the graphic effects that can be made such as gradients, shadows and rounded rectangles.
When developing your CSS3 code, it’s often cumbersome to try and produce all the code needed to make it work in different browsers. Luckily, there are a number of really useful tools (that I use most days!) for speeding things up and ensuring your code will work in as many browsers as possible.
1. Text Shadow Generator
cssportal.com/css3-text-shadow-generator
CSS Portal’s Text Shadow Generator is a useful tool to help you to create shadows for your hyperlinks, headings or any other text to make elements stand out and create a visual hierarchy. Shadows help to create a sense of depth and create a sense of realism, for example, a button with a shadow can look more 3-dimensional and therefore more pressable too.
The code created using the generator is supported in the major browsers; and you can adjust the properties using handy sliders.
2. Border Radius Generator
border-radius.com
With the Border Radius generator you can easily change the border-radius and create rounded rectangles. Studies have shown again and again that rounded corners make objects appear less harsh and more friendly (known as contour bias), and people have a tendency to favour objects with curved contours over objects with sharp angles or points.
The code produced is supported by WebKit-based browsers, such as Google Chrome and Safari, gecko-based browsers such as Firefox. The other nice thing about this tool is it produces the code as concisely as possible.
3. Box Shadow Generator
css3gen.com/box-shadow
The CSS3Gen box shadow generator is a fun tool with plenty of sliders to help you to quickly produce the shadow you are hoping for. The code is adjusted as you change the sliders and really helps you to visualise what a shadow would look like, instead of trying to figure out the values in your head!
4. Gradient Generator
ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker
The Gradient Background Maker from Microsoft is a simple to use tool which helps you to create gradients suitable for backgrounds, buttons and much more. It has a large browser support and allows you to add additional colours to create complex gradients.
