Broken Links » Asides

A Busted Neon Sign with CSS Animations

Peter — Mon, 27 Jun 2011 13:32:01 +0000

For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.

One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.

HTML5 for Web Developers

Peter — Wed, 23 Feb 2011 20:01:15 +0000

The WHATWG have released the HTML5 Edition for Web Developers, which removes all of the overly-technical details aimed at browser makers and leaves the important stuff you need to learn — and with a nice readable stylesheet applied.

CSS Film Titles — Dr. Nakamats

Peter — Tue, 30 Nov 2010 15:46:54 +0000

I just watched a great documentary called The Invention of Dr. Nakamats*, and loved the style of the titles and credits (Vimeo video) by The Ronin. I thought I’d have a go at doing them in CSS, and you can see my first attempt here:

Dr. Nakamats in CSS3.

It uses 3D Transformations so needs to be viewed in Safari for the full effect, but degrades quite gracefully. I had a go at adding some animations to it but it didn’t feel right, so I’ve left that out for now. That aside, I’m happy with the way it looks and it was really easy to make. CSS has come a long way.

* If you’re in the UK you can currently watch this on 4OD.

The State of Web Education

Peter — Thu, 11 Nov 2010 13:47:47 +0000

A few weeks ago I saw Anna Debenham at London Web Standards give a hugely inspiring talk on the state of web development education. She later gave a briefer version of the talk at the Drumbeat Festival. I urge you to at the very least look at the overview and slides of the shorter talk, but if you can put aside 25 minutes you should really watch the video of the full one.

New jQuery release and Mobile Alpha

Peter — Sun, 17 Oct 2010 22:42:54 +0000

A new version of jQuery has quietly been released over the weekend. It’s only a minor point release but has a couple of features which look amazing: some selector functions now work up to 8x faster than the previous release; and there is support — very clever support — for HTML5 data attributes. Take a look at the jQuery 1.4.3 release notes for more.

Also released was the first alpha of jQuery Mobile, a touch-optimised amalgam of jQuery and jQuery UI. It’s actually a little buggy on my Galaxy S Android phone, but as it’s an alpha release that’s perfectly forgiveable. It looks pretty smart and comprehensive.

Web Directions @media 2010

Peter — Mon, 21 Jun 2010 13:50:11 +0000

Usually when I attend @media (that is, on two previous occasions) I write a follow-up blog post on what I saw there. Well I attended this year, and I’ve written the post, but it’s on the blog of my employer, Preloaded: HTML5, Mobile, and UCD: what we saw at @media.

An updated studio-style backdrop with CSS3

Peter — Mon, 26 Apr 2010 18:43:20 +0000

I’ve updated my post, Create a studio-style backdrop with CSS3, as I realised a way to do the reflection without requiring an extra image — using the scale transformation function to flip the image vertically.

The demo works in Firefox and WebKit.

Help wanted: Webkit multi-columns

Peter — Tue, 16 Feb 2010 20:09:51 +0000

I’m writing about the CSS3 Multi-column layout module and I notice that WebKit supports a series of proprietary properties: –webkit-column-break-after, –webkit-column-break-before, and –webkit-column-break-inside. However, despite the documentation saying that they’re implemented in Safari 3+, I can’t seem to get any of them to work.

Has anyone reading this ever seen an example of these in action? I’ve searched for demos but have found nothing. If you know anything about this, please leave me a comment; your help would be gratefully appreciated.

The Uncanny Valley and Realism in UI Design

Peter — Mon, 25 Jan 2010 23:54:01 +0000

Last year I began exploring the idea of the uncanny valley as it applies to creating prototypes, using a panel from Understanding Comics as an illustration. Lukas Mathis at UX Magazine has had a similar idea, but explored it in much more depth and with greater clarity.

Opera 10.5 has support for CSS transforms

Peter — Tue, 22 Dec 2009 20:28:30 +0000

The Opera team have released a very early preview of their next browser, which features an updated version of their Presto rendering engine. Opera 10.5 will support CSS transforms and transitions, so I’ve updated the demos on my old post, Anime with CSS and WebKit, to reflect that.