Intro, motto, greeting or tagline. A brief paragraph is the first thing you can see on most of the websites when you enter them. Most of them are multi-lined but also boring and plain. While breaking the text into multiple pieces you can create interesting effects that can convince the recipient to stay longer on the page. By adding just one parameter to the CSS you can make it way more interesting. Let’s see how we can achieve it.
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?
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!
September’s CodePen.io challenges brought us new fun opportunities to improve our programming skills. The theme was really unique – each week we had to follow a different type of a limitation. I’ll show you what I’ve designed with a short description. So sit comfortably and let’s embrace the limitations together!
“Frosted glass” effect kicked around the Internet more than 10 years ago and it’s still popular. You can create a faded background effect and other complex design effects with just a single line of CSS!
Some people think that stunning image effects can be achieved only in graphic editors – nothing could be further from the truth. Adobe’s Photoshop did not invent blend modes and you can use them to style your image dynamically with CSS. ..