CSS3 Animated Clouds - The Simple Way
Many wonder how hard it is to make clouds in pure CSS. Actually, it's quite easy!
I am going to show you how you can make a stylish CSS cloud (and animate it a bit) in a few steps and least number of lines in your CSS code.
Basically the first step is the make the base of the cloud (check out Step 1 in the demo). So, all you need to do is style a basic div:
.cloud_base { background: white; height: 100px; width: 300px; border-radius: 50px; /* half of height will do */ position: relative; top: 120px; box-shadow: inset 5px -9px 5px rgba(225, 245, 253, 0.5), 0px 0px 10px 6px rgba(240, 240, 240, 0.7); /* for basic little animation */ -webkit-transition: 0.2s ease-in all; -moz-transition: 0.2s ease-in all; transition: 0.2s ease-in all; }
Next you just make the rounded parts of the cloud. You could probably use a div
but I used a span
. The black-ish shadow is applied to the span
element using CSS3 box-shadow
while the circles are made by styling the pseudo-elements of the span
which are absolutely positioned and have several box shadows for the outer and inner (inset
) shadows.
The Final step is to position all the elements properly (I have hardcoded everything with px
, maybe there are better ways) and adding some animation sugar with CSS3 transition
.
That's all! Here are few more CSS cloud experiments: