CSS3ButtonBuilder lets you visually create sophisticated CSS only buttons (without the use of background images) that are cross-browser. By simply adjusting sliders or numerical input you can adjust the values for various CSS3 properties and see the results in real-time in the preview window. When you are done, you can output cross-browser CSS3 markup for inclusion in your sites stylesheet. CSS3 ButtonBuilder also lets you save and re-load your designs for later use or adjustment.

The application features:

A live updating preview that also lets you change the button text and the background colour so that you can see how your design will work on the same background colour as your site.

Sliders to adjust all numerical values (as well as numerical input for precision).

Fully featured rgba colour pickers — clicking on a colour-well opens an rgba colour picker that lets you adjust the rgb values as well as the transparency. You can also choose form pre-set colours and lock the sliders for greyscale output.

You can select whether your button will have a solid background colour or a CSS3 gradient. The gradients are fully customizable — you can add as many different colour-stops as you like and adjust their values as well as choosing the direction (horizontal, vertical, diagonal, radial) of the gradient.

You can save your designs and re-load them at anytime to re-use the code or adjust the design. Save your work simply by clicking on the ‘Save’ button and typing a name for the design. Open a saved design by clicking on ‘Load’ and selecting the design from the list. Clicking on the X icon to the left of the saved button thumbnail will delete it.

When you are happy with your button design you can easily and quickly output the CSS3 markup needed to apply the design to either an anchor <a> element or a form element <button> or <input>.

The application preferences allows you to select which web browsers you would like to generate compatible CSS3 markup for. CSS3 ButtonBuilder generates code that supports the 5 major browsers: Chrome, Firefox, Safari, Opera and Internet Explorer*. As default the app will always output the standard WC3 properties for your design.

* full browser support (particularly in the case of IE), refers to the use of the most up to date version of the browser.

Take the pain out of hand-coding cross-browser CSS3 buttons with CSS3 ButtonBuilder! Now on the Mac App Store.

For better or for worse CSSEdit was discontinued when MacRabbit released Espresso 2. I'm sure I wasn't the only one eagerly awaiting CSSEdit version 3 with CSS3 capabilities but unfortunately it never came — or rather it came incorporated in to Espresso and was discontinued as a stand-alone app.

Well, I tried Espresso but it doesn't really suit my workflow and so I continue to use CSSEdit 2.6.1. However, there is a way CSSEdit can be hacked to get some CSS3 goodness in there...

If like me you are using CSSEdit on a daily basis you've probably long since abandoned the Visual Editor (GUI) panel for most things and work solely in the Source Editor panel. Typing with auto-completion is what makes CSSEdit so fast and easy to use and it's exactly here that we can add our CSS3 properties and values.

First of all open your apps folder, locate CSSEdit and control-click on the icon. Then select 'Show Package Contents' from the contextual menu and open the 'Contents' folder. Inside the 'Contents' folder, locate and open the 'Resources' folder and then locate the file 'AutoCompletion.plist'. Rename it (or move it somewhere else), then download the following replacement .plist file:

CSS3 properties for CSSEdit: https://gist.github.com/2272849

Put the new AutoCompletion.plist file in to the 'Resources' folder and re-start CSSEdit. Now when you type you should find that you have all CSS3 properties and values available. I've also included various vendor specific properties and a few useful extras.

Note: Many of the properties in the full CSS3 spec are not currently implemented in any browser. If you want to exclude anything, simply locate it in the .plist file and comment it out using standard html comments eg:

<!--<key>hanging-punctuation</key>
	<array>
		<string>none</string>
		<string>first</string>
		<string>last</string>
		<string>force-end</string>
		<string>allow-end</string>
		<string>inherit</string>
	</array>-->

If you are a CSSEdit user I hope you find it useful - I find it has really speeded things up for me!

I recently had to style a table for a shopping cart with rounded corners and a drop shadow. So how is this done? It would be great if you could just slap "border-radius: x" straight on to the <table> element and it would be done but unfortunately this doesn't work. You have to get a rounded corner on to each <th> or <td> at the corners of the table.

So how do you do that? Add a class to each corner cell? I suppose you could but it would mean ugly html. CSS to the rescue! By using child selectors you can get those round corners in there without touching the html at all…

For example: to target the top left-hand cell (assuming you have a header on your table), you target th:first-child (the first <th> element); likewise to get the top right-hand cell you target th:last-child.

To get the bottom left-hand cell you need to target the first cell of the last row of the table. In this case, your selector will be: tr:last-child td:first-child…

…and for the final corner: tr:last-child td:last-child

Finally, the zebra striping on the table is done using the :nth-child selector: tr:nth-child(even) will select only the even numbered rows (note: in the following example I have used tr:nth-child(even) td as I am using gradients (the gradients need to be on the <td> element else they stick out of the rounded corner in Firefox).

Here's a live example of my CSS3 tables with rounded corners on dabblet.com

The html markup for the table was generated using my own Create Table plugin for Coda.