BLOG

Are you still using actual images for gradients, shading, buttons, and text embellishments?  Have you been wanting to switch over to clean, beautiful CSS3, but didn’t think you had the skills to make the leap?  Have no fear, some great CSS3 tools are here.  In this post, I’ll highlight five of my favorite CSS3 generators allowing you to do everything from color gradients, to button makers, to text shadows.  Just use these tools to generate the code for the looks you want without all of the headache or bandwidth overhead.  Easy peasy!

Getting Started – What to do with all that code

If you are completely unfamiliar with CSS, it would be wise to get a good grasp of the basics before moving forward with actual implementation of what is generated from these tools.   CSS isn’t hard to learn, but there are some things you will need to know before using the code that is generated.  I highly recommend a beginner tutorial before going all-in!  I really love the W3Schools site.  They offer tutorials covering basic CSS, CSS3 and everything HTML.  It’s not only a great tutorial site, but it’s an excellent reference.

Another great place for free training is Code Academy.  Here you can learn basic HTML and CSS with hands-on lessons.  For the more advanced, there are tutorials covering Javascript, PHP and even Ruby.

Okay, once you get a basic grasp, head back here so you can take advantage of all of these awesome free tools!

1) CSS3 Generator – Overview of 12 CSS3 Options

This is a wonderful place to start your journey, because there are a ton of options from which to choose here.  With it’s simple interface, the opening screen seems like something from Alice In Wonderland.  Remember the “EAT ME” and “DRINK ME” notes?  Upon entering this site, you are asked to “CHOOSE SOMETHING”.  Clicking this opens up 12 CSS generator options: Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline, Transition, Transform and Gradient.

If you choose the border radius option, for instance, it prompts you to enter pixel values for the different corners of a box: top left, top left, bottom right, bottom left (it’s set up this way because the code is entered by starting either at the top or top left corner of the box and moves around clockwise).  Entering values will reveal what the box will look like.  Like what you’ve created?  Simply copy and paste the code into your own styles.  Want to tweak it?  Just change the numbers you entered and the code will change accordingly.

2) CSS3 Button Generator – Buttons

There are other button generators available, but I like this one because it’s simple, has a great accordion setup to guide you through setting up the font, box, border, background and hover settings.  It also allows you to change the actual text so you can get a really good feel about how your completed button will look.  Change colors, font size, border radius, hover colors, and when you are happy with what you’ve created, simply copy the generated css to your own stylesheet.  Don’t forget to change the class .btn to whatever your button class is on your own site.

3)  CSSMatic – Box Shadow

This generator has four options including gradient, box shadow, background noise and border radius generators.  It has a very clean user interface complete with sliders which allow you to change things up to make it your own.  I often use this to create box shadows.  For this option slide the slider to create the appropriate horizontal length (negative values creates a shadow on the left), vertical length (negative values create a shadow above the box), blur radius (this makes it well…blurry), and spread radius (this determines how far outside the box you want the shadow to go).  Here you can also pick your shadow color and box color and decide if you want your new shadow to be on the outside of your box or on the inside (inset).

Box shadows are a great way to give objects on your page depth.  You can also layer shadow elements.  This generator won’t do it for you but if you want an outside shadow and an inset setting, for example, you can generate them separately and then piece the parts together using commas. You can string multiple box shadow elements together which can create some awesome effects.

THIS:

background-color: orange;
-webkit-box-shadow: 0px 0px 0px 2px white, inset 0px 0px 36px 28px purple;
-moz-box-shadow: 0px 0px 0px 2px white, inset 0px 0px 36px 28px purple;
box-shadow: 0px 0px 0px 2px white, inset 0px 0px 36px 28px purple;

PRODUCES THIS WITH WHITE OUTLINE & PURPLE INSIDE SHADING:

4) Colorzilla -Background Gradients

This is my go-to tool for gradients.  I love this tool because you can use the color sliders very much like you would manipulate colors in an image editing program.  Need to add more depth to your gradient?  When you see the little hand with a plus sign, you can just click to add a new color stop.

Edit the color stop by selecting your favorite color and then slide it where you like.  Click in the color area and it will add a new slider box that you can change the color of and slide where you want it. Add as many as you need to create the effect you want. Want to remove one of the color stops? Click on it and drag it away from the color box and it will just disappear.  Also, this tool has some great preset designs that are easy to use or edit.

If you need support for IE9, click the IE9 support check box and follow the directions.

5) 3D CSS Text

Tired of your text looking flat, but don’t want to include an image file to make things look good?  Well, there’s CSS for that too!  Using the 3D CSS Text Generator, you can make any text have a 3D appearance with some shading and gradient enhancements.  Just choose your colors and select the angle of the drop shadow. Use the sliders to set the size of your text and your shadow properties including height, gradient and opacity.   Copy the code and you are good to go!  This tool uses basic browser fonts, but if you use a special font for your site, or a Google Font, just replace the name of the font with your font’s name when you load the code into your CSS and it will work.

These tools are wonderful to cut through all of that tedious coding and they also allow you the freedom to just be creative.  If you are like me and LIKE all of the “code”, this is also a great way to learn how things are done.  These tools can let you experiment and see what happens when you change this or that or…the other.  And when you’re all done updating your site with these awesome CSS3 goodies, I’m sure you’ll sit back and give your project a thumbs up and a big Cheshire Cat grin!