In this post, we will learn how to create a cloudy design in Html and CSS. Html and CSS enable us to create multiple designs for web pages. It is part of the designs and we will create multiple designs of cloud in HTML and CSS. In the last post, we created 3 Best Tab Bar in HTML and CSS. So, let’s start creating this beautiful cloudy design in Html and CSS.
Static Cloud design:
As you can see in the image we created the cloudy design in Html CSS. we have written some lines of code for creating this cloud. Let’s check the process of its development for leaming purposes.
We have used a gradient color in the background gradient(linear). The add values in this gradient are linear for providing the color values. In cloud background, we can add the image but it looks awesome.
Then comes the development process of clouds. We have taken a container with the help of
|
1 2 3 4 5 |
<div id = "cloud"> <span class='shadow'></span> </div> |
Then our job is to design this using CSS and provide it the shape of the cloud. In the beginning, we have taken a container. Then radius is provided at sure edges of the container. These edges help us to make this container a cloud.
At last, we added the shadow in the cloud because it separated the clouds and sky from each other. That’s we used some lines of code for shadow as well. Let’s check it together once again and its development.
You might like it:
How to create Static cloud Design in Html and CSS?
For static clouds, we will be using the below steps. These steps are necessary because they will help you to go through a process and make it according to the tutorial.
- Download a code editor
- Download HTML code
- And download the CSS code
Download code editor:
Brackets
VS CODE
Html source code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Static Cloud Design- FantacyDesigns </title> <link rel="stylesheet" href="style.css"> </head> <body> <div id = "cloud"> <span class='shadow'></span> </div> <script> </script> </body> </html> |
CSS Source code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
body { background: #ACEAFF; } #cloud { width: 350px; height: 120px; background: #f2f9fe; background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.05, #f2f9fe), to(#d6f0fd)); background: -webkit-linear-gradient(#f2f9fe 5%, #d6f0fd 100%); background: -moz-linear-gradient(#f2f9fe 5%, #d6f0fd 100%); background: -o-linear-gradient(#f2f9fe 5%, #d6f0fd 100%); background: linear-gradient(#f2f9fe 5%, #d6f0fd 100%); border-radius: 100px; position: relative; margin: 180px auto 100px ; } #cloud:after, #cloud:before { content: ""; position: absolute; background: #f2f9fe; z-index: -1; } #cloud:after { width: 100px; height: 100px; top: -50px; left: 50px; border-radius: 100px; } #cloud:before { width: 180px; height: 180px; top: -90px; right: 50px; border-radius: 200px; } .shadow { width: 300px; position: absolute; bottom: -10px; left: 20px; background: #000; z-index: -1; -webkit-box-shadow: 0 0 25px 8px rgba(0,0,0,0.4); box-shadow: 0 0 25px 3px rgba(0,0,0,0.3); border-radius: 50%; } |
Download source code:
In cloud development, we provided the code of HTML and CSS separately. If you can’t connect the code then the below file of the source code is for you.
Download Source CodeClick to DownloadAnimated Clouds:
In this image, you can observe that the clouds are moving without stopping. They are continuously moving due to the loop. A loop helps things to be done again and again and clouds are moving again and again without taking a break. We will b learning how to create this type of animated effect for clouds in Html and CSS.
Explanation:
The clouds are moving and there are different types of clouds present. Each one of them has different color and animation speed. I will be explaining in the next few lines how we have created these clouds and how they are moving in a loop.
We have taken three layers of clouds. These layers are different from each other. Different means that there is color, shape, etc. Then we put these layers in the form of a stack. In stock, you can put one thing on another. Due to it, we can see a complete layer of clouds but actually, there are three layers of clouds.
|
1 2 3 4 5 |
("https://s.cdpn.io/15514/clouds_2.png" 1000px 20s), ("https://s.cdpn.io/15514/clouds_1.png" 1000px 15s), ("https://s.cdpn.io/15514/clouds_3.png" 1579px 17s); |
After gathering all three images/layers with each other we provided animation to these images. The animation is continuous in the form of a loop. It is rotating from right to left. All these things are present in the form of code and the code is given below for these clouds with animations.
|
1 2 3 4 5 |
.clouds-#{$i} { background-image: url($path); animation: clouds-loop-#{$i} $duration infinite linear; |
How to create animated Cloudy Design in Html CSS?
It’s really simple to create these animated cloudy design using Html and CSS languages. We will share the process of development of these clouds with animations and the steps given below.
- Download a code editor
- Html source code
- CSS source code
- Download source code
Html source code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Dark Clouds - FantacyDesigns </title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="cloud"> <div class='clouds'> <div class='clouds-1'></div> <div class='clouds-2'></div> <div class='clouds-3'></div> </div> <h1>Animated Dark Clouds</h1> </div> <script> </script> </body> </html> |
CSS source code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
/* What do you have to be scared of? * * Lorin Tackett, July 2013 * http://lorintackett.com */ @import url(https://fonts.googleapis.com/css?family=Oswald); @keyframes clouds-loop-1 { to { background-position: -1000px 0; } } .clouds-1 { background-image: url("https://s.cdpn.io/15514/clouds_2.png"); animation: clouds-loop-1 20s infinite linear; } @keyframes clouds-loop-2 { to { background-position: -1000px 0; } } .clouds-2 { background-image: url("https://s.cdpn.io/15514/clouds_1.png"); animation: clouds-loop-2 15s infinite linear; } @keyframes clouds-loop-3 { to { background-position: -1579px 0; } } .clouds-3 { background-image: url("https://s.cdpn.io/15514/clouds_3.png"); animation: clouds-loop-3 17s infinite linear; } html, body { font-family: 'Oswald', sans-serif; height: 100%; padding: 0; margin: 0; } body { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000)); background: -moz-linear-gradient(#333333, #000000); background: -webkit-linear-gradient(#333333, #000000); background: linear-gradient(#333333, #000000); text-align: center; vertical-align: middle; } body a { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: relative; text-align: right; text-decoration: none; font-weight: normal; font-size: 1.5em; line-height: 1.5em; margin: 0; color: #b8956b; text-shadow: 0 -1px 0 rgba(250, 248, 245, 0.6), 0 2px 3px #000; } body a span { display: block; } .clouds { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; pointer-events: none; position: absolute; overflow: hidden; top: 0; left: 0; right: 0; height: 100%; } .clouds-1, .clouds-2, .clouds-3 { background-repeat: repeat-x; position: absolute; top: 0; right: 0; left: 0; height: 500px; } h1{ font-family: fantasy; font-weight: bolder; font-size: 35px; color: #0C0C0C; background: #ccc; padding: 5px; padding-left: 15px; padding-right: 15px; margin-top: 300px; } |
Download source code:
It’s a complex process to combine the code with each other and then link the files. For linking, you need to add extra lines of code in this HTML file. But if you don’t want to go through this process then download the source code from the below button.
Moving clouds in Html and CSS:
In the first cloud design, we discussed the development process of cloud design. That cloud was static and there is no animation involved in the cloud. This time we have added the animations in the clouds and that static cloud is moving.
We have taken three clouds and then provided a complete shape to the clouds. The background color concept is the same as the above cloud design.
The main part of these clouds is animations. How to add the animations using Html and CSS?
And the answer is here:
|
1 2 3 4 5 |
-webkit-animation: animateCloud 35s linear infinite; -moz-animation: animateCloud 35s linear infinite; animation: animateCloud 35s linear infinite; |
The basic start time of all the clouds is different and the animation speed is the same for all. Then another thing is that they are rotating without breaking. The loop has provided the value of infinity, that’s why it’s moving without taking a break. The complete code along with the process is given below.
How to create moving clouds in Html and CSS?
The theoretical part is covered above. Now we will be covering the coding and implementation part. The steps are the same as the above clouds.
Html source code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moving Clouds - FantacyDesigns </title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="background-wrap"> <div class="x1"> <div class="cloud"></div> </div> <div class="x2"> <div class="cloud"></div> </div> <div class="x3"> <div class="cloud"></div> </div> <div class="x4"> <div class="cloud"></div> </div> <div class="x5"> <div class="cloud"></div> </div> </div> <script> </script> </body> </html> |
CSS Source code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
body { background: #00b4ff; background-image: linear-gradient(to right bottom, #3bfff7, #2fcfc8, #23a19b, #177571, #0c4c49); color: #333; font: 100% Arial, Sans Serif; height: 100vh; margin: 0; padding: 0; overflow-x: hidden; } #background-wrap { bottom: 0; left: 0; padding-top: 50px; position: fixed; right: 0; top: 0; z-index: -1; } /* KEYFRAMES */ @-webkit-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @-moz-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } /* ANIMATIONS */ .x1 { -webkit-animation: animateCloud 35s linear infinite; -moz-animation: animateCloud 35s linear infinite; animation: animateCloud 35s linear infinite; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65); } .x2 { -webkit-animation: animateCloud 20s linear infinite; -moz-animation: animateCloud 20s linear infinite; animation: animateCloud 20s linear infinite; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x3 { -webkit-animation: animateCloud 30s linear infinite; -moz-animation: animateCloud 30s linear infinite; animation: animateCloud 30s linear infinite; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } .x4 { -webkit-animation: animateCloud 18s linear infinite; -moz-animation: animateCloud 18s linear infinite; animation: animateCloud 18s linear infinite; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x5 { -webkit-animation: animateCloud 25s linear infinite; -moz-animation: animateCloud 25s linear infinite; animation: animateCloud 25s linear infinite; -webkit-transform: scale(0.55); -moz-transform: scale(0.55); transform: scale(0.55); } /* OBJECTS */ .cloud { background: #fff; background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: linear-gradient(top, #fff 5%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 ); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); height: 120px; position: relative; width: 350px; } .cloud:after, .cloud:before { background: #fff; content: ''; position: absolute; z-indeX: -1; } .cloud:after { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 100px; left: 50px; top: -50px; width: 100px; } .cloud:before { -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 180px; height: 180px; right: 50px; top: -90px; } |
Download source code:
We are always providing the source code of every project. This time the source code is also present and you can download the source code of this animated cloud for free.
Download Source CodeClick to DownloadTask:
We have created static and animated clouds and their designs as well. Now apply some changes to these clouds and in the animations of these clouds. Change the speed of all the clouds and every cloud have a different animation speed. Then create 6 different clouds of different sizes. Animate these clouds from left to right and right to left as well.
