Inset text

dabblet.css

/**
 * Inset text
 */

body {
	padding-top: 100px;
	background-color: #8d9794;	
}

h1 {
	font-size: 5em; 
	margin: 0px 0px 5px 10px;
	
	position: relative;
	
}

.insetText { 
	font-family: serif;
	background-color: rgba(10, 10, 10,.9); 
	-webkit-background-clip: text; 
	-moz-background-clip: text; 
	background-clip: text; 
	color: transparent; 
	text-shadow: 0px 2px 2px rgba(255,255,255,0.4); 
}
.textContainer{
	border: 3px solid rgba(50, 50, 50, .6);
	border-radius: 20px;
	height: 210px;
	width: 190px;
	box-shadow: inset 0px 0px 10px rgba(255, 255, 255, .5);
}

h1 > span.one {
	letter-spacing: -7px;
}

h1 > span.one:first-letter { 
	color: red;
}

h1 > span.v { 
	position: absolute;
	top: 61px;
	left: 108px;
	font-size: .95em;
}
h1 > span.a { 
	position: absolute;
	top: 122px;
	left: 106px;	
	font-size: .97em;

}

dabblet.html

<div class="textContainer">
<h1 class="insetText">
	<span class="one">ONE</span>
	<span class="v insetText">V</span>
	<span class="a insetText">A</span>
</h1>
</div>

settings.json

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