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:
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.
As I get ready to kick off a couple of personal web projects, I’ve been reading Enric Jardí‘s book, Twenty two tips on typography*, a primer on what works and what doesn’t in typography.
Although Jardí mainly works on type for print, most of the rules also apply to type for the web. In this article I’m going to highlight five of his tips which are useful in deciding upon the right type for a project.
Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).
One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.
The way to get around that is quite simple; use local() to check if the font is on the user’s system first.
With (standards-compliant) browser innovation firmly back on the agenda, there’s a lot of exciting new technology to get to grips with. This week, Google have thrown their weight firmly behind HTML5, while a new start-up aims to bring web fonts to all.
I’m at home with the flu at the moment, so taking the opportunity to un-star some items in Google Reader; this post is a link-dump with a little added comment.
A few of them have been in my favourites for a couple of months, so apologies if you’ve seen them already.
I’ve been doing quite a lot of site mapping recently, and looking for a way to escape the standard boxy top-down view. In searching for examples of different ways to present the information, that are pleasing to look at but still immediately convey meaning, I found a number of interesting examples.
Below are the pick of the results, along with a few that don’t quite work, and some old standbys. I wanted to include images to illustrate this, but in most cases the license didn’t allow.
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.
[#] 3 Comments