Profile

dabblet.css

/**
 * Profile
 */

.cnt{
	width: 400px;
	height:200px;
	margin:50px auto;
	position:relative;
}

.radius img{
	height:100px;
	border-radius:50%;
	position:absolute;
	left:192px;
	bottom:100px;
}

.inverseRadius{
	padding: 20px;
	height: 100px;
	width: 200px;
	background-image: radial-gradient(240px -10px, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, #3399CC 57px, #3399CC 57px);
	//box-shadow: 0 0 15px black;
	position:absolute;
	left:0;
	bottom:0;
	color: white;
	font-family:Arial;
}

dabblet.html

<div class="cnt">
	<div id="profile" class="radius"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c66.66.828.828/s160x160/23907_500671649966694_1377137854_n.jpg"></div>
	<div id="content" class="inverseRadius"><p>Kostas</p><p>Web Developer</p></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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