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%;
}
11 Comments
(close)Ahmad Alfy
Interesting, I really love it :) Just a small notice…
Best practice recommend that you place your rules with the -vendor-prefix before the real rule (border radius, shadows, background … etc)
andrew wooldridge
Nice! Learned some things not only about the cloud but how to order what I show in my own demos first.
Hassan Moaiery
very nice , i want use this post to my personal website …
thanks <3
sureshsavage
Does this … work in the IE9 (Internet Explorer)… i am having trouble in viewing it work….
Joanne Owens
what can the *average* geek-like person do with these codes if they don’t have a website…anything?
Deepak
Hi,
really excellent practice but one think Please stop watch coding html and css js doing practice not complied.
thanks
Joe
Interesting,thx
Dan
Bravo! Simple but cool!
Andrey
Hey, is there a way to make a border around without the border inside?
srujan raghavendra
I am stunned to watch all this stuff. thank you for taking to new possibilities in css
Dewy
loved it