WNYC logo

dabblet.css

/****
 * WNYC logo
 * Reference: http://www.wnyc.org/
 ****/
* {
	line-height: 1;
	margin: 0;
	padding: 0;
}
body {
	background: white;
	color: #e11838;
	font-family: arial;
	font-size: 1em;
	font-weight: bold;
}
a:link, a:visited {
	color: #e11838;
}
p {
	line-height: 1.5;
}
#wnyc {
	font-size: 2em;
	padding: 1em;
	text-align: center;
	text-transform: uppercase;
}
#wnyc span {
	background: #e11838;
	border-bottom: 12px solid #e11838;
	color: white;
	display: inline-block;
	text-align: center;
	width: 1em;
	vertical-align: bottom;
}
#wnyc span:first-child {
	background: white;
	color: #e11838;
}
#wnyc span + span {
	padding-top: 0.25em;
}
#wnyc span + span + span {
	padding-top: 0.10em;
}
#wnyc span + span + span + span {
	padding-top: 0.5em;
}

dabblet.html

<p>Sometimes you say to yourself, &ldquo;I bet I can do that in CSS.&rdquo;</p>
<p>The <a href="http://www.wnyc.org/">WNYC</a> logo, in CSS:</p>
<div id="wnyc">
	<span>W</span>
	<span>N</span>
	<span>Y</span>
	<span>C</span>
</div>

settings.json

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