Posts tagged CodePen

November’s CodePen challenges

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?

Read More

October’s CodePen challenges

October – the first month which always reminds me of autumn and it represents a lot of contrasts in nature. Rain and sun, cold and warm weather, green grass and yellow leaves – all of those are opposites. And this was the main theme of this month’s challenges from CodePen. Despite it was a really busy month for me, I still managed to finish all of the tasks and that makes me really proud. What’s more – I finally gave a try to the pattern library I wanted to try for some time. Let’s see how it went!

Read More

How to create a classy slider with pure CSS

It doesn’t matter if you are creating a website or an app – you don’t want to use the default style of a slider. It won’t match any modern sexy design. For instance, you can use external libraries like Bootstrap or Foundation but most of the time, you don’t want to install an additional package just for one component. What you actually want to use is an HTML input range element. In this tutorial, I will be focusing on styling the slider without using JavaScript. It will be as simple as possible so you can achieve a really nice effect in a short amount of time.

Read More