Skip to content

Instantly share code, notes, and snippets.

@frostney

frostney/index.html

Created June 18, 2012 20:17
Show Gist options
  • Save frostney/2950475 to your computer and use it in GitHub Desktop.
Save frostney/2950475 to your computer and use it in GitHub Desktop.
Download ZIP
Proof-of-concept for an iOS-like slider ui element in CSS3 with pseudo-selector to be used in a single div element. Works only in Webkit browsers. Demo here: http://jsfiddle.net/Stoney/Xsx9W/
Raw
index.html
<!doctype html>
<html>
<head>
<title>CSS Magic</title>
<style>
.switch:before, .switch.off:before {
content: "";
display: block;
width: 138px;
height: 34px;
background: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#ddd));
border-radius: 12px;
border: 1px solid #ccc;
left: 4px;
top: 2px;
}
.switch.on:before {
background: -webkit-gradient(linear, left top, left bottom, from(#080), to(#ddd));
opacity: 0.8;
}
.switch {
display: block;
cursor: pointer;
position: relative;
width: 140px;
height: 36px;
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border-radius: 10px;
padding: 1px;
}
.switch:after {
content: "";
display: block;
width: 36px;
height: 36px;
position: absolute;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
border-radius: 18px;
top: 1px;
border: 1px solid #444;
}
.switch.on:after {
-webkit-transform: translateX(104px) translateZ(0);
}
.switch.off:after {
-webkit-transform: translateX(0px) translateZ(0);
}
</style>
</head>
<body>
<div id="mySwitch" class="switch on">
<br />
<div id="myOtherSwitch" class="switch off">
</div>
</body>
</html>
@frostney
Copy link
Author

See example in action: http://jsfiddle.net/Stoney/Xsx9W/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment