uczyć się uczyć

dabblet.css

/**
 * uczyć się uczyć
 */

@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);

html, body {
	height: 100%;
	box-sizing: border-box;
}

html {
	background-color: #FEFEFE;
	background:  url("http://dabblet.com/img/noise.png");
	background: linear-gradient(left, rgba(230,100,100,0.7) 1px, transparent 1px) no-repeat 100px 0,
				url("http://dabblet.com/img/noise.png"), 
				#FEFEFE;
}

body {
	font-family: 'The Girl Next Door', cursive;
	font-size: 5em;
	line-height: 1.5em;
	color: #333;
	text-shadow: .05em .05em .1em rgba(0,0,0,0.2);
	
	margin: 0;
	padding: 1.5em 1.5em 0 150px;
	
	background: linear-gradient(rgba(50, 100, 200, .7) 1px, transparent 1px);
	background-size: 100% 1.5em;
	background-origin: content-box;	
	background-position: 0 1em;
}

p {
	margin: 0;
}

.note {
	font-size: 0.55em;
	color: #555;
}

.author {
	text-align: right;
}

.teach { 
	position: relative;
	display: inline-block;
	left: 5.5em;
}

.learn {
	position: relative;
	display: inline-block;
	left: 2.5em;
}

.learn:before,
.teach:before {
	content: "{";
	position: absolute;
	opacity: 0.4;
	transform: translate(2.8em,-1.4em) rotate(-90deg) scale(3) scaleY(2);
}

.learn:before {
	transform: translate(3em,-1.5em) rotate(-90deg) scale(3) scaleY(3);
}

.ipa { 
	font-family: Lucida Grande, Lucida Sans Unicode, sans-serif;
	font-size: 0.7em;
	line-height: 1.2;
	color: #555;
	font-weight: normal;
}

dabblet.html

<p>uczyć się uczyć</p>
<p class="note"><span class="learn">learning</span> <span class="teach">to teach</span> </p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}