Logic Gates

Logic gates are the basis of all of computing. They take two binary inputs (0/1 or true/false), and result in a binary output whose value depends on the inputs. These gates form the building blocks upon which all computers are built.

Here are the three basic logic gates: AND (true only when both inputs are true), OR (true when either input is true), and XOR (eXclusive or, true only when exactly one input is true, but not both). Click the inputs (square boxes) to see the outputs reflect the values.

  • And Gate

  • Or Gate

  • XOR Gate

Half Adder

A half adder adds two binary digits, returning the result (either 0, 1, or 10) in its two outputs. The two outputs are called the carry (the tens digit) and the sum (the ones digit); the carry can be chained into a full adder to add more inputs.

Full Adder

A full adder adds three binary digits, returning the result (0, 1, 10, or 11) in its two outputs. The two outputs are called the carry-out (the tens digit) and the sum (the ones digit); the carry can be chained to another full adder to add more inputs. The first input (which a carry-out can be chained to) is called the carry-in; the other two are usually called A and B (this designation is arbitrary; the inputs are completely symmetric).

Chained Adder

Here are four full adders chained together. These adders add two four-digit binary numbers (0 – 15), formed by the upper row of inputs and the lower row of inputs, resulting in the five digit binary number (which will always be ≤ 30) formed by the row of outputs at the bottom.

The carry-out of each adder connects to the carry-in of the next adder, forming the chain (as opposed to the single full-adder, where both the carry-in and the carry-out are directly drawn). The right-most adder is a simple half-adder, since there is no carry-in to incorporate. The carry-out from the left-most adder is drawn directly as the most significant digit of the output, since there is no further adder to carry to.

Decimal Adder

This has nothing to do with logic gates, but it's still a cool demo. Click any binary digit toggle between 1 and 0. The sum of the two numbers will be computed – in pure CSS – and displayed in decimal form below.

Silon

Implementing logic gates and adders in pure CSS

Silon is an experiment demonstrating the power of CSS selectors. Using LESS to generate selectors from declared logical operations, I implemented simple logic gates, as well as half- and full- adders.

To get started, click a tab above.

To see how it works, see the readme on GitHub.