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”.

screenshot

Connecting to CSS3 On Your Mac

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).

screenshot

A sample of the CSS output

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.

screenshot

Adding a new stylesheet

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.

screenshot

The main interface and preview

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.

screenshot

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

screenshot

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.

screenshot

Adding a property.

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.

screenshot

Basic CSS

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

screenshot

Basic CSS with updated preview

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.

screenshot

Adding custom CSS

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.

screenshot

Border Radius

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.

screenshot

Finished button

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.

screenshot

Adding an animation

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!


Summary

CSS3Machine makes the most advanced CSS3 styles simple to implement and fun to experiment with. Easily create gradients, drop-shadows, and 2D- and 3D-transforms. CSS3Machine even builds WebKit animations in seconds!

8
  • http://neveranullmoment.com Patrick Thomas

    just one question…why?

    • Joshua Johnson

      When you experiment with CSS using different input methods you’re bound to come up with some fresh ideas and combinations.

  • John

    Would it not make more sense to have an iPad appStorm area? I regularly check in to the iPhone area of appStorm to see what iPhone apps are featured.. only to see a long list of iPad apps.

    Not being an iPad owner.. this is pretty useless to me.

    • http://appflow.co.uk Luke Barnes

      There was a questionnaire when the iPad came out as to whether or not AppStorm were to do this… personally, I agree with you (although I’m an iPad-no-iPhone user) that they probably should be separated.

      Obviously the voting users had other ideas…

      • John

        Fair enough, I wasnt aware. Consider the explosion of iPad apps.. perhaps this decision should be re-considered now.

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      Because the costs of launching and maintaining an additional site are significant, we decided to lump all things iOS into iPhone.AppStorm.

      The iPad app market is really taking off so we’ve definitely had quite the surge in iPad articles lately. Don’t worry though, we’ve got plenty of awesome iPhone news and app reviews lined up for you soon!

      • John

        Thats understandable. If the situation is permanent, my suggestion would be to rename this area if AppStorm ‘iOS apps’, and not iPhone apps.

  • http://www.otadesigns.com/ Hawaii Web Design

    This is pretty interesting… Although, if it could support IE7 then I would be more impressed. Not bad I guess but keep trying. Faster to just type out the code in your selected application I would think.

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      This might be true for some things, but complex animations can be extremely code-intesive. CSS3 Machine for me, is a vast improvement in this area over trying to figure all that stuff out in my head.

  • http://connorcrosby.me Connor Crosby

    I think I will stick to a computer.

  • http://techinch.com/ Matthew Guay

    If you’re considering giving CSS3Machine a shot, head over to my review of it at http://techinch.com/2011/01/17/giveaway-css3machine-web-creativity-on-ipad/ … I’ve got 5 copies for giveaway, so just leave a comment there to enter!

  • http://ganar-buen-dinero.blogspot.com dinero

    The picture with the shadow on the wood is really beautiful!

  • http://eset-username.blogspot.com/ moviecritics

    Nice ! Easy ! Go ! Thanks Bro. Really helpful article. I’m gonna apply this thing.

  • http://Logicoptimum.com Boti

    When will be the available to be bought in Romania :( unfortunately currently I can’t buy it…

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow