Complete set of logic gates made with CSS3 Checkboxes.
A Pen by Colin Hall-Coates on CodePen.
Complete set of logic gates made with CSS3 Checkboxes.
A Pen by Colin Hall-Coates on CodePen.
header | |
h1 CSS3 Checkbox Logic Gates | |
h3 | |
a(href="https://twitter.com/OkaTweets" target="_blank") @OkaTweets | |
.container | |
h2 AND Gate | |
input(type="checkbox" checked="checked")#box-AND-1 | |
input(type="checkbox")#box-AND-2 | |
label(for="box-AND-1").box | |
label(for="box-AND-2").box | |
.light.light-AND | |
.container | |
h2 OR Gate | |
input(type="checkbox")#box-OR-1 | |
input(type="checkbox")#box-OR-2 | |
label(for="box-OR-1").box | |
label(for="box-OR-2").box | |
.light.light-OR | |
.container | |
h2 NOT Gate | |
input(type="checkbox")#box-NOT-1 | |
label(for="box-NOT-1").box | |
.light.light-NOT | |
.container | |
h2 NAND Gate | |
input(type="checkbox")#box-NAND-1 | |
input(type="checkbox")#box-NAND-2 | |
label(for="box-NAND-1").box | |
label(for="box-NAND-2").box | |
.light.light-NAND | |
.container | |
h2 NOR Gate | |
input(type="checkbox")#box-NOR-1 | |
input(type="checkbox")#box-NOR-2 | |
label(for="box-NOR-1").box | |
label(for="box-NOR-2").box | |
.light.light-NOR | |
.container | |
h2 XOR Gate | |
input(type="checkbox")#box-XOR-1 | |
input(type="checkbox")#box-XOR-2 | |
label(for="box-XOR-1").box | |
label(for="box-XOR-2").box | |
.light.light-XOR | |
.container | |
h2 XNOR Gate | |
input(type="checkbox")#box-XNOR-1 | |
input(type="checkbox")#box-XNOR-2 | |
label(for="box-XNOR-1").box | |
label(for="box-XNOR-2").box | |
.light.light-XNOR |
/* | |
Colin 'Oka' Hall-Coates, http://oka.io | |
Complete set of Logic Gates created with pure CSS3 hackery. | |
http://en.wikipedia.org/wiki/Logic_gate | |
*/ |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Dosis:200,300,400); | |
@mixin AbsCenter() { | |
margin: auto; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
@mixin Transition($time, $timing) { | |
-webkit-transition: all $time $timing; | |
-moz-transition: all $time $timing; | |
-ms-transition: all $time $timing; | |
-o-transition: all $time $timing; | |
transition: all $time $timing; | |
} | |
@mixin Transform($type) { | |
-webkit-transform: $type; | |
-moz-transform: $type; | |
-ms-transform: $type; | |
-o-transform: $type; | |
transform: $type; | |
} | |
@mixin Animation($properties) { | |
-webkit-animation: $properties; | |
-moz-animation: $properties; | |
-o-animation: $properties; | |
animation: $properties; | |
} | |
@mixin Box-Shadow($properties) { | |
-webkit-box-shadow: $properties; | |
-moz-box-shadow: $properties; | |
box-shadow: $properties; | |
} | |
*, | |
*:before, | |
*:after { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html, | |
body { | |
background-color: #fff; | |
font: { | |
family: 'Dosis'; | |
} | |
color: #333; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
margin: 0; | |
font-weight: 300; | |
} | |
header { | |
margin: 15px auto; | |
width: 500px; | |
text-align: center; | |
} | |
h2 { | |
margin-bottom: 25px; | |
text-indent: 10px; | |
} | |
a { | |
color: #333; | |
&:hover { | |
color: #33d68b; | |
} | |
} | |
.container { | |
margin: 0 auto 30px; | |
padding: 10px; | |
position: relative; | |
width: 300px; | |
height: 160px; | |
background-color: #ddd; | |
border-radius: 6px; | |
@include Box-Shadow(0 0 4px -1px #333); | |
overflow: hidden; | |
} | |
.box { | |
margin-left: 10px; | |
display: block; | |
position: relative; | |
float: left; | |
width: 50px; | |
height: 50px; | |
background-color: #fff; | |
border-radius: 4px; | |
@include Transition(0.4s, ease); | |
overflow: hidden; | |
cursor: pointer; | |
&:after { | |
@include AbsCenter(); | |
width: 0; | |
height: 0; | |
border-radius: 50%; | |
background-color: #eee; | |
content: ''; | |
@include Transition(0.1s, ease); | |
z-index: 50; | |
} | |
&:hover:after { | |
width: 100%; | |
height: 100%; | |
border-radius: 4px; | |
} | |
} | |
.light { | |
margin-right: 15px; | |
position: relative; | |
float: right; | |
width: 50px; | |
height: 50px; | |
background-color: #fff; | |
border-radius: 50%; | |
overflow: hidden; | |
&:after { | |
@include AbsCenter(); | |
width: 0; | |
height: 0; | |
background-color: #33d68b; | |
border-radius: 50%; | |
@include Transition(0.1s, ease); | |
content: ''; | |
} | |
} | |
input[type="checkbox"] { | |
display: none; | |
} | |
// Checkboxes | |
#box-AND-1:checked ~ label[for="box-AND-1"], | |
#box-AND-2:checked ~ label[for="box-AND-2"], | |
#box-OR-1:checked ~ label[for="box-OR-1"], | |
#box-OR-2:checked ~ label[for="box-OR-2"], | |
#box-NOT-1:checked ~ label[for="box-NOT-1"], | |
#box-NAND-1:checked ~ label[for="box-NAND-1"], | |
#box-NAND-2:checked ~ label[for="box-NAND-2"], | |
#box-NOR-1:checked ~ label[for="box-NOR-1"], | |
#box-NOR-2:checked ~ label[for="box-NOR-2"], | |
#box-XOR-1:checked ~ label[for="box-XOR-1"], | |
#box-XOR-2:checked ~ label[for="box-XOR-2"], | |
#box-XNOR-1:checked ~ label[for="box-XNOR-1"], | |
#box-XNOR-2:checked ~ label[for="box-XNOR-2"] { | |
&:before { | |
@include AbsCenter(); | |
width: 100%; | |
background-color: #d9517e; | |
text-align: center; | |
line-height: 50px; | |
font-family: 'FontAwesome'; | |
font-size: 2em; | |
color: #fff; | |
content: "\f00c"; | |
z-index: 60; | |
} | |
} | |
// Logic Gates | |
// AND | |
#box-AND-1:checked + #box-AND-2:checked ~ .light-AND:after { | |
width: 100%; | |
height: 100%; | |
} | |
// OR | |
#box-OR-1:checked ~ .light-OR:after, | |
#box-OR-2:checked ~ .light-OR:after { | |
width: 100%; | |
height: 100%; | |
} | |
// NOT | |
#box-NOT-1:not(:checked) ~ .light-NOT:after { | |
width: 100%; | |
height: 100%; | |
} | |
// NAND | |
#box-NAND-1:not(:checked) + #box-NAND-2:not(:checked) ~ .light-NAND:after, | |
#box-NAND-1:checked ~ .light-NAND:after, | |
#box-NAND-2:checked ~ .light-NAND:after | |
{ | |
width: 100%; | |
height: 100%; | |
} | |
#box-NAND-1:checked + #box-NAND-2:checked ~ .light-NAND:after { | |
width: 0%; | |
height: 0%; | |
} | |
// NOR | |
#box-NOR-1:not(:checked) + #box-NOR-2:not(:checked) ~ .light-NOR:after { | |
width: 100%; | |
height: 100%; | |
} | |
// XOR | |
#box-XOR-1:checked ~ .light-XOR:after, | |
#box-XOR-2:checked ~ .light-XOR:after | |
{ | |
width: 100%; | |
height: 100%; | |
} | |
#box-XOR-1:not(:checked) + #box-XOR-2:not(:checked) ~ .light-XOR:after, | |
#box-XOR-1:checked + #box-XOR-2:checked ~ .light-XOR:after { | |
width: 0%; | |
height: 0%; | |
} | |
// XNOR | |
#box-XNOR-1:not(:checked) + #box-XNOR-2:not(:checked) ~ .light-XNOR:after, | |
#box-XNOR-1:checked + #box-XNOR-2:checked ~ .light-XNOR:after { | |
width: 100%; | |
height: 100%; | |
} | |