Nowadays, it is hard to get the first job without impressing somebody with your portfolio. Everybody is creating weather apps, but does everybody has custom CSS-based images in it? 😎 Let's create unique images to boost your portfolio!
There are multiple shapes that we can create in CSS, so why not create custom CSS images instead of stock photos? It will cut some unnecessary requests and speed up your website; moreover, it allows us to bring some life to it.
I don't want to create here entire app, but only images that you can use to build one. It may look like you put much more effort to tweak it, but you didn't. 😉
Excercise no.1 - first-ever CSS cloud
Let's start with a simple cloud. This cloud is made with one rectangle and two circles. You can use three div's, but I prefer to minimalize HTML as much as I can. That's why I use one div for rectangle and two pseudoelements to create circles.
This is really easy.
Now, we need to change the background of our circles and move them closer to the rectangle.
Voilà! First cloud created!
Excercise no.2 - magical cloud
This cloud is more unique and is taken from my book landing page Frontend Unicorn. It is created with one rectangle and 3 squares. One div, two pseudoelements and one span.
The same situation as in the first cloud. We need to slide the elements together and change the background to white.
Excercise no.3 - Weather images
Let's get our hands dirty. We will create two images - a basic sunny cloud and a stormy and evil one. But don't worry, it's simple!
All images are based on this article.
Firstly, we need to create a few components:
- Lightning bolt
Our base clour component is created similar to the first one.
To create shadow, we need to duplicate our cloud with additional blur, blue colour and scale it down.
Step by step:
- duplicated cloud with blue colour
- add blur
- scale it down - transform: scale(0.8)
- add pseudoelements - two circles to mask our shadow
This is pretty simple. Circle with
background:linear-gradient(), shadow and pseudoelement background to lighten our sun.
Cloud + Sun
Now we have to combine sun, cloud and additional sun flashes.
And that's it!
Here you can play with sunny cloud.
As you can see, creating this image taken us a few minutes of work. Moreover, creating another image based on this one can be even faster. So let's do this!
First of all, let's create a lightning bolt shape. By merging two triangles, if you read one of my latest article about creating shapes in CSS - you won't have any problem. 😎
Now use two triangles and animate it with CSS.
Okay! Let's finish our cloud combining our basic cloud (with grey background), lightning and some CSS for wind and water drop.
Here you can play with storm cloud.
Now you know how to create awesome weather images, so create your own! Snow? Blizzard? Fog maybe? Share you codepen on Twitter with #frontendunicorns hashtag!
Thanks for reading! 🦄