Skip to content

Instantly share code, notes, and snippets.

@tanraya

tanraya/CSS3-Logic-Gates-using-Checkboxes.markdown

Created November 22, 2014 12:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tanraya/b26b5e82e6481a99e727 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tanraya/b26b5e82e6481a99e727 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Logic Gates using Checkboxes
Raw
CSS3-Logic-Gates-using-Checkboxes.markdown
Raw
index.jade
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
Raw
script.js
/*
Colin 'Oka' Hall-Coates, http://oka.io
Complete set of Logic Gates created with pure CSS3 hackery.
http://en.wikipedia.org/wiki/Logic_gate
*/
Raw
style.scss
@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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment