uczyć

dabblet.css

/**
 * uczyć
 *
 * Slide from "Learning to teach" presentation by Bartek Szopka
 * Front-Trends 2012
 */

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

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

html {
	/* fallback non-gradient background */
	background-color: #FEFEFE;
	background: url("http://dabblet.com/img/noise.png");
	
	/* multiple backgrounds: colour, texture and gradient for red margin line */
	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.4em 0 150px;
	
	/* paper lines background, 
	   based on http://dabblet.com/gist/1560755 by @LeaVerou
	   look there for more details ;) */
	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;
}

.teach { 
	position; relative;
	margin-left: 0.5em;
}

/* a little bit of magic to position curly bracket */
.teach:before {
	content: "{";
	position: absolute;
	opacity: 0.4;
	transform: translate(2.8em,-1.4em) rotate(-90deg) scale(3) scaleY(2);
}

.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ć <span class="ipa">/ˈut͡ʂɨʨ/</span></p>
<p class="teach note">to teach</p>

settings.json

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