CAT

dabblet.css

/**
 * CAT
 */
*, *::before, *::after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }


.meow {
	margin: 0.5em auto 0;
	background: #eee;
	width: 4em;
	height: 4em;
	border: 1px solid #aaa;
	font: 60px/2 sans-serif;
	text-align: center;
	border-radius: 1em 1em 0 1em;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	position: relative;
}
.meow::before {
	content: "||| |||";
	position: absolute;
	line-height: 7.3em;
	color: #444;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	width: 4em;

	vertical-align: bottom;
}
.meow::after {
	width: 2em;
	height:1em;
	background: #eee;
	position: absolute;
	left:100%;
	bottom:-1px;
	border: 1px solid #aaa;
	border-left: none;
	content: "";
}
.shadow1 {
	box-shadow: 4px 4px 8px rgba(0,0,0,.9);
	}
.shadow2 {
	-webkit-filter: drop-shadow(4px 4px 4px rgba(0,0,0,.4));
}

dabblet.html

<div class='meow shadow1' id='cat'>
	.&nbsp;&nbsp;.
	</div>

dabblet.js

// alert('Hello world!');
var meow = document.getElementsByClassName("meow")[0];
meow.onclick = function(){
	this.classList.toggle('shadow1');
	this.classList.toggle('shadow2');
}

settings.json

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