Forked from Ramakrishna V's Pen Apple Magic Mouse.
A Pen by Captain Anonymous on CodePen.
Forked from Ramakrishna V's Pen Apple Magic Mouse.
A Pen by Captain Anonymous on CodePen.
<html> | |
<head> | |
<link rel="shortcut icon" href="favicon.png"> | |
<meta name="author" content="Ramakrishna V"> | |
<title>Magic Mouse</title> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
<script src="jquery-1.9.1.min.js"></script> | |
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> | |
<script type="text/javascript">stLight.options({publisher: "fdb4a23c-1f99-414a-9fef-bc2e637bfd4e", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script> | |
</head> | |
<body> | |
<div class="info">Save Energy.</div> | |
<div class="infos">Please Switch off your Connection!</div> | |
<div class="circle concentric rotate" id="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
<div class="circle"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Mouse 1 --> | |
<div class="mouse" id="mousefront"> | |
<div class="leftnew"></div> | |
<div class="magic"></div> | |
<div id="apple"> | |
<div class="apple"> | |
<div class="top"><span></span></div> | |
<div class="butt"><span></span></div> | |
<div class="bite"></div> | |
</div> | |
</div> | |
</div> | |
<!-- MOuse 2 --> | |
<div class="mouses" id="mouseback"> | |
<div class="leftnews"></div> | |
<div class="light" id="lights"></div> | |
<div class="innerpart"> | |
<div class="laser" ></div> | |
<div class="onoff" id="onoff"></div> | |
<div class="text">Designed by Apple in California</div> | |
<div class="text1">Assembled in China</div> | |
<div class="text2">Model No : A1296 3Vdc</div> | |
<div class="remove"></div> | |
</div> | |
<div class="magics"></div> | |
<div id="apples"> | |
<div class="apples"> | |
<div class="tops"><span></span></div> | |
<div class="butts"><span></span></div> | |
<div class="bites"></div> | |
</div> | |
</div> | |
</div> | |
<div class="grass"> | |
<ul class="button"> | |
<li id="front" class="selected">Front</li> | |
<li id="back">Back</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
$(document).ready(function(){ | |
$("#onoff").click(function() | |
{ | |
if($("#lights").hasClass("light")) | |
{ | |
$("#onoff").removeClass("onoff").addClass("onoffs"); | |
$("#lights").removeClass("light").addClass("lights"); | |
$(".circle").fadeOut(); | |
} | |
else | |
{ | |
$("#onoff").removeClass("onoffs").addClass("onoff"); | |
$("#lights").removeClass("lights").addClass("light"); | |
$(".circle").fadeIn(); | |
} | |
}); | |
$("#back").click(function() | |
{ | |
$(".mouse").hide(); | |
$(".mouses").show(); | |
$(".button li").removeClass("selected"); | |
$(this).addClass("selected"); | |
}); | |
$("#front").click(function() | |
{ | |
$(".mouse").show(); | |
$(".mouses").hide(); | |
$(".button li").removeClass("selected"); | |
$(this).addClass("selected"); | |
}); | |
}); |
body{ | |
margin: 0px; | |
padding: 0px; | |
background: #f0f0f0; | |
overflow: scroll; | |
} | |
ul,ol{ | |
margin: 0px; | |
padding: 0px; | |
list-style-type:none; | |
} | |
.banner { | |
position: fixed; | |
width: 100%; | |
bottom: 0; | |
color: #aaa; | |
background: #111; | |
font-family: Avenir; | |
text-align: center; | |
padding: 15px; | |
box-sizing:border-box; | |
font-weight: lighter; | |
font-size: 13px; | |
z-index: 999; | |
} | |
.banner a{ | |
color: #fff; | |
text-decoration: none; | |
font-weight: bold; | |
} | |
.grass{ | |
width: 100%; | |
height: 160px; | |
bottom: 0px; | |
text-align: center; | |
} | |
.button{ | |
margin: 0 auto; | |
width: 220px; | |
display: block; | |
} | |
.button li{ | |
width: 100px; | |
height: 35px; | |
padding: 7px; | |
box-sizing:border-box; | |
color: #333; | |
border-radius: 4px; | |
font-family: HelveticaNeue-Light; | |
float: left; | |
border: 1px solid #333; | |
background: transparent; | |
margin-right: 20px; | |
text-align: center; | |
cursor: pointer; | |
z-index: 10; | |
transition:all ease 0.3s; | |
} | |
.button li:hover{ | |
background: #333; | |
color: #fff; | |
} | |
.selected{ | |
background: #333 !important; | |
color: #fff !important; | |
} | |
.button li:last-child{ | |
margin-right: 0px; | |
} | |
.circle{ | |
opacity: 0; | |
height: 100%; | |
width: 100%; | |
background: transparent; | |
border: 3px solid #0ab4ee; | |
border-radius: 50%; | |
padding: 10px; | |
box-sizing: border-box; | |
z-index: 0; | |
-webkit-animation: spinning-cog 4s infinite linear; | |
-moz-animation: spinning-cog 4s infinite linear; | |
-ms-animation: spinning-cog 4s infinite linear; | |
-o-animation: spinning-cog 4s infinite linear; | |
animation: spinning-cog 4s infinite linear; | |
} | |
@-webkit-keyframes spinning-cog { | |
0% { opacity: 0; | |
} | |
50% { opacity: 1; | |
} | |
100% { opacity: 0; } | |
} | |
@-moz-keyframes spinning-cog { | |
0% { opacity: 0; | |
} | |
50% { opacity: 1; | |
} | |
100% { opacity: 0; } | |
} | |
@-o-keyframes spinning-cog { | |
0% { opacity: 0; | |
} | |
50% { opacity: 1; | |
} | |
100% { opacity: 0; } | |
} | |
@keyframes spinning-cog { | |
0% { opacity: 0; | |
} | |
50% { opacity: 1; | |
} | |
100% { opacity: 0; } | |
} | |
.concentric { | |
width: 500px; | |
height: 500px; | |
margin: 1%; | |
position: absolute; | |
left: 50%; | |
margin-left: -250px; | |
z-index: 0; | |
} | |
.info{ | |
padding-top: 30px; | |
width: 100%; | |
margin-top: 20px; | |
font-family: HelveticaNeue-Light; | |
font-size: 26px; | |
color: #555; | |
text-align: center; | |
} | |
.infos{ | |
width: 100%; | |
margin-top: 10px; | |
font-family: HelveticaNeue-Light; | |
font-size: 22px; | |
color: #555; | |
text-align: center; | |
} | |
.magic{ | |
margin: 0px auto; | |
position: absolute; | |
width: 200px; | |
height: 400px; | |
border-radius: 80px; | |
box-shadow: 0px 15px 20px #aaa; | |
z-index: 0; | |
} | |
.mouse{ | |
margin: 60px auto; | |
position: relative; | |
width: 200px; | |
height: 400px; | |
border-top: 3px solid #f5f5f5; | |
border-bottom: 3px solid #f5f5f5; | |
background: rgb(255,255,255); /* Old browsers */ | |
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 40%, rgba(237,237,237,1) 42%, rgba(255,255,255,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(40%,rgba(243,243,243,1)), color-stop(42%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 40%,rgba(237,237,237,1) 42%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 40%,rgba(237,237,237,1) 42%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 40%,rgba(237,237,237,1) 42%,rgba(255,255,255,1) 100%); /* IE10+ */ | |
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 40%,rgba(237,237,237,1) 42%,rgba(255,255,255,1) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
border-radius: 75px; | |
box-shadow: 0px 10px 20px #000; | |
box-shadow: inset 0 20px 50px 10px rgba(255,255,255,1), inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), 0 10px 0 rgba(0,0,0,0.02); | |
z-index: 2; | |
display: block; | |
} | |
.leftnew{ | |
position: absolute; | |
width: 20px; | |
height: 300px; | |
border-left: 3px solid #f5f5f5; | |
background: rgb(255,255,255); /* Old browsers */ | |
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 61%, rgba(243,243,243,1) 64%, rgba(237,237,237,1) 67%, rgba(255,255,255,0.9) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(61%,rgba(243,243,243,1)), color-stop(64%,rgba(243,243,243,1)), color-stop(67%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,0.9))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 61%,rgba(243,243,243,1) 64%,rgba(237,237,237,1) 67%,rgba(255,255,255,0.9) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 61%,rgba(243,243,243,1) 64%,rgba(237,237,237,1) 67%,rgba(255,255,255,0.9) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 61%,rgba(243,243,243,1) 64%,rgba(237,237,237,1) 67%,rgba(255,255,255,0.9) 100%); /* IE10+ */ | |
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 61%,rgba(243,243,243,1) 64%,rgba(237,237,237,1) 67%,rgba(255,255,255,0.9) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
border-radius: 20px/300px; | |
margin-left: -4px; | |
margin-top: 48px; | |
z-index: 2; | |
} | |
.mouse:before{ | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 300px; | |
background: rgb(255,255,255); /* Old browsers */ | |
background: -moz-linear-gradient(-45deg, rgba(237,237,237,0.3) 0%, rgba(243,243,243,1) 31%, rgba(246,246,246,0.9) 64%, rgba(255,255,255,0.7) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(237,237,237,0.3)), color-stop(31%,rgba(246,246,246,0.7)), color-stop(64%,rgba(243,243,243,0.9)), color-stop(100%,rgba(255,255,255,0.7))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(-45deg, rgba(237,237,0.3) 0%,rgba(243,243,243,1) 31%,rgba(246,246,246,0.9) 64%,rgba(255,255,255,0.7) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(-45deg, rgba(237,237,237,0.3) 0%,rgba(243,243,243,1) 31%,rgba(246,246,246,0.9) 64%,rgba(255,255,255,0.7) 100%); /* IE10+ */ | |
background: linear-gradient(135deg, rgba(237,237,237,0.3) 0%,rgba(243,243,243,1) 31%,rgba(246,246,246,0.9) 64%,rgba(255,255,255,0.7) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
border-right: 3px solid #f5f5f5; | |
border-radius: 20px/300px; | |
margin-left: 181px; | |
margin-top: 48px; | |
z-index: 2; | |
} | |
.apple, .butt:before, .top span:after, .butt:after, .top:before, .top:after, .butt:before, .butt:after { | |
background: #c7c8cc; /* foreground color */ | |
} | |
#apple{ | |
width: 30px; | |
height: 26px; | |
margin: 0 auto; | |
margin-top: 310px; | |
position: relative; | |
z-index: 5; | |
} | |
.apple { | |
width: 30px; | |
height: 26px; | |
border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%; | |
position: absolute; | |
} | |
.bite { | |
position: absolute; | |
width: 60%; | |
height: 62%; | |
right: -40%; | |
top: 8%; | |
border-radius: 60%; | |
background: #f7f7f7; | |
} | |
.butt span { | |
display: block; | |
position: absolute; | |
border-radius: 100% 100% 0% 0%; | |
width: 24.5%; | |
height: 400%; | |
bottom: -239%; | |
left: 38%; | |
} | |
.butt { | |
position: absolute; | |
width: 100%; | |
height: 4%; | |
bottom: -1%; | |
background: #f7f7f7; | |
} | |
.butt:before { | |
content: ''; | |
position: absolute; | |
width: 24%; | |
height: 400%; | |
border-radius: 0% 0% 100% 100%; | |
left: 21%; | |
bottom: 38%; | |
} | |
.butt:after { | |
content: ''; | |
position: absolute; | |
width: 23.4%; | |
height: 400%; | |
border-radius: 0% 0% 100% 100%; | |
right: 21%; | |
bottom: 38%; | |
} | |
.top span { | |
display: block; | |
position: absolute; | |
border-radius: 0 0 44% 44% / 0 0 100% 100%; | |
width: 61%; | |
height: 259%; | |
top: -92%; | |
left: 18.6%; | |
z-index: 3; | |
background: #f7f7f7; | |
} | |
.top span:after { | |
border-radius: 100% 0 100% 0; | |
content: ""; | |
height: 242%; | |
left: 41%; | |
position: absolute; | |
top: -193%; | |
width: 90%; | |
} | |
.top { | |
position: absolute; | |
width: 42%; | |
height: 4%; | |
top: 0px; | |
left: 29%; | |
} | |
.top:before { | |
content: ''; | |
position: absolute; | |
width: 62%; | |
height: 260%; | |
border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%; | |
left: -27%; | |
top: 1%; | |
} | |
.top:after { | |
content: ''; | |
position: absolute; | |
width: 62%; | |
height: 260%; | |
border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%; | |
right: -27%; | |
top: 1%; | |
} | |
.magics{ | |
margin: 0 auto; | |
position: absolute; | |
width: 200px; | |
height: 400px; | |
border-radius: 80px; | |
box-shadow: 0px 15px 20px #aaa; | |
z-index: 0; | |
} | |
.mouses{ | |
margin: 60px auto; | |
position: relative; | |
width: 200px; | |
height: 400px; | |
border-top: 3px solid #f5f5f5; | |
border-bottom: 3px solid #f5f5f5; | |
background: rgb(103,104,109); /* Old browsers */ | |
background: -moz-linear-gradient(left, rgba(103,104,109,1) 0%, rgba(226,226,226,1) 25%, rgba(241,241,241,1) 50%, rgba(229,229,229,1) 79%, rgba(103,104,109,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(103,104,109,1)), color-stop(25%,rgba(226,226,226,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(79%,rgba(229,229,229,1)), color-stop(100%,rgba(103,104,109,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(left, rgba(103,104,109,1) 0%,rgba(226,226,226,1) 25%,rgba(241,241,241,1) 50%,rgba(229,229,229,1) 79%,rgba(103,104,109,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(left, rgba(103,104,109,1) 0%,rgba(226,226,226,1) 25%,rgba(241,241,241,1) 50%,rgba(229,229,229,1) 79%,rgba(103,104,109,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(left, rgba(103,104,109,1) 0%,rgba(226,226,226,1) 25%,rgba(241,241,241,1) 50%,rgba(229,229,229,1) 79%,rgba(103,104,109,1) 100%); /* IE10+ */ | |
background: linear-gradient(to right, rgba(103,104,109,1) 0%,rgba(226,226,226,1) 25%,rgba(241,241,241,1) 50%,rgba(229,229,229,1) 79%,rgba(103,104,109,1) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67686d', endColorstr='#67686d',GradientType=1 ); /* IE6-9 */ | |
display: none; | |
border-radius: 75px; | |
box-shadow: 0px 10px 20px #000; | |
z-index: 2; | |
} | |
.leftnews{ | |
position: absolute; | |
width: 20px; | |
height: 300px; | |
border-left: 3px solid #e2e2e2; | |
border-radius: 20px/300px; | |
margin-left: -5px; | |
margin-top: 48px; | |
z-index: 2; | |
opacity: 0.6; | |
} | |
.mouses:before{ | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 300px; | |
border-right: 3px solid #e2e2e2; | |
border-radius: 20px/300px; | |
margin-left: 182px; | |
margin-top: 48px; | |
z-index: 2; | |
opacity: 0.6; | |
} | |
.innerpart{ | |
width: 135px; | |
height: 280px; | |
position: absolute; | |
background: #eeeeee; | |
border: 1px solid #bbb; | |
border-radius: 10px; | |
margin-top: 65px; | |
margin-left: 32px; | |
} | |
.innerpart:before{ | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 280px; | |
border-top-right-radius: 8px; | |
border-bottom-right-radius: 8px; | |
background: #333; | |
margin-left: 115px; | |
} | |
.innerpart:after{ | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 280px; | |
border-top-left-radius: 8px; | |
border-bottom-left-radius: 8px; | |
background: #333; | |
} | |
.laser{ | |
width: 30px; | |
height: 30px; | |
background: rgb(125,185,232); /* Old browsers */ | |
background: -moz-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%, rgba(113,74,137,1) 0%, rgba(56,62,102,1) 10%, rgba(17,39,91,1) 29%, rgba(20,25,38,1) 47%, rgba(20,25,38,1) 47%, rgba(63,63,63,1) 72%, rgba(71,71,71,1) 99%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,185,232,1)), color-stop(0%,rgba(113,74,137,1)), color-stop(10%,rgba(56,62,102,1)), color-stop(29%,rgba(17,39,91,1)), color-stop(47%,rgba(20,25,38,1)), color-stop(47%,rgba(20,25,38,1)), color-stop(72%,rgba(63,63,63,1)), color-stop(99%,rgba(71,71,71,1))); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%,rgba(113,74,137,1) 0%,rgba(56,62,102,1) 10%,rgba(17,39,91,1) 29%,rgba(20,25,38,1) 47%,rgba(20,25,38,1) 47%,rgba(63,63,63,1) 72%,rgba(71,71,71,1) 99%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%,rgba(113,74,137,1) 0%,rgba(56,62,102,1) 10%,rgba(17,39,91,1) 29%,rgba(20,25,38,1) 47%,rgba(20,25,38,1) 47%,rgba(63,63,63,1) 72%,rgba(71,71,71,1) 99%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, rgba(125,185,232,1) 0%,rgba(113,74,137,1) 0%,rgba(56,62,102,1) 10%,rgba(17,39,91,1) 29%,rgba(20,25,38,1) 47%,rgba(20,25,38,1) 47%,rgba(63,63,63,1) 72%,rgba(71,71,71,1) 99%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, rgba(125,185,232,1) 0%,rgba(113,74,137,1) 0%,rgba(56,62,102,1) 10%,rgba(17,39,91,1) 29%,rgba(20,25,38,1) 47%,rgba(20,25,38,1) 47%,rgba(63,63,63,1) 72%,rgba(71,71,71,1) 99%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#474747',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
border-radius: 50%; | |
position: absolute; | |
margin-left: 52px; | |
margin-top: 10px; | |
} | |
.onoff{ | |
width: 12px; | |
height: 25px; | |
position: absolute; | |
background: #58ce39; | |
border-radius: 20px; | |
box-shadow: inset 0px 0px 1px #398f27; | |
margin-left: 92px; | |
margin-top: 10px; | |
cursor: pointer; | |
z-index: 5; | |
} | |
.onoffs{ | |
width: 12px; | |
height: 25px; | |
position: absolute; | |
background: #444; | |
border-radius: 20px; | |
box-shadow: inset 0px 0px 1px #555; | |
margin-left: 92px; | |
margin-top: 10px; | |
cursor: pointer; | |
z-index: 5; | |
} | |
.onoffs:after{ | |
content: ""; | |
position: absolute; | |
cursor: pointer; | |
width: 10px; | |
height: 10px; | |
border-radius: 9px; | |
background: rgb(226,226,226); /* Old browsers */ | |
background: -moz-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(237,237,237,1) 53%, rgba(234,234,234,1) 53%, rgba(226,226,226,1) 56%, rgba(254,254,254,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(53%,rgba(237,237,237,1)), color-stop(53%,rgba(234,234,234,1)), color-stop(56%,rgba(226,226,226,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* IE10+ */ | |
background: linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
z-index: 5; | |
margin-left: 1px; | |
margin-top: 14px; | |
} | |
.onoff:after{ | |
content: ""; | |
position: absolute; | |
cursor: pointer; | |
width: 10px; | |
height: 10px; | |
border-radius: 9px; | |
background: rgb(226,226,226); /* Old browsers */ | |
background: -moz-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(237,237,237,1) 53%, rgba(234,234,234,1) 53%, rgba(226,226,226,1) 56%, rgba(254,254,254,1) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(53%,rgba(237,237,237,1)), color-stop(53%,rgba(234,234,234,1)), color-stop(56%,rgba(226,226,226,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* IE10+ */ | |
background: linear-gradient(45deg, rgba(226,226,226,1) 0%,rgba(237,237,237,1) 53%,rgba(234,234,234,1) 53%,rgba(226,226,226,1) 56%,rgba(254,254,254,1) 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
z-index: 5; | |
margin-left: 1px; | |
margin-top: 1px; | |
} | |
.apples, .butts:before, .tops span:after, .butts:after, .tops:before, .tops:after, .butts:before, .butts:after { | |
background: #c7c8cc; /* foreground color */ | |
} | |
#apples{ | |
width: 30px; | |
height: 26px; | |
margin: 0 auto; | |
margin-top: 190px; | |
position: relative; | |
z-index: 5; | |
} | |
.apples { | |
width: 30px; | |
height: 26px; | |
border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%; | |
position: absolute; | |
} | |
.bites { | |
position: absolute; | |
width: 60%; | |
height: 62%; | |
right: -40%; | |
top: 8%; | |
border-radius: 60%; | |
background: #eeeeee; | |
} | |
.butts span { | |
display: block; | |
position: absolute; | |
border-radius: 100% 100% 0% 0%; | |
width: 24.5%; | |
height: 400%; | |
bottom: -239%; | |
left: 38%; | |
} | |
.butts { | |
position: absolute; | |
width: 100%; | |
height: 4%; | |
bottom: -1%; | |
background: #eeeeee; | |
} | |
.butts:before { | |
content: ''; | |
position: absolute; | |
width: 24%; | |
height: 400%; | |
border-radius: 0% 0% 100% 100%; | |
left: 21%; | |
bottom: 38%; | |
} | |
.butts:after { | |
content: ''; | |
position: absolute; | |
width: 23.4%; | |
height: 400%; | |
border-radius: 0% 0% 100% 100%; | |
right: 21%; | |
bottom: 38%; | |
} | |
.tops span { | |
display: block; | |
position: absolute; | |
border-radius: 0 0 44% 44% / 0 0 100% 100%; | |
width: 61%; | |
height: 259%; | |
top: -92%; | |
left: 18.6%; | |
z-index: 3; | |
background: #eeeeee; | |
} | |
.tops span:after { | |
border-radius: 100% 0 100% 0; | |
content: ""; | |
height: 242%; | |
left: 41%; | |
position: absolute; | |
top: -193%; | |
width: 90%; | |
} | |
.tops { | |
position: absolute; | |
width: 42%; | |
height: 4%; | |
top: 0px; | |
left: 29%; | |
} | |
.tops:before { | |
content: ''; | |
position: absolute; | |
width: 62%; | |
height: 260%; | |
border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%; | |
left: -27%; | |
top: 1%; | |
} | |
.tops:after { | |
content: ''; | |
position: absolute; | |
width: 62%; | |
height: 260%; | |
border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%; | |
right: -27%; | |
top: 1%; | |
} | |
.light{ | |
width: 3px; | |
height: 3px; | |
border-radius: 2px; | |
background: #58ce39; | |
position: absolute; | |
margin-top: 50px; | |
margin-left: 129px; | |
} | |
.lights{ | |
width: 2px; | |
height: 2px; | |
border-radius: 2px; | |
background: #999; | |
position: absolute; | |
margin-top: 50px; | |
margin-left: 129px; | |
} | |
.text{ | |
width: 150px; | |
position: absolute; | |
color: #ccc; | |
font-family: HelveticaNeue-Light; | |
font-size: 4px; | |
margin-top: 220px; | |
margin-left: 40px; | |
} | |
.text1{ | |
width: 150px; | |
position: absolute; | |
color: #ccc; | |
font-family: HelveticaNeue-Light; | |
font-size: 4px; | |
margin-top: 226px; | |
margin-left: 50px; | |
} | |
.text2{ | |
width: 150px; | |
position: absolute; | |
color: #ccc; | |
font-family: HelveticaNeue-Light; | |
font-size: 4px; | |
margin-top: 232px; | |
margin-left: 47px; | |
} | |
.remove{ | |
width: 45px; | |
height: 25px; | |
background: #e5e5e5; | |
position: absolute; | |
border-top: 1px solid #cccccc; | |
border-radius: 6px; | |
margin-top: 245px; | |
margin-left: 45px; | |
} | |
.remove:after{ | |
content: ""; | |
position: absolute; | |
background: #333; | |
border-radius: 20px; | |
width: 43px; | |
height: 10px; | |
margin-left: 1px; | |
margin-top: 8px; | |
} | |
.remove:before{ | |
content: ""; | |
position: absolute; | |
background: #444; | |
border-bottom: 1px solid #222; | |
border-bottom-left-radius: 6px; | |
border-bottom-right-radius: 6px; | |
width: 43px; | |
height: 12px; | |
margin-left: 1px; | |
margin-top: 12px; | |
} |