In November CodePen decided to pull out the more geeky side of us. They chose something really iconic as a theme of the challenges that month – board games. We have contact with them practically from an early age and they have been played in most cultures and societies throughout history. I’m sure each of us can name at least one board game, like Cluedo, Monopoly or even Tic-tac-toe. The main goal of the challenges was not to re-create the games but to use them as a theme for the design. Does it sound easy? It sounded for me in the beginning. While getting through, it started to be more and more challenging. Let me show you what I achieved. Shall we?
In the first week, we were dusting off one of the most infamous family games – Monopoly. “The game which can destroy friendship or family bounds” – as some people describe it jokingly. Well, in the beginning, I thought it will be a pretty easy task to do. I sat down, started sketching my ideas, looking for inspiration and I was ending up with blank page every time. There was no obvious path to follow as I didn’t want to copy someone’s idea. My first approach was to create my favourite pawn from the first edition – the top hat. After a couple of tries, it appeared that I would have to use SVG in most of the creation while I wanted to build it with CSS and HTML only.
I started reading about the history of the game and then I found out how many different editions were created. While learning about the differences between the editions I decided to create a property card. I found out that Monopoly: The Mega Edition has 9 new properties and one of them was “Florida Avenue” – which I chose. To create a double-sided rotatable card I divided the design into two separate layers – front and back. They had to be in exactly the same place so I used
position: absolute on both of them. To hide back face of the card while rotating, each of the layers had to have
backface-visibility set to
hidden combined with proper
z-index value. The last bit of work was concentrated on adding perspective to the card. First of all, the front element had to be rotated by Y-axis by 180 degrees. After that component which was wrapping both layers had to have set properties
transform-style: preserve-3d and
perspective to high value. Finally, adding
transform: rotateY(180deg) to the main wrapper while hovering the card made it double-sided rotatable!
And what is your favourite card from this game?
The second week welcomed us with a family game which I had never heard about before. Colourful, full of amazing characters and joyful game – Candyland. My first idea was to recreate one of the figures without using SVG and I chose Mr Mint. After the first steps, I dropped the idea as the character had a complicated shape and pose. Even though I changed my first concept I decided to stay Mr Mint’s main colours – white and red.
It was the week when I was sick a lot so in the evenings I tried to space out a bit while playing Indie Games like “Stardew Valley” or “Beat Saber”. I started asking myself a question “How would the loading screen to my game look like if I was going to digitalise Candyland?”. I started playing with different ideas of elements – buttons, progress bars and font families. That’s how the final idea started to form. After a while, I ended up with an animated progress bar which looked like a big spiral lollipop and a stylized title in the middle of the screen. “That’s not enough” – I thought and decided to add more theme centred elements. I decided to enhance background by adding candy rain made of different type of sweets. To achieve that I used css-doodle library and assigned different emoji as a value of the
content property for every cell’s
:after selector. To get more funky and childish effect I added bounce movement to the title. Achieving that was fairly simple thanks to the
cubic-bezier function in
transition-timing-function. What do you think about the loading screen I created? Would you give a try this game? 😄
In the oncoming week, I hoped for something easier and more relaxing but I couldn’t be more wrong. For the third challenge, CodePen creators decided to choose the game I’ve never heard about again. The Game of Life. That was the point when I began considering my knowledge of board games 😂 I started with research about the game and anything connected to it. And I found out that in 2010 Japanese company “Takara” produced dedicated controller compatible with PlayStation 2. It is called “Game of Life Roulette Controller”. Fascinated by the design I decided to recreate it.
I started my work with a quick sketch of every element on the paper. After separating the design into smaller parts I arranged them into groups so I could create them in a particular order. The whole creation took me two days to build it as I had to hardcode most of the element’s position. Unfortunately, it was so time-consuming that I didn’t have enough time to make the wheel spinning in a natural way. Here is the result of my tedious but enjoyable work:
The final week of this month was all about the crossword-style game – Scrabble. For those who don’t know the game – you better befriend with a dictionary while deciding to play it as it combines your luck with a large vocabulary set.
First of all, I created a single tile based on real game design. To achieve the depth of it I used
box-shadow property with a bit darker colour than the element’s background. As the main word, I selected “CodePen” as it means a lot to me and my dev journey and then I chose words I associate with it. The next step was adding the animation of flipping tiles using
transform property with the
When CodePen announced the theme of the month I was really excited. “Yes, that’s my thing.” – I thought but I was wrong. While working on those challenges I got to know two new games and bring back a lot of memories with the other two. Sometimes inventing a new design is harder than reaching the desired result. A new theme is coming today – finger crossed for something connected with Christmas and winter! 🎄❄️☃️