Getting fun with some animations & transitions :)
A Pen by Rafael González on CodePen.
<body class="content"> | |
<header> | |
<h1>Pure <strong>CSS</strong> Toggles</h1> | |
</header> | |
<form> | |
<fieldset> | |
<legend>Flat look</legend> | |
<div> | |
<input type="checkbox" id="pure-toggle-0" hidden/> | |
<label class="pure-toggle" for="pure-toggle-0"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label> | |
</div> | |
<div> | |
<input type="checkbox" id="pure-toggle-1" hidden checked="checked" /> | |
<label class="pure-toggle flip" for="pure-toggle-1"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label> | |
</div> | |
<div> | |
<input type="checkbox" id="pure-toggle-2" hidden /> | |
<label class="pure-toggle impossible" for="pure-toggle-2"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label> | |
</div> | |
<div> | |
<input type="checkbox" id="pure-toggle-3" hidden checked="checked" /> | |
<label class="pure-toggle wide" for="pure-toggle-3"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label> | |
</div> | |
</fieldset> | |
<fieldset> | |
<legend>3D look</legend> | |
<div> | |
<input type="checkbox" id="pure-toggle-4" hidden /> | |
<label class="pure-toggle brick" for="pure-toggle-4"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label> | |
</div> | |
<div> | |
<input type="checkbox" id="pure-toggle-5" hidden /> | |
<label class="pure-toggle brick switch" for="pure-toggle-5"><span class="fontawesome-ok ok"></span><span class="fontawesome-remove no ok"></span></label> | |
</div> | |
</fieldset> | |
</form> | |
</body> |
Getting fun with some animations & transitions :)
A Pen by Rafael González on CodePen.
@import "compass/css3"; | |
@import "compass/reset"; | |
@import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300); | |
$base-font: 'Open Sans', sans-serif; | |
$side: 3em; | |
$duration: 1s; | |
$factor: 1.618; | |
$red: #cc0966; | |
$blue: #5EB9CC; | |
$green: #59c000; | |
$ok-color: $blue; | |
$ko-color: $red; | |
body { | |
background-color: #d0d0d0; | |
text-align: center; | |
font-family: $base-font; | |
font-size: 16px; | |
color: #444444; | |
} | |
header { | |
margin-bottom: 2em; | |
} | |
h1 { | |
font-size: 2em; | |
margin: 2em 0 1em; | |
} | |
strong { | |
font-weight: 700; | |
} | |
legend { | |
font-size: 1.5em; | |
line-height: 1em; | |
margin-bottom: 1.9em; | |
padding-bottom: 1.5em; | |
border-bottom: 1px solid #444444; | |
width: 100%; | |
} | |
div { | |
margin-bottom: 1em; | |
} | |
fieldset{ | |
border: 0; | |
padding: 0 2em 2em; | |
} | |
.pure-toggle { | |
cursor: pointer; | |
font-size: 1.5em; | |
width: $side * 2; | |
height: $side; | |
display: inline-block; | |
position: relative; | |
background: white; | |
text-align: left; | |
line-height: $side; | |
@include box-sizing(border-box); | |
@include perspective(300px); | |
&:before { | |
width: $side; | |
height: $side; | |
position: absolute; | |
right: 0; | |
top: 0; | |
background-color: #f5f5f5; | |
display: inline-block; | |
text-align: center; | |
font-family: 'FontAwesome', sans-serif; | |
content: "···"; | |
color: #ffffff; | |
@include transition(all $duration ease-in-out); | |
@include transform-origin(0%, 50%); | |
/*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/ | |
} | |
[class^='fontawesome-'] { | |
padding: 1em; | |
line-height: inherit; | |
font-family: 'FontAwesome', sans-serif; | |
@include transition(all $duration ease-in-out) | |
} | |
&.flip:before { | |
@include transform-origin(50%, 50%); | |
} | |
&.brick { | |
$brickColor: white; | |
background-color: $brickColor; | |
border: 1px solid darken($brickColor, 15); | |
border-bottom-color: darken($brickColor, 10); | |
@include box-shadow( | |
inset 0 0.1em 0.03em rgba(0,0,0,0.2) | |
,inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3) | |
,0 0 2em rgba($brickColor,0.6) | |
); | |
&:before { | |
margin-right: -1px; | |
margin-top: -0.14em; | |
$volumeColor: darken($ok-color, 10); | |
@include box-shadow( | |
0 0.12em 0.01em rgba($volumeColor,1) | |
,0 0.12em 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0.3) | |
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2) | |
); | |
@include transition-duration($duration/1.5); | |
@include transition-timing-function(cubic-bezier(0.52,-0.41, 0.55, 1.46)); | |
} | |
&.switch { | |
background: transparent; | |
@include box-shadow( | |
inset 0 0 0.03em rgba(0,0,0,0) | |
,inset 0 0 0.3em rgba(0, 0, 0, 0) | |
,0 0 2em rgba($brickColor,0) | |
); | |
border: 0; | |
&:before { | |
display: none; | |
} | |
.ok { | |
color: white; | |
top: 0; | |
left: 1px; | |
line-height: 1em; | |
padding: 1em 1.045em; | |
position: relative; | |
background: $ok-color; | |
$volumeColor: darken($ok-color, 10); | |
@include box-shadow( | |
0 0.12em 0.01em rgba($volumeColor,1) | |
,0 0.12em 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0.3) | |
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2) | |
); | |
@include transition-duration($duration/3); | |
&.no { | |
top: 0.14em; | |
background: transparent; | |
background: $ko-color; | |
$volumeColor: darken($ko-color, 10); | |
@include box-shadow( | |
0 0 0.01em rgba($volumeColor,1) | |
,0 0 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0) | |
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0) | |
); | |
} | |
} | |
} | |
} | |
} | |
input[type='checkbox'] + .pure-toggle { | |
&:before { | |
@include transform(rotateY(0deg)); | |
background-color: $ok-color; | |
} | |
[class^="fontawesome-"], | |
[class*="fontawesome-"] { | |
color: $ok-color; | |
} | |
&.wide:before { | |
@include transform(rotateY(0deg)); | |
@include animation(contract ($duration) ease-in-out forwards); | |
} | |
&.brick { | |
&:before { | |
border-bottom: 0.03em solid lighten($ok-color, 05); | |
text-shadow: 0 0.05em 0 darken($ok-color, 05); | |
@include transform(rotateY(0deg)); | |
} | |
&.switch .ok { | |
color: white; | |
} | |
} | |
&.flip:before { | |
@include animation(flip ($duration/2) ease-in-out forwards); | |
} | |
&.impossible:before { | |
@include animation(impossible ($duration/2) ease-in-out forwards); | |
} | |
} | |
input[type='checkbox']:checked + .pure-toggle { | |
&:before { | |
@include transform(rotateY(-180deg)); | |
background-color: $ko-color; | |
} | |
[class^="fontawesome-"], | |
[class*="fontawesome-"] { | |
color: $ko-color; | |
} | |
&.wide:before { | |
@include transform(rotateY(0deg)); | |
@include animation(expand ($duration) ease-in-out forwards); | |
} | |
&.brick { | |
&:before { | |
margin-right: $side; | |
border-bottom: 0.03em solid lighten($ko-color, 10); | |
text-shadow: 0 0.05em 0 darken($ko-color, 10); | |
@include transform(rotateY(0deg)); | |
$volumeColor: darken($ko-color, 10); | |
@include box-shadow( | |
0 0.12em 0.01em rgba($volumeColor,1) | |
,0 0.12em 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0.3) | |
,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2) | |
); | |
} | |
&.switch { | |
&:before { | |
display: none; | |
} | |
.ok { | |
top: 0.14em; | |
$volumeColor: darken($ok-color, 10); | |
@include box-shadow( | |
0 0 0.01em rgba($volumeColor,1) | |
,0 0 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0) | |
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0) | |
); | |
&.no { | |
top: 0; | |
background: $ko-color; | |
$volumeColor: darken($ko-color, 10); | |
@include box-shadow( | |
0 0.12em 0.01em rgba($volumeColor,1) | |
,0 0.12em 0.3em rgba($volumeColor,0.6) | |
,0 0.12em 2em rgba(0, 0, 0, 0.3) | |
,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2) | |
); | |
} | |
} | |
} | |
} | |
&.flip:before { | |
@include animation(flip-back ($duration/2) ease-in-out forwards); | |
} | |
&.impossible:before { | |
@include animation(impossible-back ($duration/2) ease-in-out forwards); | |
} | |
} | |
@keyframes flip-back { | |
0%{ | |
@include transform(rotateY(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateY(-360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: $side; | |
@include transform(rotateY(-360deg) translateX(0) scale(1)); | |
} | |
} | |
@keyframes flip { | |
0%{ | |
margin-right: $side; | |
@include transform(rotateY(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateY(360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: 0; | |
@include transform(rotateY(360deg) translateX(0) scale(1)); | |
} | |
} | |
@keyframes impossible-back { | |
0%{ | |
@include transform(rotateX(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateX(-360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: $side; | |
@include transform(rotateX(-360deg) translateX(0) scale(1)); | |
} | |
} | |
@keyframes impossible { | |
0%{ | |
margin-right: $side; | |
@include transform(rotateX(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateX(360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: 0; | |
@include transform(rotateX(360deg) translateX(0) scale(1)); | |
} | |
} | |
@keyframes expand { | |
0%{ | |
right: 0; | |
width: $side; | |
} | |
25%{ | |
right: 0; | |
width: 100%; | |
} | |
50%{ | |
right: auto; | |
width: 100%; | |
left: 0; | |
} | |
100%{ | |
left: 0; | |
width: $side; | |
} | |
} | |
@keyframes contract { | |
0%{ | |
left: 0; | |
width: $side; | |
} | |
25%{ | |
left: 0; | |
width: 100%; | |
} | |
50%{ | |
right: 0; | |
width: 100%; | |
left: auto; | |
} | |
100%{ | |
right: 0; | |
width: $side; | |
} | |
} | |
@-webkit-keyframes flip-back { | |
0%{ | |
@include transform(rotateY(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateY(-360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: $side; | |
@include transform(rotateY(-360deg) translateX(0) scale(1)); | |
} | |
} | |
@-webkit-keyframes flip { | |
0%{ | |
margin-right: $side; | |
@include transform(rotateY(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateY(360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: 0; | |
@include transform(rotateY(360deg) translateX(0) scale(1)); | |
} | |
} | |
@-webkit-keyframes impossible-back { | |
0%{ | |
@include transform(rotateX(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateX(-360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: $side; | |
@include transform(rotateX(-360deg) translateX(0) scale(1)); | |
} | |
} | |
@-webkit-keyframes impossible { | |
0%{ | |
margin-right: $side; | |
@include transform(rotateX(0deg) translateX(0) scale(1)); | |
} | |
60%, | |
80%{ | |
@include transform(rotateX(360deg) translateX(0) scale(1.3)); | |
} | |
100%{ | |
margin-right: 0; | |
@include transform(rotateX(360deg) translateX(0) scale(1)); | |
} | |
} | |
@-webkit-keyframes expand { | |
0%{ | |
right: 0; | |
width: $side; | |
} | |
25%{ | |
right: 0; | |
width: 100%; | |
} | |
50%{ | |
right: auto; | |
width: 100%; | |
left: 0; | |
} | |
100%{ | |
left: 0; | |
width: $side; | |
} | |
} | |
@-webkit-keyframes contract { | |
0%{ | |
left: 0; | |
width: $side; | |
} | |
25%{ | |
left: 0; | |
width: 100%; | |
} | |
50%{ | |
right: 0; | |
width: 100%; | |
left: auto; | |
} | |
100%{ | |
right: 0; | |
width: $side; | |
} | |
} |