Given that I’m fine with not blogging for a few months, I might as well also be fine with posting twice in one week! I had some inspiration to work on the second CSS Kata: “Citizen Kane”. Here’s what I decided to do differently this time:

• Include all the other texts (next to the movie title) as well (as suggested by a friend of mine);
• Pick low-hanging fruit in making my effort look less shitty (e.g. using Paint.NET to find the correct color codes in the original poster);
• Use this Kata as an excuse to make an animated gif;

Here’s a comparison of the final result:

Pretty darn close! To clarify, the rightmost one is the same as the middle one with an opaque background showing the non-textual elements on the movie poster.

Oh yeah, I mentioned an animated gif, right? I kept track of all the changes I did, here’s my train of thought visualized:

(Animated GIF may not display correctly in RSS feed readers; open image or post directly to view it.)

No cheating was involved: these were the actual steps from zero to final result. Here’s the html I ended up using:

And this is the CSS to get to the end result:

Next up: “Face/Off”. Tomorrow, next week, next month, next year: who knows! Whenever I feel like it. Because blogging should be (mainly) for fun!