The advent of HTML5 and CSS3 has fundamentally changed the way web designers and developers work. With these new tools come various options. Some are heavy on code and processes while others strive to make the design process easier. In this article we’re going to look at a few online resources which allow you to quickly create snippets of CSS3 code which you can use in your projects.
The first one we’ll look at is: CSS3Gen. Your options are: Button Generator, Border Radius, Box Shadow, Text Shadow and CSS3 Gradients.
Button Generator
As you can see, the CSS3 Button Generator is straightforward to use. In the top section are the Base Settings and below that is a section for the Background, Drop Shadow and Text Shadow. Immediately below that is a section which contains the code, which you can immediately copy for use. We’ll look at each section and note the effects on the button itself.
In this step I changed the text and experimented with the Font size, Padding and Radius.
In this step I changed the background colors and experimented with the starting and ending points of the gradient. The angle setting was left at the default.
In the Drop Shadow section I changed the angle, distance, blur, color and opacity.
In the Text Shadow section I made some minor adjustments to finish off the button. As you can see, you have a lot of control over the look and feel of the button. With a little bit of practice you’ll be able to create buttons that almost appear 3D. And the best part is that this all accomplished using code, only. No images are involved.
The last part of this section is the CSS3. I’ve pasted it in below for reference.
<a href=”#” class=”button”>Get the FREE Report!</a>
color: rgb(230, 230, 230);
font-size: 35px;
padding: 26px;
text-shadow: 0px -2px 1px rgba(30, 30, 30, 0.8);
–webkit-border-radius: 74px;
–moz-border-radius: 74px;
border-radius: 74px;
background: rgb(85, 38, 15);
background: –moz-linear-gradient(90deg, rgb(85, 38, 15) 40%, rgb(250, 154, 140) 74%);
background: –webkit-linear-gradient(90deg, rgb(85, 38, 15) 40%, rgb(250, 154, 140) 74%);
background: -o-linear-gradient(90deg, rgb(85, 38, 15) 40%, rgb(250, 154, 140) 74%);
background: –ms-linear-gradient(90deg, rgb(85, 38, 15) 40%, rgb(250, 154, 140) 74%);
background: linear-gradient(0deg, rgb(85, 38, 15) 40%, rgb(250, 154, 140) 74%);
–webkit–box-shadow: 6px 8px 11px rgba(50, 41, 105, 0.7);
–moz–box-shadow: 6px 8px 11px rgba(50, 41, 105, 0.7);
box-shadow: 6px 8px 11px rgba(50, 41, 105, 0.7);
CSS3 Box Shadow Generator
As you can see, the Box Shadow Generator is simple to use. Simply drag the sliders to the setting you want or use numeric entry. Afterwards, copy the code and use it in your projects.
CSS3 Text Shadow Editor
The Text Shadow Generator is another easy to use tool. Just enter your settings, copy the code and you’re done.
CSS3 Border Radius Generator
The Border Radius Generator gives you precise control over all borders in your design, allowing you to quickly set the required borders for your projects.
CSS3 Gradient Generator
This is one of my favorite tools in this program, because it gives you precise control over the angle of the gradient and the starting and ending points. Creating gradients is a lot of fun this way.
Zen BG
The next tool we’re going to look at is Zen BG, a simple tool for creating gradients and laying them on top of live textures.
This section controls the textures, gradient, rotation and generating the CSS3.
Here’s a sampling of the textures. As soon as you choose one, the screen updates with that texture in the background. From there, you can change the transparency (alpha), the scale of the texture (for tiling), then number of colors in the gradient, the position of the colors in the gradient and direction of the gradient.
Here’s a quick example that I created.
Once you’re satisfied with the texture, click on the blue Generate CSS3 button at the bottom of the Texture panel.
This will take you to another page where you can download a Zip file and copy the CSS3.
CSS3 Patterns Gallery
The CSS3 Patterns Gallery is a really simple site. All you do is click on a given pattern and a page will open that contains the CSS3, which you can copy and use.
Note: The patterns should work in Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. Note that some of the textures might not display properly, due to JavaScript limitations. The best way to find out what works and what doesn’t is by testing.
Conclusion
Overall, CSS3Gen is an easy to use tool with a lot of power. I love the color treatment and the amount of control over the look and feel of the button. It’s actually surprising that it’s free. With something this usefu I would have expected some sort of fee.
The Zen BG texture tool is also quite useful. It gives you a wide variety of textures to choose from and a lot of control over the gradients, placement and transparency.
