Make a Cloud in CSS
Here is a simple CSS code to create a cloud.
HTML Code
<div id="cloud-background">
<div id = "cloud"><span class='shadow'></span></div>
</div>
CSS Code
#cloud-background {
background-color: #ccc;
z-index: 0;
padding-top: 1px;
padding-bottom: 8px;
}
#cloud {
width: 262px; height: 90px;
background: #f2f9fe;
background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position: relative;
margin: 120px auto 20px;
}
#cloud:after, #cloud:before {
content: '';
position: absolute;
background: #f2f9fe;
z-index: -1
}
#cloud:after {
width: 75px; height: 75px;
top: -37px; left: 37px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
#cloud:before {
width: 135px; height: 135px;
top: -67px; right: 37px;
border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}
.shadow {
width: 262px;
position: absolute; bottom: -10px;
background: #000;
z-index: -1;
box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
-
Previous -
Next
This website is made possible by displaying online advertisements to our visitors.
Please consider supporting by disabling your ad blocker.
Please consider supporting by disabling your ad blocker.
loading comments...