Another pair of articles by me got published today; they’re both introduction-level:

Adventures In The Third Dimension, on Smashing Magazine, is a beginners guide to CSS 3D Transforms, explaining the syntax with a few demos; and for Ubelly I wrote The Five-Minute Guide to CSS Animations, which does the same job for CSS Animations.

I’ve an article coming up for .net Magazine soon; it’s called 10 CSS Techniques for 2012, it’ll be the cover article, and I’m very excited about as I wrote it in collaboration with Andreas Johansson, Harry Roberts, Lea Verou, Nicolas Gallagher, and Paul Adam Davis, all of whom do great work.

After that I have two more articles to write, should be tech editing a book on CSS3, then probably starting work on my own second book. 2012 is going to be a very busy year.

I’ve put together my list of the 20 Best CSS Sites of 2011 for .net Magazine. Choosing only 20 turned out to be really difficult, as I wanted to get a broad range of approaches. I’m sure there are plenty I missed out, including any that aren’t in the English language.

For The Sass Way I wrote about How Sass Can Shape The Future of CSS, showing how many of the features contained in the pre-processed CSS extension are under discussion for inclusion in future versions of CSS.

Webdesigntuts+ interviewed me about my book and my opinions on CSS3, including what I’m excited about for the future, and things to beware of when using cutting-edge properties.

And again for .net Magazine I discussed The Future of CSS Layouts, a subject I’m really excited about at the moment, which led to an article that was very popular with .net’s readership.

I currently have two more articles waiting for technical review and proofreading, which I hope will see the light of day shortly, and have promised to write another two as soon as I get time (as well as one for a dead tree publication). I’m very happy to be writing about my craft, and appreciate feedback or further requests for articles from other sources — although, I won’t be able to write quite as much next year as I’m planning to start my second book.

As the bulk of our audience use modern browsers we were able to use generated content, web fonts, gradients, transitions and animations to give an enhanced experience for them. You can read more about the front-end build on the Top10 blog, and although I’d be happy to talk through all of it, in this post I’m going to focus on our use of CSS animations.

We’ve used animations in quite a few places across the site, notably on this warning button:

Warning

And also on the main logo (hover to see it animate):

Top10

Although both seem different, they actually use the same very simple key frames:

@keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

This just animates the background position from the left to the right, but both examples utilise it in a slightly different way.

The background of the warning button is created from CSS gradients, which create a diagonal candy stripe pattern across a set area:

.warning {
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 16px), linear-gradient(#FFA1A1, #FF4B4B);
background-position: 0 50%;
background-size: 68px 60px;
}

The reason that we used background-size to limit the area is that this is what allows the animation to happen; using just repeating-linear-gradient means that there’s no background position to be animated. As a fallback we provided the same pattern as an image.

The animation controller itself is very simple; it runs for 3 seconds, and repeats infinitely, making the pleasing ‘barber’s pole’ effect:

.warning { animation: top10 3s linear infinite; }

The logo shine effect, as I mentioned above, uses the same keyframes. The image itself is a sprite which has 21 iterations of the logo, and this is animated over half a second, but with the addition of the steps() method:

.logo:hover { animation: top10 500ms steps(20) 1; }

This works somewhat like a Zoetrope or a flip book; the logo sprite is moved from left to right in 20 discrete steps and provides the illusion of animating the shine.

I have to state a debt of gratitude for the inspiration for these effects; I read about steps() in the article Pure CSS3 typing animation with steps() by the brilliant Lea Verou, and the striped button was influenced by Christian Heilmann’s Rainbow Dividers — both came along at exactly the right time for our site build.

But as of Tuesday next week I’ll be working at Top10, helping the currently small team grow and develop from a start-up to an established digital brand. What most attracted me about the move from agency to product is the opportunity to be involved in evolving and shaping, to analyse and iterate; as the song has it: performance, feedback, revision. The current Top10 team are a keen and clever bunch, and I’m looking forward to working with them.

Outside of work, my book, The Book of CSS3, has been out for a few months now (and has been getting some really positive reviews), I’ve got some print and online magazine articles planned for the near future, and an outline is forming for my second book.

Later this month I’ll be one of the instructors at the forthcoming UX Bootcamp: Prototyping in Code workshop. I really enjoy helping, teaching and communicating my craft, so I’m really happy to have the opportunity to do this.

Since the beginning of the year I’ve been giving a series of talks at web development groups around London. I’m looking to do more speaking, so if you organise or take part in any local web dev groups and you’re looking for speakers, please do let me know. There’s a full list of conferences I’ve talked at on Lanyrd, and you can see video and slides of my latest talk.

I don’t think I’ve ever been busier, or more excited and nervous about what’s coming next!

The drawback of this is that it’s not ready for use just yet—browsers that don’t support SVG in background-image will not provide any fallback, even if you supply another background-image value; so in non-supporting browsers, no image at all will be displayed.

This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.

In order to have browsers which don’t support SVG display a PNG image instead, you should use this code:

E {
background-image:  url('image.png');
background-image:  none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

Browsers which support SVG and multiple backgrounds will show the SVG; browsers which don’t support SVG will fall back to the PNG in the background-image stack. As far as I know, all browsers which support SVG also support multiple backgrounds; any which don’t (i.e. IE) will fall back to the PNG in the first background-image declaration.

Update: Thanks to a comment I have amended this technique. IE was not falling back to the first background-image as it should have done, but I got around this by adding a none value in the declaration. This invalidates the rule in IE and forces the fallback to the previous declaration.

You can see a demonstration of it here: Background SVG with PNG fallback — demo.

This technique is not without its own caveats, however. First and foremost, the SVG must not have a transparent background, or else the PNG in the background layer below it will probably show through. Also, depending on how fast the SVG file loads, the PNG file may show up first and then be covered over.

Finally, if you’re using the same background image at different sizes and either your browser doesn’t support background-size or you don’t want automatically resized PNGs, you’ll have to use the rule for each instance:

E {
background-image:  url('image-small.png');
background-image:  none,url('image.svg'), url('image-small.png');
background-size: 100% 100%;
}

F {
background-image:  url('image-large.png');
background-image:  none,url('image.svg'), url('image-large.png');
background-size: 100% 100%;
}

And of course, if you’re creating multiple PNG images anyway, you may feel there’s not a lot of point in using SVG images as well. I’ll be the first to admit that this isn’t a completely bulletproof technique, but I offer it in the hope that in certain circumstances it could be useful.

In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.

I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).

On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.

I’ve been slowly introducing IA into my role over the past three years, and so this is a logical step for me to take. I’ll be sad to leave my current agency, but delighted to be moving to somewhere I’ll be able to focus on what I think are the next hot topics on the web: findability & usability.

In a piece of happy serendipity, there’s a big user-centred design project underway at the moment with the redesign of the Drupal community site and, with it being open software, the whole process is being conducted transparently — which means a great opportunity to study and learn. Leisa Reichelt is leading the discovery and planning stages, and blogging every step; you can read the draft Experience Strategy, how Drupal users were defined, and how to get involved. Definitely worth keeping an eye on.

I won’t be leaving web development behind completely; it’s my passion, I wouldn’t be able to. Especially now that we’re entering into very exciting times with the forthcoming release of IE8; not because of any new features, but because we’ll finally have a completely stable, cross-browser platform of CSS2.1 to develop on. The IE team are doing a sterling job of releasing information about the new browser; for example, discussing developer tools and browser-specific CSS prefixes. Let’s hope they don’t fall into the post-launch silence that happened after the release of IE7.

So, interesting times to come. First, however: a holiday. Back later.

So I was intrigued when I saw what I believe may be the first instance of this strategy being used here, for Orange’s new “I am” campaign:

I queried the top four search engines here in the UK (Google, Yahoo!, MSN, Ask) and a link has been sponsored on all four. However, top results were returning a variety of different results, none of them relating to this campaign.

Like the author of the Japan article, I wonder how susceptible this is to counter-attacks from rival advertisers (or mischief-makers) who could game negative results to the top of the rankings? It’ll be interesting to see how this develops.

I’ve given this one a version number of 0.5, as I still have a lot I want to do with it, notably: embedding more microformats in the code; adding more progressive enhancement to the CSS; making more use of WordPress’ tagging system; and testing more thoroughly in IE.

However, I’m pretty pleased with the more typographic direction in this design, and am excited to be using a theme I genuinely care about.

If any readers have any constructive criticism to give, please go ahead and do so in the comments. However, do please be gentle with me!