Binary switcher

dabblet.css

/**
 * Binary switcher
 */

body {
    font-family: monospace;
    font-size: 20px;
}

span {
	font-size: 30px;
    display: block;
	float: left;
	width: 40px;
	height: 50px;
	
	text-align: center;
	line-height: 50px;

    background-image: linear-gradient(transparent, transparent 0px, black 0px, black 2px, transparent 2px, transparent);
    	
	transition: background-position 500ms ease-in-out, background-color 500ms;
	
	position: relative;
	overflow: hidden;
}


.zero {
	background-color: rgba(255,0,0,0.3);
	background-position: 0px 48px;
}

.one {
    background-color: rgba(0,255,0,.3);
    			
    background-position: 0px 0px;
}



.zero::after,
.one::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	top: 0;
	left: 0;

	background-image: linear-gradient(90deg, transparent, transparent 0px, black 0px, black 2px, transparent 2px, transparent);	
	background-repeat: no-repeat;
	
	transition: transform 500ms ease-in-out;
}

.zero::after {
	transform: translateY(48px);
}

.one::after {
	transform: translateY(-48px);
}
.one + .zero::after {
	transform: translateY(0px);
}

.zero + .one::after {
	transform: translateY(0px);
}

.zero::before {
    content: "0";
}

.one::before {
    content: "1";
}

dabblet.html

<span class="zero"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="one"></span><span class="zero"></span><span class="zero"></span><span class="zero"></span><span class="zero"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="one"></span><span class="zero"></span><span class="zero"></span><span class="zero"></span><span class="zero"></span>

dabblet.js

document.body.addEventListener( "click", function( event ){ 
    var target = event.target;
    
    if (target.classList.contains("zero") || target.classList.contains("one")) {
        target.classList.toggle("zero");
        target.classList.toggle("one");
    }

}, false );

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}