Logo - Albert Walicki

Be unique! Weather app doesn't have to be boring

How to stand out with simple weather app

Published:

image-to-css
Weather app created images created in CSS

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.

HTML
CSS
<div class="cloud_1_init"></div>
Preview

Now, we need to change the background of our circles and move them closer to the rectangle.

HTML
CSS
<div class="cloud_1"></div>
Preview

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.

HTML
CSS
<div class="FU_cloud">
  <span></span>
</div>
Preview

The same situation as in the first cloud. We need to slide the elements together and change the background to white.

HTML
CSS
<div class="FU_cloud">
  <span></span>
</div>
Preview

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:

  • Cloud
  • Sun
  • Lightning bolt

Our base clour component is created similar to the first one.

HTML
CSS
<div class="cloudBase">
  <div></div>
</div>
Preview

Cloud Shadow

To create shadow, we need to duplicate our cloud with additional blur, blue colour and scale it down.

HTML
CSS
<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
</div>
Preview

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

Sun image

This is pretty simple. Circle with background:linear-gradient(), shadow and pseudoelement background to lighten our sun.

HTML
CSS
<div class="sun"></div>
Preview

Cloud + Sun

Now we have to combine sun, cloud and additional sun flashes.

HTML
CSS
<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>

  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="sun"></div>
  <div class="flash"></div>
</div>
Preview

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!

Lightning bolt

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.

HTML
CSS
<div class="lightningBolt"></div>
Preview

Storm cloud

Okay! let’s finish our cloud combining our basic cloud (with grey background), lightning and some CSS for wind and water drop.

HTML
CSS
<div class="cloudWrap">
  <div class="cloudBase">
    <div></div>
  </div>
  <div class="cloudBaseShadow">
    <div></div>
  </div>
  <div class="wind"></div>
  <div class="lightningBolt"></div>
</div>
Preview

Here you can play with storm cloud.

Homework

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! 🦄

Read more

image-to-css
Various shapes created with CSS and HTML

Creating basic and more advanced shapes in CSS

CSS gives us the opportunity to create multiple Shapes

Read more
Logo - Albert Walicki

Hello, I'm a frontend developer with over six years of experience, freelancer. I'm also a mentor for junior frontend developers. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved

Policy