Skip to content

Instantly share code, notes, and snippets.

@lukasborawski

lukasborawski/index.html

Created November 21, 2011 09:58
Show Gist options
  • Save lukasborawski/1382192 to your computer and use it in GitHub Desktop.
Save lukasborawski/1382192 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Cloud
Raw
index.html
<html>
<head>
<title>My Loved Creation - CSS3 Cloud</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="whole_container">
<div id="main_container">
<div class="cloud_box">
<div class="cloud_arm_01 border-radius"></div>
<div class="cloud_arm_02 border-radius"></div>
<div class="cloud_arm_03 border-radius"></div>
<div class="cloud_arm_04 border-radius"></div>
<div class="cloud_arm_05 border-radius"></div>
<div class="cloud_arm_06 border-radius"></div>
<div class="cloud_arm_07 border-radius"></div>
<div class="cloud_arm_08 border-radius"></div>
<div class="cloud_arm_09 border-radius"></div>
<div class="cloud_arm_10 border-radius"></div>
<div class="cloud_inset_01"></div>
<div class="cloud_inset_02"></div>
<div class="cloud_inset_03"></div>
<div class="cloud_inset_04"></div>
<div class="cloud_inset_05"></div>
<div class="cloud_inset_06"></div>
<div class="cloud_inset_07"></div>
<div class="cloud_inset_08"></div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
margin: 0;
font-weight: normal;
font-size:12px;
width: 100%;
background: #5da7e2;
}
.border-radius {
-moz-border-radius:200px;
-webkit-margin-radius:200px;
border-radius:200px;
}
#main_container {
width:600px;
margin: 0 auto;
height: 100%;
min-height: 100%;
position: relative;
}
.cloud_box {
width:600px;
height:330px;
position: relative;
margin: 50px 0 5px 65px;
}
.cloud_arm_01, .cloud_arm_02, .cloud_arm_03, .cloud_arm_04, .cloud_arm_05,
.cloud_arm_06, .cloud_arm_07, .cloud_arm_08, .cloud_arm_09, .cloud_arm_10 {
position: absolute;
border: 1px solid #ccc;
background: #eeeded;
z-index: 1;
-webkit-box-shadow: 0 0 10px #000, 0 0 0 5px #fff, 0 0 40px 1px #fff;
-moz-box-shadow: 0 0 10px #000, 0 0 0 5px #fff, 0 0 40px 1px #fff;
box-shadow: 0 0 10px #000, 0 0 0 5px #fff, 0 0 40px 1px #fff;
}
.cloud_arm_01 {
top:80px;
left:40px;
width:150px;
height:150px;
}
.cloud_arm_02 {
top: 58px;
left: 95px;
width: 80px;
height: 80px;
}
.cloud_arm_03 {
top: 40px;
left: 140px;
width: 85px;
height: 85px;
}
.cloud_arm_04 {
top: 50px;
left: 200px;
width: 45px;
height: 45px;
}
.cloud_arm_05 {
top: 63px;
left: 180px;
width: 165px;
height: 165px;
}
.cloud_arm_06 {
top: 89px;
left: 263px;
width: 105px;
height: 105px;
}
.cloud_arm_07 {
top: 116px;
left: 240px;
width: 165px;
height: 165px;
}
.cloud_arm_08 {
top: 117px;
left: 312px;
width: 120px;
height: 120px;
}
.cloud_arm_09 {
top: 110px;
left: 116px;
width: 200px;
height: 200px;
}
.cloud_arm_10 {
top: 180px;
left: 65px;
width: 100px;
height: 100px;
}
.cloud_inset_01, .cloud_inset_02, .cloud_inset_03, .cloud_inset_04,
.cloud_inset_05, .cloud_inset_06, .cloud_inset_07, .cloud_inset_08 {
background: #eeeded;
position: absolute;
z-index: 2;
border: 0 solid #ccc;
opacity:1;
}
.cloud_inset_01 {
width: 57px;
height: 57px;
top: 99px;
left: 123px;
-webkit-transform: rotate(60deg) scale(2);
-moz-transform: rotate(60deg) scale(2);
-o-transform: rotate(60deg) scale(2);
-ms-transform: rotate(60deg) scale(2);
}
.cloud_inset_02 {
width: 50px;
height: 50px;
top: 85px;
left: 193px;
-webkit-transform: rotate(112deg) scale(2);
-moz-transform: rotate(112deg) scale(2);
-o-transform: rotate(112deg) scale(2);
-ms-transform: rotate(112deg) scale(2);
}
.cloud_inset_03 {
width: 61px;
height: 14px;
top: 140px;
left: 276px;
-webkit-transform: rotate(151deg) scale(2);
-moz-transform: rotate(151deg) scale(2);
-o-transform: rotate(151deg) scale(2);
-ms-transform: rotate(151deg) scale(2);
}
.cloud_inset_04 {
width: 64px;
height: 39px;
top: 130px;
left: 281px;
-webkit-transform: rotate(216deg) scale(2);
-moz-transform: rotate(216deg) scale(2);
-o-transform: rotate(216deg) scale(2);
-ms-transform: rotate(216deg) scale(2);
}
.cloud_inset_05 {
width: 57px;
height: 53px;
top: 189px;
left: 285px;
-webkit-transform: rotate(165deg) scale(2);
-moz-transform: rotate(165deg) scale(2);
-o-transform: rotate(165deg) scale(2);
-ms-transform: rotate(165deg) scale(2);
}
.cloud_inset_06 {
width: 36px;
height: 69px;
top: 178px;
left: 120px;
-webkit-transform: rotate(132deg) scale(2);
-moz-transform: rotate(132deg) scale(2);
-o-transform: rotate(132deg) scale(2);
-ms-transform: rotate(132deg) scale(2);
}
.cloud_inset_07 {
width: 64px;
height: 39px;
top: 127px;
left: 297px;
-webkit-transform: rotate(216deg) scale(2);
-moz-transform: rotate(216deg) scale(2);
-o-transform: rotate(216deg) scale(2);
-ms-transform: rotate(216deg) scale(2);
}
.cloud_inset_08 {
width: 36px;
height: 69px;
top: 159px;
left: 320px;
-webkit-transform: rotate(132deg) scale(2);
-moz-transform: rotate(132deg) scale(2);
-o-transform: rotate(132deg) scale(2);
-ms-transform: rotate(132deg) scale(2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment