Get the latest tech news

Show HN: I made Logic gates using CSS if() function

AND .and .out { --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); } → → → → → OR .or .out { --value: if(style(--a: 1): 1; style(--b: 1): 1; else: 0); } → → → → NOT .not .out { --value: if(style(--a: 1): 0; else: 1); } → → XOR .xor .out { --value: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); } → → → → (a AND b) OR c → → → → → → → → NAND (NOT AND) → → → → → → → → NOR (NOT OR) → → → → → → → → Binary Converter .binary > .out { /* Calculate the current bit value */ --value: calc(mod(var(--dec, 0), 2)); /* Value to pass to the next digit */ --next-dec: calc(round(down, var(--dec, 0) / 2, 1)); &::before { background: rgb( calc((1 - var(--value)) * 255), calc((1 - var(--value)) * 255), calc((1 - var(--value)) * 255) ); } 7-Segment Display Dirac delta function using CSS math controls each segment: Half Adder /* Half Adder: adds two bits */ .half-adder .sum { --value: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); } .half-adder .carry { --value: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); } + = (sum, carry) + = + = + = Full Adder /* Full Adder: adds two bits + carry in */ .full-adder .sum { /* Sum = (A XOR B) XOR Cin */ --half-sum: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); --value: if( style(--half-sum: 0): if(style(--cin: 1): 1; else: 0); style(--half-sum: 1): if(style(--cin: 0): 1; else: 0); else: 0 ); } .full-adder .carry { /* Carry = (A AND B) OR (Cin AND (A XOR B)) */ --carry1: if(style(--a: 0): 0; style(--b: 0): 0; else: 1); --xor-ab: if( style(--a: 0): if(style(--b: 1): 1; else: 0); style(--a: 1): if(style(--b: 0): 1; else: 0); else: 0 ); --carry2: if(style(--cin: 0): 0; style(--xor-ab: 0): 0; else: 1); --value: if(style(--carry1: 1): 1; style(--carry2: 1): 1; else: 0); } + + = (A + B + Cin = sum, carry) + + = + + = + + = 2:1 Multiplexer (MUX) /* Select one of two inputs based on select line */ .mux-2to1 .out { --value: if( style(--s: 0): var(--i0, 0); /* S=0: select I0 */ else: var(--i1, 0) /* S=1: select I1 */ ); } I0 I1 S Out → I0=0, I1=1, S=0 → Out=0 → I0=0, I1=1, S=1 → Out=1 4:1 Multiplexer /* 4:1 MUX implemented with basic logic gates */ /* Out = (I0·!S1·!S0) + (I1·!S1·S0) + (I2·S1·!S0) + (I3·S1·S0) */ .mux-4to1 .out { /* Step 1: NOT gates for select lines */ --not-s1: if(style(--s1: 1): 0; else: 1); --not-s0: if(style(--s0: 1): 0; else: 1); /* Step 2: AND gates for selection conditions */ --term0: if(style(--i0: 0): 0; style(--not-s1: 0): 0; style(--not-s0: 0): 0; else: 1); --term1: if(style(--i1: 0): 0; style(--not-s1: 0): 0; style(--s0: 0): 0; else: 1); --term2: if(style(--i2: 0): 0; style(--s1: 0): 0; style(--not-s0: 0): 0; else: 1); --term3: if(style(--i3: 0): 0; style(--s1: 0): 0; style(--s0: 0): 0; else: 1); /* Step 3: OR all terms together */ --value: if( style(--term0: 1): 1; style(--term1: 1): 1; style(--term2: 1): 1; style(--term3: 1): 1; else: 0 ); } I0 I1 I2 I3 S1 S0 Out → S1S0=00 → I0 → S1S0=01 → I1 → S1S0=10 → I2 → S1S0=11 → I3.

+ = (sum, carry) + = + = + = Full Adder + + = (A + B + Cin = sum, carry) + + = + + = + + = 2:1 Multiplexer (MUX) → S1S0=00 → I0 → S1S0=01 → I1 → S1S0=10 → I2 → S1S0=11 → I3 Pure CSS logic gates implementation using the experimental CSS if() function (Chrome 137+)

Get the Android app