CSS3 Tags

dabblet.css

/* CSS3 Tags */

ul#css3 { 
	overflow: auto;
	list-style: none;
}

ul#css3 li, ul#css3 a {
	float:left;
	height:23px;
	line-height:23px;
	position:relative;
	left: 6px;
	margin-bottom: 12px;
}

ul#css3 a {
	margin-right: 20px;
	padding:0 8px 0 12px;
	background: #c9e5f5;
	background: linear-gradient(to bottom, #c9e5f5, #aed8f0);
	border-radius: 0px 4px 4px 0px;
	border: 1px solid #86bedf;
	border-left: none;
	font-family: Georgia, Times, "Times New Roman", serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	letter-spacing: 1px;
	color: #6fa2c0;
	text-decoration: none;
	text-shadow: #e0f0f9 0px 1px 0px;
} 

ul#css3 a:before {
	content: "";
	float: left;
	position: absolute;
	top: 3px;
	left: -9px;
	width: 15px;
	height: 15px;
	background: linear-gradient(135deg, #c9e5f5, #aed8f0);
	border: 1px solid #86bedf;
	border-radius: 0px 2px 0px 3px;
	transform: rotate(45deg);
	z-index: -1;
}
	
ul#css3 a:after {
	content: "";
	position: absolute;
	top: 9px;
	left: -2px;
	float: left;
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #86bedf;
}

dabblet.html

<ul id="css3">
    <li><a href="#">Photoshop mockup</a></li>
    <li><a href="#">CSS background-image</a></li>
    <li><a href="#">CSS3 border-radius</a></li>
    <li><a href="#">CSS3 transparent borders</a></li>
    <li><a href="#">HTML5 Canvas</a></li>
</ul>

settings.json

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