Skip to content

Instantly share code, notes, and snippets.

@mutukrish

mutukrish/index.html

Created October 7, 2012 09:42
Show Gist options
  • Save mutukrish/3847684 to your computer and use it in GitHub Desktop.
Save mutukrish/3847684 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<body>
<div class="wrapper">
<div class="base-s"></div>
<div class="base" class="base"></div>
<div class="base-h"></div>
<div class="base-g"></div>
<div class="hand-s"></div>
<div class="cup-s"></div>
<div class="hand"></div>
<div class="cup-b" class="base"></div>
<div class="cup-g"></div>
<div class="coffee"></div>
</div>
</body>
Raw
style.css
.wrapper {
height: 600px;
width: 600px;
margin: 20px auto;
position: relative;
background-color:#D1E3E5;
}
.wrapper div{
position:absolute;
}
.base {
background-image: -moz-linear-gradient(left bottom,#ebebeb 0,#fdfdfd 100%);
background-image: -webkit-gradient(linear, left bottom, right top, from(#ebebeb), to(#fdfdfd));
background-image: -o-linear-gradient(left bottom,#ebebeb 0,#fdfdfd 100%);
background-image: linear-gradient(left bottom,#ebebeb 0,#fdfdfd 100%);
top:100px;
left:100px;
}
.base,.base-s{
width:400px;
height:400px;
-moz-border-radius:200px; /* Half the width & the height to make a perfect Circle */
-webkit-border-radius:200px;
border-radius:200px;
}
.base-g,.base-h{
width:370px;
height:370px;
-moz-border-radius:185px;
-webkit-border-radius:185px;
border-radius:185px;
}
.base{
top:100px;
left:100px;
}
.base-g{
top:115px;
left:115px;
background-image: -moz-linear-gradient(right top,#ebebeb 0,#fdfdfd 100%);
background-image: -webkit-gradient(linear, right top, left bottom, from(#ebebeb), to(#fdfdfd));
background-image: -o-linear-gradient(right top,#ebebeb 0,#fdfdfd 100%);
background-image: linear-gradient(right top,#ebebeb 0,#fdfdfd 100%);
}
.base-h{
background:#fff;
left:114px;
top:116px;
}
.base-s{
background:rgba(172, 193, 196,.7);
top:115px;
left:90px;
}
.cup-b,.cup-s{
width:300px;
height:300px;
-moz-border-radius:150px;
-webkit-border-radius:150px;
border-radius:150px;
}
.cup-s,.hand-s{
background:rgba(0,0,0,.1);
}
.cup-s{
left:145px;
top:160px;
}
.cup-b{
top:150px;
left:150px;
}
.cup-g{
width:284px;
height:284px;
top:159px;
left:159px;
-moz-border-radius:142px;
-webkit-border-radius:142px;
border-radius:142px;
background-image: -moz-linear-gradient(right top,#dedede 0,#f9f9f9 100%);
background-image: -webkit-gradient(linear, right top, left bottom, from(#dedede), to(#f9f9f9));
background-image: -o-linear-gradient(right top,#dedede 0,#f9f9f9 100%);
background-image: linear-gradient(right top,#dedede 0,#f9f9f9 100%);
}
.coffee{
width:260px;
height:260px;
top:170px;
left:170px;
background: #f4c9b8; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmNGM5YjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmNjE1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZDg0ZjE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2ZjYxNTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzJSIgc3RvcC1jb2xvcj0iIzcyNjQ1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjNmY2MTU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjNmY2MDRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjQlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMjklIiBzdG9wLWNvbG9yPSIjNmY2MDUzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDQlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjNmY2MDRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTQlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjMlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjNmY2MTU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODElIiBzdG9wLWNvbG9yPSIjNmU1ZjUyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjNzI2NDU0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f4c9b8 0%, #6f6155 0%, #d84f18 0%, #6f6155 0%, #726454 3%, #6f6155 6%, #6f604f 10%, #726454 15%, #726454 20%, #726454 24%, #6f6053 29%, #726454 33%, #726454 38%, #726454 44%, #6f604f 49%, #726454 54%, #726454 58%, #726454 63%, #6f6155 70%, #6e5f52 81%, #726454 90%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f4c9b8), color-stop(0%,#6f6155), color-stop(0%,#d84f18), color-stop(0%,#6f6155), color-stop(3%,#726454), color-stop(6%,#6f6155), color-stop(10%,#6f604f), color-stop(15%,#726454), color-stop(20%,#726454), color-stop(24%,#726454), color-stop(29%,#6f6053), color-stop(33%,#726454), color-stop(38%,#726454), color-stop(44%,#726454), color-stop(49%,#6f604f), color-stop(54%,#726454), color-stop(58%,#726454), color-stop(63%,#726454), color-stop(70%,#6f6155), color-stop(81%,#6e5f52), color-stop(90%,#726454)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #f4c9b8 0%,#6f6155 0%,#d84f18 0%,#6f6155 0%,#726454 3%,#6f6155 6%,#6f604f 10%,#726454 15%,#726454 20%,#726454 24%,#6f6053 29%,#726454 33%,#726454 38%,#726454 44%,#6f604f 49%,#726454 54%,#726454 58%,#726454 63%,#6f6155 70%,#6e5f52 81%,#726454 90%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #f4c9b8 0%,#6f6155 0%,#d84f18 0%,#6f6155 0%,#726454 3%,#6f6155 6%,#6f604f 10%,#726454 15%,#726454 20%,#726454 24%,#6f6053 29%,#726454 33%,#726454 38%,#726454 44%,#6f604f 49%,#726454 54%,#726454 58%,#726454 63%,#6f6155 70%,#6e5f52 81%,#726454 90%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #f4c9b8 0%,#6f6155 0%,#d84f18 0%,#6f6155 0%,#726454 3%,#6f6155 6%,#6f604f 10%,#726454 15%,#726454 20%,#726454 24%,#6f6053 29%,#726454 33%,#726454 38%,#726454 44%,#6f604f 49%,#726454 54%,#726454 58%,#726454 63%,#6f6155 70%,#6e5f52 81%,#726454 90%); /* IE10+ */
background: radial-gradient(ellipse at center, #f4c9b8 0%,#6f6155 0%,#d84f18 0%,#6f6155 0%,#726454 3%,#6f6155 6%,#6f604f 10%,#726454 15%,#726454 20%,#726454 24%,#6f6053 29%,#726454 33%,#726454 38%,#726454 44%,#6f604f 49%,#726454 54%,#726454 58%,#726454 63%,#6f6155 70%,#6e5f52 81%,#726454 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4c9b8', endColorstr='#726454',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
border-radius:130px;
}
.hand,.hand-s{
width:80px;
height:40px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
}
.hand{
top:280px;
left:83px;
background-image: -moz-linear-gradient(right ,#d4d4d4 0,#fcfcfc 100%);
background-image: -webkit-gradient(linear, right top, left top, from(#d4d4d4), to(#fcfcfc));
background-image: -o-linear-gradient(right ,#d4d4d4 0,#fcfcfc 100%);
background-image: linear-gradient(right ,#d4d4d4 0,#fcfcfc 100%);
}
.hand-s{
left:85px;
top:286px;
-moz-transform:rotate(190deg);
-webkit-transform:rotate(190deg);
transform:rotate(190deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment