CSS Gradients, Transforms, Animations, and Masks

With the CSS Working Group seemingly toiling in obscurity to pin down the exact wording of specs that may never be implemented in a real-world browser, the WebKit team is leading the charge in moving the web forward by implementing new CSS features that you’ll be able to use in production in just a few months’ time.

Every browser contains a rendering engine responsible for producing a rendered page from the HTML and CSS code that makes up a given web page. WebKit is the rendering engine at the heart of Apple’s Safari browser (not to mention most recent Nokia cell phones and the Adobe AIR platform). You can download the latest work-in-progress version of WebKit to try it out.

Web designers interested in the future of CSS have a very good reason for downloading WebKit right now. The team has introduced some astounding new CSS features that Apple is planning to release in this June’s 2.0 update to Mobile Safari for the iPhone and iPod touch. Presumably we can expect an update to the desktop version of Safari for Mac OS X and Windows around the same time.

Here’s a run-down of the features announced so far and what they do:

CSS Gradients

CSS gradients let you fill regions (including backgrounds, borders, and generated content) with color-to-color fades instead of just solid colors.

A couple of examples of the sort of effects that you can achieve are shown in the image to the right. In the top image, four radial (circular) gradients are combined in a single background to produce a colourful effect. In the bottom image, a single linear gradient runs vertically starting at blue, then fades to white, jumps to green, and fades to white again.

To produce a gradient, you use the -webkit-gradient CSS function anywhere you might normally include an image in your CSS code. Here’s how that linear, blue and green gradient background is produced:

background: -webkit-gradient(linear, left top, left bottom,
    from(#00abeb), to(#fff), color-stop(0.5, #fff),
    color-stop(0.5, #66cc00));

A full description of this new feature, along with some more examples that you can check out can be found on the WebKit blog. You’ll need to download WebKit to see them, of course.

CSS Transforms

CSS transforms work much like CSS relative positioning (which all major browsers support), in that it lets you modify a portion of the page without affecting the page’s layout. With relative positioning, if you move an element 500 pixels to the left, that element will be displayed in its new position, but it will still occupy the space in the page where it was originally located.

With CSS transforms, you can move an element just as you can with relative positioning, but you can also scale, rotate, or even skew an element.

In this screenshot, I’ve used a CSS transform to rotate the entire page of sitepoint.com two degrees. Especially remarkable is that, after the transform is appled, all the text remains selectable, and you can still use the search form at the top of the page.

The code to do this is straightforward:

body {
  -webkit-transform: rotate(-2deg);
}

If you download WebKit, you can try this yourself on any page just by typing this code into the location bar (all on one line):

javascript:_=document.body.style;_.WebkitTransformOrigin='100%%200%';_.WebkitTransform='rotate(-2deg)'

The WebKit blog has a good summary of this feature, and the team has also published an initial draft specification for consideration by the W3C.

CSS Transitions

Something you learn pretty quickly once you start playing with CSS is how to change the appearance of hyperlinks when the user hovers over them with the mouse. This code, for example, will change the text of a link from blue to white:

a:link, a:visited {
  color: #00f;
}
a:hover {
  color: #fff;
}

With a little JavaScript, you can make a change like this at any moment, simply by changing the class assigned to an element.

CSS Transitions let you animate these changes smoothly. Instead of the color of link text snapping from blue to white on hover, it can fade smoothly from blue, to light blue, and finally to white:

a:link, a:visited {
  color: #00f;
  -webkit-transition: color 1s linear;
}
a:hover {
  color: #fff;
}

You can combine transitions with CSS transforms to achieve some really exciting effects. In this screenshot, I’ve modified the main navigation bar on sitepoint.com to scale up and slightly rotate the main navigation buttons on the site when they are hovered over. With CSS transitions, button grows and tilts smoothly when the mouse passes over it, and then it shrinks back into place when the mouse leaves.

Besides looking pretty slick, this effect has the added advantage of making the links easier to click.

The WebKit team has submitted a draft specification for CSS transitions for consideration by the W3C, and the WebKit blog has a nice post with some examples that you can try in WebKit.

CSS Masks

Just announced today, WebKit now also supports CSS masks. If you’ve ever used a graphics program like Photoshop, you’ll be familiar with the concept of a mask. Essentially, a mask lets you make portions of an HTML element translucent, or entirely invisible.

In the example at right from the WebKit blog, an SVG image of a red circle with a black border is applied as a mask to a photo. Notice how the full color of the photo shows through the mask along the edge of the circle, due to the black border.

The standard CSS opacity property is effectively a solid mask that is applied to the entire element. With CSS masks, you can apply an image, an SVG vector shape, or even a CSS gradient as a mask to achieve different effects. And as with all WebKit’s new CSS effects, masks are surprisingly robust. You can apply them to HTML elements of any complexity, including form fields and even video!

The Future of CSS Today

For years now, web designers have looked to W3C specifications to tell them what they might expect from the browsers of the future. As the W3C’s efforts in this area have languished, however, cutting-edge browsers like Safari, Opera, and Firefox have been picking up the slack by implementing new features for designers to try out today.

As with any new feature, the jury is still out on the real-world usefulness of many of these new features. Particularly in the case of animated transitions, the potential for abuse is pretty strong. For every subtle and pleasing effect that we see created in the future, we may see five or ten of these (WebKit required to see the effect).

While it’s true that we won’t be able to rely on any of the above features being available in the majority of browsers anytime soon, a real-world implementation will exist in the wild in just a few months. That’s more than can be said for most of the CSS3 specifications that the W3C has produced over the years.

To keep up with these and other new CSS features making their way into WebKit (like CSS variables, CSS canvas drawing, and CSS keyframe animation), visit the WebKit team’s Surfin’ Safari blog.