When I first started trying to populate my CodePen profile, I was having a little trouble coming up with ideas. I had a few while browsing Picked Pens, but my page still looked saddeningly sparse. Then one day I was playing Mirror's Edge and it occured to me how pretty and interesting its menu interface was, and I realized that I could do that with CSS.

This was the result:

The only really challenging part was the wave effect, but it forced me to do reasearch and to learn a new technique that used generated background images and animations. I was extremely happy with the result.

There are two main reasons video game interfaces are especially interesting and challenging to replicate:

  • They're inherently romanticized, fictional, and stylistic - rather than utilitarian or market-y - because of the purpose they're built for
  • They're built not using traditional UI technologies, but using the full rendering flexibility of a game engine

They mostly fit with the UI patterns and paradigms we're used to, but they push those patterns to their boundaries in (literally) the most fun and interesting ways they can. This makes them the perfect candidates for exploring the limits of what CSS can do, and having a blast in the process. My next project - still a work in progress - is to recreate the Overwatch UI components. It's already made me more familiar with nth-child selectors and radial-gradient, taught me how to make use of shadows to create a glow effect instead of a shadow effect, and made me aware of a few new details about the beahvior of transformations. And I'm not done yet.

Feel free to comment with any games whose UI's you think would be really interesting to recreate, or with links to your own Pens of them!


496 0 1