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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • John Doe

    astounding new CSS features that Apple is planning to release in this June’s 2.0 update to Mobile Safari

    Citation needed.

  • JarretCade

    Looks very interesting and very promising so far.

    Hopefully IE and FF will catch on soon.

  • BungleFeet

    Isn’t taking us back to the “bad old days” of the browser wars, where each browser competes to add new, flashy, proprietary extensions to the standard?

  • Paul D. Waite

    Hopefully IE and FF will catch on soon

    Not so sure about that. I believe a lot of these shiny new Safari CSS features are, in terms of syntax and effect, basically ports of graphics features already built into Cocoa (and whichever bits of Cocoa Apple ported to Windows to support Safari there). The drop shadow CSS syntax, in particular, is pretty much identical to doing the same thing in Cocoa.

    As such, it might be a whole bunch more work for other browser vendors to implement it in their codebases. (Might not though: I’m not a programmer, so frankly I haven’t got much of a clue about all this. Aren’t you glad I commented?)

  • Tnargeel

    Some nice ideas in there. I’m not too sure about CSS-masks but I’m usually proved wrong.

    Certainly something to play with & that is always a good thing.

  • Pragmatic Developer

    IE introduces transitions? BAD!
    Alternative browser introduces transitions? EXCELLENT!

    Seems to me that web-developers will welcome any non-standard innovation with the proviso that it wasn’t introduced by MSIE

  • Marlun

    Hmmm… Isn’t the Safari browser now doing exactly what IE and Netscape did before which brought us into this mess of browser specific features forcing us to create hacks?

  • dpages

    Without wanting to start the usual flamewar (and I’d hastily point out that I use both Macs and Windows PCs in my development environment), how is this different to the Netscape/IE development paths a decade ago, with both browsers offering their own ‘innovations’ which eventually led to the madness of browser sniffing to feed each of their non-standard elements?

    It’s interesting, and I’d love to see these suggestions approved and become part of the standards, but the last thing I want is three or four different browser camps all moving in different directions at the same time.

  • http://ian.sundermedia.com TheLunchBox

    @dpages: It isn’t.

    Fortunately, Safari passed IE5 a few months ago according to the w3schools browser stats, so a few dozen people will actually be able to enjoy this.

    Unfortunately, this shows that as we move forward we will likely either deal with a batch of browser-specific features or no change at all for a while. Innovation is often driven by small dedicated groups, like the webkit team, and not by a committee of bickering web designers.

  • http://www.maggot.tv sowen

    Whilst the webkit css implementations are great (I’ve just downloaded the iPhone SDK and am currently messing around with it) I have to say that sometimes the hypocrisy within our industry does make me smile.
    As dpages pointed out, Microsoft and Netscape implemented their own innovations to gain market share, and we as developers are still grumbling about that ten years later. Now slap a bright shiny Apple iBadge on the same tactics and it’s all cuddly, warm, kittens and puppies. I’m sorry, call me cynical, but I think the blogosphere’s reaction would be a whole lot more venomous had those CSS functions started –ie and not –webkit.
    Don’t get me wrong, I want all the gradient and transform goodness, I really really want it, but if I’m going to use it I need it on all A grade browsers. Who here really wants to go back to the “You must view this page with x browser” days, or worse still trying to explain to a client that only 2% of their audience can see all those lovely CSS bells and whistles.

  • http://www.caseyburk.com Wolf_22

    @TheLunchBox: Bickering, no, but diplomatic, yes. Let us not forget the strides Microsoft has made with IE7 and let us also not forget the trends that Zen Garden, Sitepoint itself, Molly E. Holzschlag and many others have contributed to the cause. I wouldn’t call these groups small nor would I call them “bickering web designers”, well, Molly maybe, but the others… HA!

    As for the Webkit… While I lack the desire to go and download it, I will say that things like this will only give me more work to do in the future, which alludes to more financing, which alludes to more shopping.

    I think this is a splendid product!

  • rikcat

    I think a lot of you are missing the point of these new features. These are aimed at the desktop, but at the iPhone and Apple owns the web browser space in the mobile world right now.

    Rik
    http://www.rikcatindustries.com

  • http://ian.sundermedia.com TheLunchBox

    @Wolf22: I was referring to the W3C, not neccesarily the working group. Sorry for the confusion.

  • http://panesofglass.org/ aranwe

    While adding -webkit may not be the fuzziest feeling, it at least continues to allow us to use progressive enhancement with CSS to provide a better alternative for those willing to try better browsers and exercise our creative abilities. Before, so little was possible that it really was an issue. Now, every browser (at least current ones) render well enough to give a decent baseline design.

    So I think it’s different this time around… though sowen is correct about the -ie issue.

  • Matt Wilcox

    “I’m not too sure about CSS-masks but I’m usually proved wrong.” – I for one am glad, I’ve been simulating masks in CSS for two years: http://mattwilcox.net/archive/entry/id/992/

    With regard to Webkit implementing things on their own, I think that’s simply the way it’s got to go. The W3C have taken far too long faffing about and effectivly allowing things to stagnate and become boring as hell. It’s going to take a kick up the ass like this to get them going at anything like the rate (and in anything like the direction) we need them to be.

    Also, we’ve seen that making standards first and then having browser manufacturers implement them just doesn’t work. In most industries it goes the other way around – people make things and then they become a standard once trial and error has proven what people actually want and what works best. Does make for rather a rocky ride that way though.

  • http://patrick.quaint.info multifarious

    interesting concepts there but I have to agree with the other gentlepeople here: I thought browser stress was becomming a thing of the past and now they’ve gone and open this can of worms.. I think for the time being I’m going to keep this to myself, no use alerting our design department on this, especially not since these are all in the MAC camp as it is…

    And I agree with Sowen, this kind of hypocrisy is hilarious..

  • dusoft

    Thank you to WebKit developers for breaking standards and introducing their own proprietary extensions. Greet way to go, indeed! So is Apple just being another MS?

  • boen_robot

    I really really don’t like the idea of animations belonging in CSS.

    It really feels like a behaviour thing, though when one thinks about it, so is :hover. But at least :hover is more of an event, not an actual “action” to do on an event.

    All other WebKit suggestions I like – CSS variables, masks, transforms… but animations?!? No, no, no. Its just not right. And the abusing example at the end of this article is only the tip of the iceberg of evil that comes with this power sitting so low.

  • ClaireP

    I wasted about 8 hours today trying to figure out how to make webkits work. I got everything going right up until the build. Then it crashed.
    The directions on the site are about as helpful as handing someone a plastic bag of bicycle parts with the instructions reading: Put It Together!

    I am a semi-expert at CSS, but installing C+++ with no good instructions was a quantum leap for me – and I missed the ‘um’ part of it.

    It looks really interesting, but I think I’ll stick to Stu Nicholl’s CSS Play site for innovative CSS experiments that DO work.

    ClaireP

  • http://www.jasonbatten.com NetNerd85

    Cool but no.

  • Tim

    What’s really funny is that IE has had these available for years via an activeX plugin using what it called filters (IE specific – http://webfx.eae.net/tools/filtertool.html) plus the transform activeX for things like skew etc. Granted it uses really weird syntax and this looks a lot easier to use, the only difference this time around is that by putting the -webkit prefix that are explicitly stating it’s a webkit specific extension (which isn’t a new thing, refer -mozilla and -opera) and it’s natively integrated into the browser.

    So is it really that cool or is it an attempt to standardize something that another browser introduced eons ago ala XmlHttpRequest? Looks to me a bit like history is repeating itself.

  • Jon

    I don’t really understand all the hate for the W3C. Many of the CSS working group’s most active members are not “bickering web designers”, but representatives from the various browser vendors: Anne Van Kesteren from Opera, David Baron and Fantasai from Mozilla, and yes, David Hyatt from Apple. They have done a lot of good work defining modules for CSS 3 which already have partial implementations in existing browsers, accessible via the same -webkit style identifiers as these new extensions.

    I won’t pretend that the progress of the standards isn’t slow, but the major obstacle to the progress of CSS has not been the bureaucracy of the W3C, but Microsoft and Internet Explorer. IE’s dawdling development pace and dominant market share ensured the work of the W3C long meant little in reality. Now however, things may be changing. IE is back in active development and, under pressure from the EU, Microsoft are having to at least make a show of supporting standards, with IE 8 being CSS 2.1 compliant by default.

    The W3C and the various browser vendors now have a great opportunity to turn up the heat on Microsoft. If they got the most important CSS 3 modules published as recommendations and proper implementations available in production browsers, then it would apply pressure to MS to do the same, or appear to be neglecting web standards. As it is, MS can say “CSS 3 isn’t finished, and nobody else fully supports it anyway, so why should we?” And what do Apple do with this opportunity? They start hacking on non-standard extensions to Webkit just because it’s easy to do so and gives iPhone developers some shiny effects to play with.

    If Apple continue in this way, they risk harming the progress of the open web, and dooming us to a future where the proprietary likes of Flash and Silverlight are the only technologies available for doing useful work.

  • Stevie D

    I think the main difference between proprietary CSS extensions and the browser wars of the last century is in terms of compatibility.

    If a developer used marquee or blink, or CSS attributes like bordercolor there was a pretty good chance he’d be expecting all browsers to display the same, or would block/ignore anybody without his preferred browser.

    If a developer uses -webkit or -o prefixed attributes, he is acknowledging that this is cutting-edge stuff that will only work on the latest version of a particular browser, and it is a golden nugget for the users of those browsers, not a critical part of the page. Other attributes can still be applied to give a well-defined rendering in all other browsers.

  • http://www.thefunkhouse.co.uk SLEE

    this is all well and good but what about backward compatibility?
    ( i wish ie6 would just die)

  • Stevie D

    SLEE:

    this is all well and good but what about backward compatibility?
    ( i wish ie6 would just die)

    The good think is that it is perfectly backwards compatible. IE6 will render it as though that line wasn’t there! So as long as you aren’t relying on the feature, but are using it just as an enhancement for the lucky few, it will be absolutely fine.

  • Kevin Ansfield

    Rik’s post above is on the money. This definately looks to be aimed more at the mobile/iphone/ipod touch market than the mainstream desktop web browsers.

    Sure, the additions are nice, but I think Apple have a bit more sense than to add these with an expectation that they will become standard for the desktop. Apple-only apps and mobiles only I’m thinking.

  • http://proiz.ru eXtaz

    That is great. Thanks for tops.

  • Anonymous

    Good to see that Apple are still pushing the envelope a little, yet at the same time are still able to be fully standards-compliant, unlike MS.
    For all those who are comparing these new “candidate recommendations” with the bad old days of the Browser Wars, note that MS are introducing an (almost) entirely new HTML tag to help handle their lack of standards support, which is only slightly better than their ActiveX / filters etc.

  • tech.no.logi.es

    Glad I could be of use as your counter example. I made the 3D rotation effect just as a demo. The same obnoxious things could be done quite easily with Flash these days, and people keep it to a minimal, so I’m not too worried that CSS transitions/animations/what-have-you are going to be cast upon the majority of the web like some sort of plague. We’ll be fine. And the people who have legitimate use for such things will benefit (and remember: the web isn’t just for informational web pages anymore, so “legitimate” is relative).

    Zachary
    http://tech.no.logi.es/

  • http://www.sblgraphics.com sblgraphics

    Great stuff! Thanks for sharing.

    Regards,
    SBL Graphics

    http://www.sblgraphics.com/photo-masking_service.aspx

  • http://xenomuta.tuxfamily.org/ XenoMuta

    Very quick and useful.