Dabblet: Anatomie CSS3 placky - komentovany kod s prefixy

dabblet.css

/**
 * Dabblet: Anatomie CSS3 placky - komentovany kod s prefixy
 * Autor: Martin Michálek, machal77@gmail.com, @machal
 */

.badge {
	/* Zacneme ctvercovym blokem s textem uvnitr */
	display: inline-block;
	text-align: center;
	text-decoration: none;
	width: 200px;
	height: 200px;
	background: orangered;
	color: white;
	font-weight: bold;
	/* Vertikalne centrujeme */	
	line-height: 200px;
	/* Vytvorime kulaty tvar */
  	-webkit-border-radius: 50%; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
        border-radius: 50%; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
        /* Pridame stiny: 
        	- stin pod placku 
        	- prostorovy efekt dovnitr placky */	
  	-webkit-box-shadow: /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
		.2em .2em 1em rgba(0,0,0,.5), 
		inset -2px -2px 12px rgba(0,0,0,.3);        
        box-shadow:  /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
		.2em .2em 1em rgba(0,0,0,.5), 
		inset -2px -2px 12px rgba(0,0,0,.3);
	/* Pridame stin pod text */
     	text-shadow: /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */		        
     		0 0 5px rgba(0,0,0,.75); 
     		1px 1px 0 black; 
	/* Pridame barvy na pozadi
		- radialni prechod jako odlesk svetla v leve horni casti
		- pomoci vicenasobneho pozadi opakujeme barvu placky
	*/
	background: /* FF3.6+ */
		-moz-radial-gradient(25% 25%, closest-side, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), 
		orangered;
	background: /* Op12+ */
		-o-radial-gradient(25% 25%, 40px 40px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), 
		orangered;
	background: /* Saf6+, Chrome10+ */
		-webkit-radial-gradient(25% 25%, 40px 40px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), 
		orangered;
	background:
		radial-gradient(25% 25%, 40px 40px, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%), 
		orangered;	
}

body {
  	font: 2em/2em Arial, sans-serif;
  	padding: .5em;
}

dabblet.html

<a href="http://www.vzhurudolu.cz" class="badge">I ♥ CSS3</a>

settings.json

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