According to CodePen December was the month of a CSS. With tied hands, we were experimenting with different types of limitations all gathering around this powerful language. That’s why this month’s challenges theme was “Binding Your CSS Hands“. Sometimes we were not allowed to use JavaScript and other times we could use only pseudo selectors. And as we already know – sometimes limitation can free creativity. Let’s see what happened.

In the first week of the challenge, we could create whatever we wanted. The limitation was to style the elements based on their numbered position in the DOM. To achieve that we might use only positional selectors like :nth-child:nth-last-of-type() and so on. Pretty quickly I decided to create lettering which would remind of the vintage titles on the movie theatre marquee. But in cyberpunk colours.

As a first thing, I created three identical texts wrapped in p tag. The alignment of the lines was pretty simple – each of the elements had to be moved down and slightly to the left relative to the previous one. The trick behind the sticking out letters is mix-blend-mode property – very similar to background-blend-mode property. Adding it to the second and third elements with different values helped with creating darker areas where the letters overlap. The finishing touch that created the neon glow around each letter was done by adding text-shadow property to the first element.

See the final effect below:

See the Pen CodePen Challenge – December 2019 [week 1] by Natalia (@CodeMeNatalie) on CodePen.

“Interactivity Hacks” – that was the slogan of the second week. Our main goal was to create a design which would “fake” interactivity. To do that we were supposed to use only pseudo selectors like :checked, :active or :focus. No JavaScript allowed!

Recently, I added looking for inspiration on Dribbble to my morning routine. That’s how I noticed Oleg Frolov and his incredible designs. After a couple of minutes of scrolling through his profile, I found it – the perfect idea for this week’s challenge. Simply structured toggle with 3D feeling after clicking it.

I started with setting up input element so it reflected both states without any transition in between. After the easiest part was done it was time for the essence of the design – animation. If you look closer on the preview above, you can see that when the toggle is clicked in the initial and final keyframes the ring is “bouncing” a bit. Because it was created only with border property it was difficult to recreate that bounce. Playing with different border-width values and adding width in key parts I finally found it perfect enough to consider the animation finished.

After it was done I copied it and reverted the order of process with small enhancements. Sounds easy but took me more time and effort than I would like to admit. It was good enough halfway through but I wanted to make it as close as possible to the original design. What do you think of it?

See the Pen CodePen Challenge – December 2019 [week 2] by Natalia (@CodeMeNatalie) on CodePen.

The third challenge surprised me the most as our eyes were “blinded”. We were supposed to recreate the design from a static image without previewing it during the creation process. I decided to approach this challenge as it was a regular project at work. The most important part was to plan everything before opening the code editor. I divided design into segments as long as I was left with simple sections and elements.

The quick sketch of how I divided the design.

After all the preparations I was ready to start coding. The same way I divided the design I wrote structure for the page. I started with putting divs with a description or already assigned the style classes like “wrapper” or “header”. Grouping sections in the code helped me while I was imagining how it might look like during work.

<div class="wrapper">
  <div class="header">
    <div> <!-- left header wrapper -->
      <div>Egg Icon</div>
      <div>Eggs</div>
    </div>
    <div> <!-- right header wrapper -->
      <div>Types</div>
      <div>Cooking</div>
      <div>History</div>
      <div> <!-- hamburger wrapper -->
        <div>-</div>
        <div>-</div>
        <div>-</div>
      </div>
    </div>
  </div>
  
  <div class="body">
    <div> <!-- left body wrapper -->
      <div>Egg Image Left</div>
      <div>Egg Image Right</div>
      <div>Background Image</div>
      <div>Egg yolks text</div>
    </div>
    <div> <!-- right body wrapper -->
      <div>Top text</div>
      <div> <!-- bottom wrapper -->
        <div>Rotated numbers</div>
        <div>Video</div>
        <div> <!-- description wrapper -->
          <div> <!-- author wrapper -->
            <div>Title</div> <!-- title -->
            <div>Person</div> <!-- person -->
          </div>
          <div> <!-- author wrapper -->
            <div>Title</div> <!-- title -->
            <div>Person</div> <!-- person -->
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>

The last bit was to add content and style it carefully. Despite the fact that I was finishing it section by section – I got lost a couple of times and because of that the whole task took me about 4 hours to group design and code. Here is the final effect of my work (it looks better in wider preview 🤫):

See the Pen CodePen Challenge – December 2019 [week 3] by Natalia (@CodeMeNatalie) on CodePen.

The last challenge of the month was focused around the “tree” term. We could treat it as a data structure or just a holiday tree. But most importantly we had to create a design by combining and nesting list elements – <ul><ol> and <li>. As it was the week of Christmas Eve I decided to create minimalistic origami Christmas tree and use each tag type as a different part of it.

As a first thing, I got rid of default styling of all list elements by setting list-style-type: none; for each of them. To create a star I used ordered list element – ol. Achieving the effect of folded paper effect forced me to use :before and :after selectors where I changed its rotation, colour and shadow. Then it was time for the tree itself. As it consisted of three almost the same parts I used ul tag as a container and li elements as each branch in the structure. To change their colours and position I used positional selector :nth-child(). The last thing to create was the trunk. As at that point I got rid of all possible elements I decided to display it by styling :before and :after selectors for ul tag.

And that’s how Christmas tree in origami style was created.

See the Pen CodePen Challenge – December 2019 [week 4] by Natalia (@CodeMeNatalie) on CodePen.

When CodePen announced the theme of the month I was thrilled. I expected something connected to Christmas or at least the winter season. Because of all the Christmas preparations I barely had time to do the challenges. But thanks to them I found a really great designer with a lot of amazing and amusing ideas! Thank you Oleg once again!

Happy New Year! 🎉🥳🎇🎆