CSS Film Titles — Dr. Nakamats

Warning This article was written over six months ago, and may contain outdated information.

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.

3 comments on
“CSS Film Titles — Dr. Nakamats”

  1. Hello! Peter
    Got to know about via CSS3.info

    Checked the above demo in FF4
    and in Chrome results were different. May be for desired output… you will prefer sticking to Chrome.

    Btw, just sharing in mean time..
    I had also watched a TV show and title i am also thinking to do it.. via CSS3 transitions. This post add more into the push of the execution.

    Thanks
    Gaurav M
    Namaste from India aah!

  2. Hi Gaurav, thanks for the comment. I know it displays differently in different browsers; I use it as an example of how to make pages that degrade gracefully. Let me know if you make your TV show titles, I’d like to see them.

  3. Wow, I like it.

    May I ask, where you got the background image [1] from? Is is published under a Creative Commons license, maybe?

    [1]
    http://www.broken-links.com/tests/images/tokyo.jpg