Pure CSS logic gates implementation using the experimental CSS if() function (Chrome 137+)
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)
→
→
→
→
→
→
→
→