Countless articles, many quite useful, have been written on the subject of responsive design since Ethan Marcotte’s post that started it all, but finding one that directly helps people understand some specific techniques while also explaining the why behind each action and decision is exceedingly hard. I’ll try my best to do so concisely here.
The responsive design primer
The creative process
Note: In this post I am primarily talking about creative personal projects, but also some about programming and creativity in general.
Some people ask me how I create the things that I do, what inspires me, and why I do what I do. This post is to give information as to some of that.
First I’ll start with the creative process.
Single element shapes with gradients
Making basic shapes
It’s easy to make CSS shapes with solid colors by using borders, but it’s more difficult to make them with gradient backgrounds. The main trick is to use pseudo elements and `overflow: hidden“ to cut out the desired shape. There are many more shapes that this technique could be applied to, include many listed here, but I didn’t include them for brevity. See them on CodePen.