CSS Kata “The Lord of the Rings”

After last kata I’d really had it with CSS-ing “true semantic” markup. So this time I went all out: bend the markup backwards as far as it’d go. And though the html-gods may strike me down, they won’t do so before I’ve created this monster:

The Lord of the Rings - Comparison

I’ve spent 1 minute on a background to match the “feel” of the original poster, and a good 2 hours fiddling on the markup and CSS. The result felt moderately pleasing. I only felt like doing the easy bits, so I left the things I didn’t instantly know a solution to for what they were (the 3D effect on the letters, choosing a better font, etc.).

For reference, here is the monster we’re talking about:

So many spans, my eyes! Here’s the corresponding CSS:

See it in action on JSBIN.

This concludes my self-imposed challenge of CSS katas. Even though these katas (or the fact that I insisted on publicizing them) were probably not “lightweight” enough, the basic principle of doing katas was enjoyable. Perhaps I should secretly start another series…

Eye love you

At work I spend most of my time looking at a computer screen. At home I also spend most of my time looking at a computer screen. Basically: I spend a lot of time looking at a computer screen. Recently I’ve been looking for ways to make this as pleasant as possible. So far I’ve come up with the following:

  • I’ve installed bias lighting after reading this.
  • From the same article I found out Windows 7 has a built-in screen setup procedure in the media center app (it turns out LCD factory settings are on “eye scorching brightness”).
  • Work in progress: getting a new set of hi-res screens at work. See point 9 on The Joel Test.
  • Changing my monospace font to one in this top 10 list. Courier New is apparently almost as bad as Comic Sans.
  • I’m also experimenting with inverted color schemes for my programming tools: C# and JavaScript disguised as Ruby!

In the next few months there will be more changes to my setup, most likely. First up would be a second LCD, although I can’t seem to decide if I want the exact same monitor twice, or perhaps a different one next to my HD one. Either way, so far these changes were more than welcome: can’t imagine how I got along without them.

Interested? Go for it! Show your eyes some love!