<!doctype html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Switch with CSS3 & HTML5 ~ Takide , The home of your graphic</title>
<meta name="description" content="iOS Switch CSS3 | SicanStudios.com">
<meta name="author" content="http://SicanStudios.com">
<meta name="viewport" content="width=device-width, initial-scale=0.55"/>
<style>
/* =================================================
CREATED (C) BY ALEX CICAN APRIL 2012
HTTP://SICANSTUDIOS.COM
================================================= */
/* the container/socket of the switch */
button {
font-family: Helvetica, Arial, sans-serif;
position: relative;
color: #cfcfcf;
font-size: 2em;
cursor: pointer;
background: rgb(239,239,239);
background: -moz-linear-gradient(top, rgba(239,239,239,1) 25%, rgba(226,226,226,1) 50%, rgba(239,239,239,1) 75%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(239,239,239,1)), color-stop(50%,rgba(226,226,226,1)), color-stop(75%,rgba(239,239,239,1)));
background: -webkit-linear-gradient(top, rgba(239,239,239,1) 25%,rgba(226,226,226,1) 50%,rgba(239,239,239,1) 75%);
background: -o-linear-gradient(top, rgba(239,239,239,1) 25%,rgba(226,226,226,1) 50%,rgba(239,239,239,1) 75%);
background: -ms-linear-gradient(top, rgba(239,239,239,1) 25%,rgba(226,226,226,1) 50%,rgba(239,239,239,1) 75%);
background: linear-gradient(top, rgba(239,239,239,1) 25%,rgba(226,226,226,1) 50%,rgba(239,239,239,1) 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#efefef',GradientType=0 );
width: 400px;
height: 400px;
padding: 70px 0 70px 0;
border: none;
-moz-box-shadow: 0 3px 10px 1px #894e30, 0 0 1px 2px #917760, inset 0 -6px 2px rgba(0,0,0,0.15), inset 0 5px 2px rgba(0,0,0,0.1), inset 0 12px 2px #fff;
-webkit-box-shadow: 0 3px 10px 1px #894e30, 0 0 1px 2px #917760, inset 0 -6px 2px rgba(0,0,0,0.15), inset 0 5px 2px rgba(0,0,0,0.1), inset 0 12px 2px #fff;
box-shadow: 0 3px 10px 1px #894e30, 0 0 1px 2px #917760, inset 0 -6px 2px rgba(0,0,0,0.15), inset 0 5px 2px rgba(0,0,0,0.1), inset 0 12px 2px #fff;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* on tap (iphone/ipad) don't grey button */
}
/* hides the dotted border around the switch (Firefox) */
button::-moz-focus-inner {
border: 0;
}
/* the 4 screws are attached to the socket (before, after) and to the span button (before, after) */
button:before, button:after, button span:before, button span:after {
content: "\00d7";
font-size: 0.5em;
font-weight: bold;
color: #999;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 25px;
left: 30px;
width: 21px;
height: 21px;
line-height: 21px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 2px 1px #fff, inset 0 1px 1px #aaa, inset 0 2px 2px #999, inset 0 8px 4px rgba(255,255,255,0.5), inset 0 0 5px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 1px #fff, inset 0 1px 1px #aaa, inset 0 2px 2px #999, inset 0 8px 4px rgba(255,255,255,0.5), inset 0 0 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 1px #fff, inset 0 1px 1px #888, inset 0 2px 3px #999, inset 0 8px 4px rgba(255,255,255,0.7), inset 0 0 10px rgba(0,0,0,0.1);
background: -moz-linear-gradient(top, rgba(152,152,152,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(152,152,152,0)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(152,152,152,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(152,152,152,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(152,152,152,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(152,152,152,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00666666', endColorstr='#c4ffffff',GradientType=0 );
}
/* right-top screw position */
button:after {
left: auto;
right: 30px;
}
/* left-bottom screw position */
button span:before {
left: -90px;
top: 278px;
}
/* right-bottom screw position */
button span:after {
top: 278px;
left: auto;
right: -90px;
}
/* the inner socket of the switch */
button span {
width: 160px;
z-index: 1;
position: relative;
height: 250px;
display: block;
margin: 0 auto;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
background: #fff;
-moz-box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 0 10px #fff;
-webkit-box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 0 10px #fff;
box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 0 10px #fff;
}
/* positioning of the "I" on the switch. Button OFF state (gradient down) */
button span>b:first-child {
position: absolute;
text-shadow: 0 -1px 0 #666, 0 1px 0 #fff;
top: 11px;
left: 10px;
height: 70%;
width: 140px;
padding-top: 10px;
color: #ccc;
-moz-border-radius: 31px;
-webkit-border-radius: 31px;
border-radius: 31px;
background: rgb(229,229,229);
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
-moz-box-shadow: inset 0 7px 10px rgba(0,0,0,0.07);
-webkit-box-shadow: inset 0 7px 10px rgba(0,0,0,0.07);
box-shadow: inset 0 7px 10px rgba(0,0,0,0.07);
}
/* positioning of the "O" on the switch */
button span>b:last-child {
position: absolute;
bottom: 17%;
color: #eee;
text-shadow: 0 -1px 0 #ddd, 0 1px 0 #fff;
width: 140px;
height: 18%;
left: 10px;
padding-top: 20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
background: #fff;
}
/* additional shadow under button, on top of inner container */
button span>b:last-child:before {
content: "";
position: absolute;
background: rgba(0,0,0,0.2);
top: 17px;
left: 0;
width: 140px;
height: 80px;
-moz-border-radius: 30px;
-webkit-border-radius: 35px;
border-radius: 30px;
z-index: -1;
-moz-box-shadow: inset 0 -10px 10px rgba(255,255,255,0.2), 0 15px 20px 2px rgba(0,0,0,0.2), 0 50px 30px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 -10px 10px rgba(255,255,255,0.2), 0 15px 20px 2px rgba(0,0,0,0.2), 0 50px 30px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -10px 10px rgba(255,255,255,0.2), 0 15px 20px 2px rgba(0,0,0,0.2), 0 50px 30px 2px rgba(0,0,0,0.1);
}
/* WHEN BUTTON IS OFF */
/* the inner socket of the switch */
button.off span {
-moz-box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 2px 1px rgba(0,0,0,0.15), inset 0 10px 6px rgba(0,0,0,0.5), inset 0 14px 14px rgba(0,0,0,0.3), inset 0 40px 0 #fff;
-webkit-box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 2px 1px rgba(0,0,0,0.15), inset 0 10px 6px rgba(0,0,0,0.5), inset 0 14px 14px rgba(0,0,0,0.3), inset 0 40px 0 #fff;
box-shadow: inset 0 0 1px 1px #ccc, inset 0 0 0 8px #ddd, inset 0 0 0 10px #888, inset 0 10px 2px 1px rgba(0,0,0,0.15), inset 0 10px 6px rgba(0,0,0,0.5), inset 0 14px 14px rgba(0,0,0,0.3), inset 0 40px 0 #fff;
}
/* top part of button */
button.off span>b:first-child {
color: #aaa;
top: 18%;
left: 12px;
height: 70%;
width: 136px;
padding-top: 10px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
background: rgb(216,216,216);
background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 72%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(72%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 72%);
background: -o-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 72%);
background: -ms-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 72%);
background: linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 72%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ffffff',GradientType=0 );
}
/* bottom part of button */
button.off span>b:last-child {
position: absolute;
text-shadow: 0 -1px 0 #bbb, 0 1px 0 #fff;
color: #dfdfdf;
top: auto;
bottom: 7%;
left: 6%;
background: none;
}
/* hides the shadow */
button.off span>b:last-child:before {
display: none;
}
/* styles the "darkness" popup */
.dark {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 110%;
background: black !important;
z-index: 1000;
-moz-opacity: 0.90;
opacity: 0.90;
filter: alpha(opacity=90);
}
/* =================================================
STYLING IS FOR THE PAGE
================================================= */
html, body {
height: 100%;
overflow: hidden;
background-attachment: fixed;
background: url('http://takide.in/wp-content/uploads/2012/05/pattern.jpg') #000;
margin: 0;
}
body {
background: -moz-radial-gradient(center, ellipse cover, rgba(237,237,237,0) 0%, rgba(61,22,9,0.63) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(237,237,237,0)), color-stop(100%,rgba(61,22,9,0.63)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(237,237,237,0) 0%,rgba(61,22,9,0.63) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(237,237,237,0) 0%,rgba(61,22,9,0.63) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(237,237,237,0) 0%,rgba(61,22,9,0.63) 100%);
background: radial-gradient(center, ellipse cover, rgba(237,237,237,0) 0%,rgba(61,22,9,0.63) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ededed', endColorstr='#a13d1609',GradientType=1 );
text-align: center;
padding-top: 10%;
}
footer {
font-size: 12px;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6em;
margin-top: 2%;
color: #4b3324;
text-shadow: 0 1px 0 #dab59c;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
footer:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
footer a:link, footer a:visited {
color: #7b1232;
text-decoration: none;
border-bottom: dotted 1px #aa214b;
}
footer a:hover {
color: #aa214b;
}
footer a:active {
top: 1px;
position: relative;
}
#enabled {
margin-bottom: 2%;
}
footer label {
vertical-align: 6%;
cursor: pointer;
}
.twitter-share-button {
vertical-align: -25%;
margin-right: -25px !important;
}
.logo {
border-bottom: none !important;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
padding: 15px;
display: inline-block;
}
</style>
</head>
<body>
<button>
<span>
<b>I</b> <b>O</b>
</span>
</button>
<footer>
<input type="checkbox" id="enabled" checked="checked" /> <label for="enabled">Turn OFF the lights</label><br/>
Created by <a href="http://twitter.com/sican" title="Alex Cican on Twitter">@sican</a><br/>
<br><a href="http://takide.in/"> Takide , The home of your graphic </a>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/* iOS re-orientation fix */
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
/* iOS hides Safari address bar */
window.addEventListener("load",function() {
setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);
});
}
$(document).ready(function(){
/* on button click, toggle class "OFF" for the switch */
$("button").click(function () {
$("button").toggleClass("off");
});
/* by default, darkness checkbox is checked (ON) but check anyhow */
if ($('#enabled').is(':checked')) {
darkness();
}
/* on checkbox click, check if checked or not,
call the function to initiate or remove the class of "darkness" if not */
$('#enabled').click(function() {
if ($('#enabled').is(':checked')) {
darkness();
} else {
$(".dark").remove();
}
});
function darkness() {
/* adds a div for the darkness when switch is OFF */
$('html').append('<div class="dark"></div>');
/* on button click, make darkness */
$("button").click(function () {
/* avoid bug of inverting the switch i.e. "1" = OFF, "0" = ON;
(by disabling the lights, clicking on the switch (OFF), re-enabling the lights and clicking the switch (ON) */
if ($("button").hasClass("")) {
//do nothing
} else {
$(".dark").fadeIn(800);
}
});
/* wherever on darkness is clicked, bring the light back and move the switch to ON */
$(".dark").click(function () {
$(".dark").fadeOut(2000);
$("button").removeClass();
});
}
});
</script>
</body>
</html>
