How to Create Beautiful CSS3 on Your iPad

CSS3 Machine is an awesome new way to create beautiful, cross-browser CSS3 styles on your iPad using visual controls instead of hard-coding.

The workflow for the app can be a little tricky to figure out so today we’ll walk you through a typical project so you can decide if it’s something you could use in your own web building ventures.

What Is CSS3 Machine?

In case you’re not familiar with web development, CSS is the code developers use to style web pages. The latest iteration, CSS3, brings about tons of new features that were previously only possible through the use of inserting images rather than using raw code.

Some of the new features in CSS3 can be quite cumbersome to code by hand, especially when you try to make sure multiple browsers are supported. For this reason, a number of tools have sprung up to help developers work with CSS3 in a friendlier, more visual manner.

CSS3 Machine is just such a tool and makes its home on the iPad. With CSS3 Machine, developers can use sliders and other WYSIWYG controls to set CSS3 properties and generate clean, cross-browser-compatible code.

Getting Connected

The first time you fire up CSS3 Machine, you’ll see the screen below informing you that you can see a preview of the stylesheet you are creating on your Mac by going to Safari and entering “http://” plus the name of your iPad, plus “.local”.

Keep in mind that this won’t be a visual preview of the rendered output but rather the actual code that is being generated that you can copy and paste into your text editor of choice (a live preview would be a nice addition).

It’s really nice to be able to access the code you’re creating immediately without the hassle of email or file sharing.

Creating A New Stylesheet

The first step in using CSS3 Machine is to open a stylesheet by tapping the “My Stylesheets” button at the top left. You can choose to either open one of the samples or start your own. We’ll choose to start our own by hitting the little plus at the bottom of the stylesheets window.

To start off your CSS3 experiment, you decide on one of four HTML starter options: Container & Content, Letter Forms, Cards or Custom. Container & Content sets up a basic header and paragraph for you to work with, Letter Forms allows you to work by focusing on a single word and Cards allows you to style a pre-built set of playing cards.

The custom option allows you to set up your own templates. You can do this right inside the iPad or use iTunes File Sharing to import one that you have created on your Mac.

Since I just want to play with some text, I chose the Letter Forms option.

Adding Selectors

After you select the Letter Forms option, you should be given a basic preview of some Helvetica text that spells out “CSS3.” This preview will update later as you begin tweaking CSS properties.

Making sure the “Styles” option is selected at the bottom, tap on the plus button at the top of the menu on the left to add a new selector to work with. Here you can apply a name, tag, class or ID just like you would if you were coding by hand.

Once you fill in this information, the selector should appear in your list.

Adding Properties

Now that you have a selector, go to it and hit the plus button again to add a property. You have a number of CSS3 options to choose from here including: Basic CSS, Border Radius, Box Reflect, Box Shadow, Gradient, Perspective, Text Shadow, Text Stroke and Transform.

Simply tap on any of these to see the controls and options for that property. We’ll start off with some basic CSS.

Adding Basic CSS

The basic style options give you a few standard properties to work with: text color, background color, font size, margin and padding.

You can tweak each of these to your liking and the preview at the bottom will update dynamically.

If you want to change something that is not in the list, such as font-family, simply add it to the “Additional CSS” area at the bottom.

More Styles

Now that we have the basic styles set for our button, let’s finish it off with some nice CSS3. The first thing I’ll want to add is some rounded corners via the border-radius property.

All we have to do now is repeat the same step and continue adding any CSS3 properties we want. Each property comes with its own easy to use set of controls that will update your preview and you can go back and tweak your settings at any time.

Our button really starts to look nice once we add a gradient, box-shadow, text-shadow and a few other finishing touches.

Animations

Another great feature of CSS3 Machine is the ability to build CSS animations with ease. By setting keyframes and selecting the properties to animate, you can create some really complex effects in only a few seconds.

Amazing Tool or Novelty?

CSS3 Machine has plenty of both pros and cons. It’s a beautiful app that is well designed and quite fun to play with. It’s a really nice way to see and interact with CSS properties and I will enjoy using it to experiment with new ideas in the future. I particularly like that it adds code for Webkit, Mozilla, and even Opera so that browser support is thorough.

However, the workflow is admittedly a little wonky and hard to figure out. An in-app tutorial or some noticeable stepping stones would go a long way. I would consider rethinking the flow of necessary actions to something more intuitive and beginner friendly. Keep the advanced features but make it so that an eight-year-old could pick up the app and build something cool.

Further, I definitely feel that the basic CSS section needs to be more robust. CSS3 is nice, but mostly when used in conjunction with CSS properties from previous versions as well. The ability to easily change fonts, add borders, etc. would be really nice. It would also be nice to have a quick-access code view in the app, similar to what you see in Safari but actually editable.

The biggest issue that needs to be addressed is merely stability. I honestly lost count of how many times the app crashed on me during the review process. $6.99 isn’t too much to pay for an awesome CSS3 app, but the investment merits stability.

Conclusion

To sum up, if you’re a web developer with an iPad and a desire to interact with CSS3 in a more visual manner, CSS3 Machine is definitely worth a download. It’s a really strong start to a tool that can be both fun and useful and I’m excited to see where the developer takes it in the future.

Leave a comment below and let us know what you think of CSS3 machine. Were you satisfied with your purchase? Is it good enough to use in a professional context? We want to hear all your thoughts and suggestions!