Forked from Ramakrishna V's Pen Apple Magic Mouse.
A Pen by Captain Anonymous on CodePen.
-
-
Save mehrdadrafiee/40eb431b1c71585a3101 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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"); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment