Skip to content

Instantly share code, notes, and snippets.

@nladart
Created September 12, 2013 10:05
Show Gist options
  • Save nladart/6535309 to your computer and use it in GitHub Desktop.
Save nladart/6535309 to your computer and use it in GitHub Desktop.
A Pen by Bennett Feely.
<figure>
<div class="toggle">
<input id="a" type="checkbox" />
<label for="a">
<div class="card flip"></div>
</label>
</div>
</figure>
<figure>
<div class="toggle">
<input id="b" type="checkbox" />
<label for="b">
<div class="card grow"></div>
</label>
</div>
</figure>
<figure>
<div class="toggle slide">
<input id="c" type="checkbox" />
<label for="c">
<div class="card slide"></div>
</label>
</div>
</figure>
<figure>
<div class="toggle slide2">
<input id="d" type="checkbox" />
<label for="d">
<div class="card"></div>
</label>
</div>
</figure>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
font:100%/1 "Montserrat";
}
html, body, figure { display:flex; }
html, body {
justify-content:center;
color:gray;
height:100%;
}
body {
text-align:center;
counter-reset:count;
background:gainsboro;
width:80%;
}
figure {
flex:1;
flex-direction:column;
justify-content:center;
counter-increment:count;
}
figure:after {
font-size:2rem;
content:counter(count);
opacity:.5;
}
.toggle {
display:flex;
position:relative;
width:7.5rem;
height:2.5rem;
background:white;
align-self:center;
user-select:none;
margin:2rem;
}
.toggle:after, .toggle:before {
flex:1;
text-align:center;
line-height:2.5rem;
}
.toggle:after {
content:"ON";
}
.toggle:before {
content:"OFF";
}
input { display:none; }
label {
position:absolute;
top:0; left:0; right:0; bottom:0;
perspective:1000;
cursor:pointer;
}
.card {
position:relative;
background:limegreen;
transition:.4s;
width:50%;
height:2.5rem;
pointer-events:none;
}
input:checked + label .card { background:tomato; }
.flip {
transform:perspective(200) rotateY(0);
transform-origin:center right;
transform-style:preserve-3d;
}
input:checked + label .flip {
transform:perspective(200) rotateY(180deg);
}
.grow {
animation:grow-rev .4s 1 both;
}
input:checked + label .grow {
animation:grow .4s 1 both;
}
@keyframes grow {
50%{ transform:translateX(1.875rem) scale(2) }
to { transform:translateX(3.75rem); }
}
@keyframes grow-rev {
from { transform:translateX(3.75rem); }
50%{ transform:translateX(1.875rem) scale(2) }
to { transform:translateX(0rem); }
}
.slide .card { transform:translate(0); }
.slide input:checked + label .card {
transform:translateX(3.75rem);
}
.slide2 { overflow:hidden; }
.slide2 .card {
transform:translate(0);
background:transparent;
box-shadow:
-3.75rem 0 limegreen,
3.75rem 0 tomato;
}
.slide2 input:checked + label .card {
transform:translateX(3.75rem);
background:transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment