Hello, readers Today in my blog I have tried to create something different as we all see clouds in the sky , while looking over the clouds an idea to create them came in my mind and therefore I have penned it out in the blog.
In my blog, I have created four clouds with a shinning sun. For creating this I need to create a div with the class name as cloud. For the other three clouds, I had named them as cloud1, cloud2, cloud3.
Below is the HTMLcode for it :-
<div class="cloud">
</div>
<div class="cloud1">
</div>
<div class="cloud2">
</div>
<div class="cloud3">
</div>
The main work of creating clouds starts in the CSS. For creating the clouds I have used CSS3 box-shadow property which contains the horizontal ,vertical and blur shadow values with the required color. I have adjusted them according to my use and had also created a shinning sun.
I need to set the position to absolute , adjusted the height and the width.
I have taken border-radius to 50% and given the background color as white of the clouds.
For each cloud I have adjusted its position , height, width and the margin.
Below is the CSS code for it :-
body{
background:blue;
}
.cloud{
position: absolute;
top: 10px;
left:500px;
margin:50px auto;
background:#fff;
width:90px;
height:90px;
border-radius:50%;
box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
}
.cloud1{
position: absolute;
top: 90px;
left:200px;
margin:50px auto;
background:#fff;
width:90px;
height:90px;
border-radius:50%;
box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
}
.cloud2{
position: absolute;
top: 50px;
left:800px;
margin:50px auto;
background:#fff;
width:90px;
height:90px;
border-radius:50%;
box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
}
.cloud3{
position: absolute;
top: 0px;
left:1200px;
margin:50px auto;
background:#fff;
width:90px;
height:90px;
border-radius:50%;
box-shadow:46px -21px 11px 21px yellow,-49px 20px 0 14px #fff,88px 27px 0 5px #fff,79px 71px 0 -4px #fff,-96px 45px 0 -3px #fff,-77px 85px 0 -4px #fff,-7px 67px 0 24px #fff,26px 86px 0 -9px #fff;
}
Conclusion :-
Hence, I have created Clouds using CSS3 property which was easy to create and understand.
Note :- The above example will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.
0 Comment(s)