Third Party CSS Apps to Speed Up Your Workflow

By Nathan Segal

While Dreamweaver CS5.5 is a great program, it's also quite expensive, so in this article we're going to look at some third party applications that will allow you to create some cool effects without breaking the bank. Many of these tools are online, which makes life a bit easier.

Ultimate CSS Gradient Generator


If you've been wanting to create gradients for your layouts, Ultimate CSS Gradient Generator gives you some really great options. Here's a rough rundown of the interface. At the top left are a number of presets. These form the basis of some really cool gradients that you can use "out of the box" or custom design your own. Directly below the Presets section is a bar that you can manipulate with the stop markers.


Here's how it works. Simply select a marker and double-click on it to open the color selector to choose your colors. To adjust the position of the stops, you can manually move them along the bar or set the location in percentages. To add a new stop, click between the stop markers. To delete a stop marker, drag it down or select it and click on the delete button in the Stops section.

On the top-right of the interface is a preview of the gradient. Here are some things to note:

* You can set the orientation to vertical or horizontal
* You can set the size
* You can enable the IE checkbox for Internet Explorer


Directly below that area is the CSS and at the bottom of this section there are a few subtle, yet important tools. First is the color format. You have the option of using hex, rgb, rgba, hsl, hsla. This last designation, the "a," is really important. This refers to the image "alpha" or transparency. So if you're looking at the image code it would read something like this: rgba(41,137,216,1)

The last number, the "1" controls the transparency. "1" is fully opaque. Anything less than that will create varying leves of transparency.


The other important feature is: Import from image. When you click on the button it brings up the following dialog box, allowing you to import a gradient image or to use a URL.

And that's it. You can have a lot of fun with this tool.

CSS Typeset


CSS Typeset is a simple tool which allows you to experiment with different types of type, positioning, sizing and more. Once you have what you like, you can copy the CSS code into your layout.

Here's how it works:

1. Copy some text that you want to test in the Enter Text box on the left.
2. Choose the font that you'd like to use. Your choices are: Courier, Georgia, Palatino, Times New Roman, Arial, Helvetica, Impact, Lucida Sans, Trebuchet MS and Verdana. Note that there's no need to select the text before choosing the font. Simply changing the font will change the text automatically. For this demo, I've chosen to use

* Arial
* Font size 14px
* Font color, Hex 0000FF or RBG: 0,0,255
* Left Justified
* All bolding, italics, etc. off

Next, we'll look at the controls that govern the spacing between characters, between words and between line.


Here's the text with a figure of five applied. As you can see the spacing between the letters is considerable.


In this example, I've set the spacing between characters to "1" and the spacing between words to "3." Note the effect of the spacing.


In this sample, I've left the spacing between characters at "1", I've set the spacing between words to "0" and Ive set the spacing between lines to "1.5." Note the effect.


And here is our CSS code for that work. As you can see, using this tool can really help you with designing text for your layouts.

CSS Generator



One of the great things about Dreamweaver is its ability to create customized layouts for building websites, which can save you a lot of time, but what happens if you're not using Dreamweaver? If you try to create these layouts they can be really time-consuming. Far better to use a template generator if one is available. And that' where CSS Generator comes into play. Literally within a few minutes you can create a CSS layout that's ready to use. Not only, but you can also use the HTML5 DOCTYPE.

In this section I'll input a number of values, just to give you an idea of what the final result will be. Here are my settings:

* CSS Reset: * {margin: 0; padding: 0;}
* Layout Width: Fixed
* Width: 960 pixels
* Header: Specify Height enabled 250 pixels
* Sidebars: Two sidebars, one left, one right, 250 pixels spacing for left, 150 pixels for the right
* Footer: Specify height enabled, height 75 pixels.


When all of these setting are entered, the blue "Get the Link" button becomes active. Click on it and it brings up the page above, which shows you what your layout will look like. At the top left is a link that states: "Download .zip archive. When you click on it, it downloads two files, a .CSS file and an index file. You now have everything you need to get started with your layouts.

Have fun!





Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date