Part 1: Graphics and Animation in HTML5 and CSS3

Previous     Next

Although it’s not part of the HTML5 spec, CSS3—the next major revision of the Cascading Style Sheets standard—is often associated with HTML, and Gubbay suggests that this is the best place for most designers to begin exploring the new web technologies.

For starters, he notes that CSS3 makes it easier to create static graphic effects such as gradients and rounded corners. But beyond that, CSS3 enables Flash-like animations and transitions without the need to write JavaScript code. “I think that’s a really big deal for people,” he says. “For a core graphic designer, even HTML and CSS is hard enough. JavaScript is a whole other level.” So with CSS3, “a bunch of stuff becomes accessible to them that they didn’t have before.”

You can see a good example of CSS3’s animation capabilities by viewing this Spiderman cartoon by Anthony Calzadilla (you’ll need Safari or Google Chrome). Calzadilla also provides a detailed tutorial on how he created the animation. Although the underlying HTML includes some light JavaScript code, the object motions are implemented entirely with CSS.

CSS3 introduces another feature called Media Queries that promises to be a godsend as more web content is viewed through smartphones and tablets. It automatically detects the user’s screen size and orientation, and then lets you define CSS styles optimized for those dimensions. This means that a single web page can automatically configure itself for a desktop computer or smaller devices, as long as the browser supports CSS3. Click here to view a website that includes a brief tutorial and links to examples.

Scalable Vector Graphics
Although CSS3 enables relatively simple Flash-like animations, it “can’t really go the full spectrum” of interactive rich-media applications, Gubbay says. However, web developers seeking alternatives to Flash will have two other options: the Scalable Vector Graphics (SVG) format and HTML5’s element.

SVG is not a new technology. Based on XML, it was first proposed as a web standard in 1999. However, leading browsers were slow to provide native support for SVG, so a plug-in was required to view the files. The current version of Internet Explorer still requires a plug-in, but Mozilla Firefox, Google Chrome, Safari and Opera now have at least partial SVG support built-in.

The format enables interactivity and animation via JavaScript or other languages. “You have elements, and using JavaScript you can programmatically change those elements,” Gubbay explains. Various websites (see here and here) have sample SVG animations that might at first glance appear to be created in Flash. However he says it’s still not easy to do. “You have to be a fairly good JavaScript developer to make something like that work, and work across browsers.”

The Element
The new element in HTML5 defines an area on the web page where developers can use JavaScript commands to “draw” and animate shapes such as circles, rectangles, lines and arcs. For example, “fill.rect(0,0,200,200)” creates a filled rectangle in the upper-left corner measuring 200 by 200 pixels. You also can use JavaScript commands to define fill colors, line widths, stroke angles and other attributes, including animation effects. In addition to 2D graphics, the element can display 3D graphics through an application programming interface (API) known as WebGL.

is like a black box, and then you can programmatically write to it,” Gubbay explains. But as with SVG, it takes a high level of JavaScript know-how to do this. He notes that you can find some impressive examples of content created in , “but massive amounts of code were written to make all of that work, and only a handful of people can really do that level of stuff.”

If these technologies catch on, he expects that application-development frameworks will eventually emerge to make coding easier. These are collections of software “building blocks” that take much of the grunt work out of programming, and he sees them as important enablers for HTML5. For example, a developer won’t have to worry so much about supporting specific browsers, because the framework will “abstract out the underlying differences,” he explains.


Most design books capture the results of good ideas, but very few capture the idea-generation process in way that can inspire fresh thinking and better work. This book represents a rare and remarkable look into the creative process of the top minds in advertising, and answers the question, “How are big ideas born?”




* Live and On-Demand DesignCasts
* Visit – Your comprehensive source of books, products and tools for designers
* Sign up to receive the HOW eNewsletter.