Skip to content

Instantly share code, notes, and snippets.

@Seitenwerk

Seitenwerk/index.html

Created October 15, 2012 12:24
Show Gist options
  • Save Seitenwerk/3892189 to your computer and use it in GitHub Desktop.
Save Seitenwerk/3892189 to your computer and use it in GitHub Desktop.
Download ZIP
This one is a responsive switch including a status box. It's purely made via CSS and (what makes it so special) it is fully responsive. As a big plus, it's based on an ordinary form so it can easily be submitted without the use of javascript. For better
Raw
index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<title>CSS - Switch</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head><lock name="comparo"></lock>
<body>
<div id="wrapper">
<div class="activator">
<form action="#">
<label for="activator">Switch</label>
<input type="checkbox" id="activator" name="activator" value="on">
<div class="switch_container">
<span class="switch">&nbsp;</span>
</div>
<div class="infobox active">
<h2>« Activated »</h2>
<p>
Thank you for activating this awesome feature!
You will now be granted the power of deactivation, which will allow you to deactivate it at your will!
</p>
</div>
<div class="infobox inactive">
<h2>« Deactivated »</h2>
<p>
Oh No! Please activate me.
</p>
</div>
</form>
</div>
</div>
</body></html>
Raw
style.css
body{
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: #222222;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.activator form{
margin-top: 5%;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative;
text-align: center;
}
.activator label, .activator input{
position: absolute;
left: 0;
opacity: 0;
}
.activator label, .activator input{
width: 100%;
cursor: pointer;
}
.activator .switch_container{
height:20px;
border-radius: 10px;
box-shadow: inset 0px 0px 3px #ababab;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9));
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
box-sizing: border-box;
padding-right: 25px;
}
.activator .switch_container .switch{
display: inline-block;
width:100%;
height: inherit;
padding-left: 0%;
transition: padding-left 1s;
-webkit-transition: padding-left 1s;
-moz-transition: padding-left 1s;
}
.activator .switch_container .switch:before{
content: '\00A0';
position: relative;
bottom: 3px;
display: block;
width: 25px;
height: 25px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
background: radial-gradient(ellipse at center, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #fefefe 50%, #fdfdfd 51%, #ffffff 100%);
box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
-webkit-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
}
.activator input:checked~.switch_container .switch{
padding-left: 100%;
}
.activator .infobox{
box-sizing: border-box;
position: relative;
width: 80%;
margin: 25px auto;
padding: 10px;
border-radius: 10px;
color: #767676;
text-shadow: 0px 1px 0px #ffffff;
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa));
background-image: -webkit-linear-gradient(top, #ffffff, #fafafa);
background-image: -moz-linear-gradient(top, #ffffff, #fafafa);
background-image: -o-linear-gradient(top, #ffffff, #fafafa);
background-image: -ms-linear-gradient(top, #ffffff, #fafafa);
background-image: linear-gradient(top, #ffffff, #fafafa);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#fafafa');
box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.45);
-webkit-box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.30), inset 0px -5px 5px 0px rgba(0, 0, 0, 0.03);
border: 1px solid #f0f0f0;
transition: all 2s;
-webkit-transition: all 0.5s;
-moz-transition: all 2s;
}
.activator .infobox:before{
content: '\00A0';
display: block;
position: absolute;
top:-15px;
left: 50%;
margin-left:-15px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #ffffff;
}
.activator .infobox:after{
content: '\00A0';
position: absolute;
z-index: -1;
top:-11px;
left: 50%;
margin-left:-10px;
width: 20px;
height: 20px;
background: #999;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.05);
}
.activator input:not(:checked)~.active{
display: none;
}
.activator input:checked~.inactive{
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment