Tag Archives: CSS3

Make a simple cloud in CSS3

Its a Simple Logic in CSS3, Just you can copy paste.

here you can seen HTML and CSS.

HTML


<div id = "cloud"><span class='shadow'></span></div>

CSS


body {
background: #ccc;
}
#cloud {
width: 350px; height: 120px;

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: 100px; height: 100px;
top: -50px; left: 50px;

border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}

#cloud:before {
width: 180px; height: 180px;
top: -90px; right: 50px;

border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}

.shadow {
width: 350px;
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%;
}

Hover.css

DEMO DOWNLOAD

About Hover.css

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.

For best results, hover effects use a couple of “hacks” (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ.

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.