heart shape thumbnail

dabblet.css

/**
* heart shape thumbnail
**/
body {
	background: #eee;
	counter-reset:section;

}
li {
	background: url(http://dl.dropbox.com/u/10214082/heart3-back.png) no-repeat 50% 1px;/*url(http://f.cl.ly/items/3i1z343e1G1A1x2O3L3L/Untitled-2.png) no-repeat 20px 20px*/
	display: block;
	float: left;
	height: 320px;
	margin: 30px;
	width: 300px;
}
li:before {
	position: absolute;
	counter-increment:section;
	content:counter(section);
}
li div {
	height: 300px;
	mask-image: url(http://dl.dropbox.com/u/10214082/heart3.png);
	width: 300px;
}
li:nth-child(1) div {
background: 	linear-gradient(27deg, transparent 48%, rgba(0,0,0,0.5) 48%, transparent 49%),
		linear-gradient(-27deg, transparent 48%, rgba(0,0,0,0.5) 48%, transparent 49%);
background-color: #00906f;
background-size: 20px 40px;
}
li:nth-child(2) div {
background: 	linear-gradient(135deg, transparent 85%, red 85%) 72px -27px,
		linear-gradient(315deg, transparent 85%, red 85%) 29px -70px,
		radial-gradient(circle, red 40%, transparent 40%) 50px 51px,
		linear-gradient(45deg, transparent 67%, red 85%) 29px 73px,
		linear-gradient(225deg, transparent 67%, red 85%) 72px -70px,
		linear-gradient(135deg, transparent 67%, red 85%) 72px -27px,
		linear-gradient(315deg, transparent 67%, red 85%) 29px -70px,
		linear-gradient(135deg, transparent 36%, white 36%, white 63%, transparent 63%),
		linear-gradient(45deg, transparent 36%, white 36%, white 63%, transparent 63%);
background-size: 100px 100px;
background-color: red
}
li:nth-child(3) div {
background:	radial-gradient(circle, #231d18 25%, transparent 25%) 3em 3em,
		radial-gradient(circle, #3f3932 25%, transparent 25%) 3em 4em,
		radial-gradient(circle, #231d18 25%, transparent 25%),
		radial-gradient(circle, #3f3932 25%, transparent 25%) 0 1em; 
background-size: 6em 6em;
background-color: #38322b;
font-size: 2px;
}
li:nth-child(4) div {
/**
* couch
**/

background: 
radial-gradient(circle, #c5376d 2%, transparent 2%) 100em 100em,
radial-gradient(circle, #c5376d 2%, transparent 2%),
linear-gradient(-45deg, transparent 49.5%, #c5376d 49.5%, #c5376d 50%, transparent 50%, transparent 99.5%, #a39483 99.5%),
linear-gradient(45deg, transparent 49.5%, #c5376d 49.5%, #c5376d 50%, transparent 50%, transparent 99.5%, #a39483 99.5%);
background-size:200em 200em;
background-color: #f773a3;
font-size: .5px;
}
li:nth-child(5) div {
background: 	linear-gradient(45deg, transparent 40%, #eee 40%, #eee 50%, transparent 50%, transparent 90%, #eee 90%),
		linear-gradient(-45deg, transparent 40%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.1) 50%, transparent 50%, transparent 90%, rgba(0,0,0,.1) 90%),
		linear-gradient(-45deg, transparent 30%, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 40%, transparent 40%, transparent 80%, rgba(255,255,255,.2) 80%, rgba(255,255,255,.2) 90%, transparent 90%);
background-color: #eee;		
background-size: 10px 10px;
}
li:nth-child(6) div {
background:
linear-gradient(90deg, transparent 43%, rgba(255,255,255,.3) 43%, rgba(255,255,255,.3) 57%, transparent 57%) 0 5px,
radial-gradient(circle, transparent 40%, red 40%, red 96%, transparent 96%) -50px -45px,
linear-gradient(0, transparent 40%, #fff 40%, #fff 60%, transparent 60%) 25px 25px,
linear-gradient(90deg, transparent 40%, #fff 40%, #fff 60%, transparent 60%) 25px 30px,
linear-gradient(45deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%) 26px 30px,
linear-gradient(135deg, transparent 42%, #fff 42%, #fff 58%, transparent 58%)  25px 30px;
background-color: red;
background-size: 100px 100px,100px 100px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
}
li:nth-child(7) div {
background: 	radial-gradient(circle, #F4DE37 2%, transparent 2%) 45px 15px,
		radial-gradient(circle, #F4DE37 2%,  transparent 2%) 55px 15px,
		radial-gradient(circle, #F4DE37 10%, transparent 10%) 30px -5px,
		radial-gradient(circle, #F4DE37 8%,  transparent 8%) 70px -5px,
		radial-gradient(circle, #F46837 40%, transparent 40%) 50px -30px,
		radial-gradient(circle, #F46837 20%, transparent 20%) 50px 10px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 100px 39px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 94px 30px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 0px 39px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 6px 30px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 100px 79px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 94px 90px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 0px 79px,
		radial-gradient(circle, #F46837 8%,  transparent 8%) 6px 90px,
		linear-gradient(0, transparent 50%,  #F4DE37 50%) 100px 0,
		linear-gradient(90deg, transparent 50%, #F4DE37 50%),
		linear-gradient(60deg, transparent 46%, #F46837 46%, #F46837 54%, transparent 54%) 100px 10px,
		linear-gradient(-60deg, transparent 46%, #F46837 46%, #F46837 54%, transparent 54%) 100px 10px;	
background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, 100px 100px, 100px 100px;
background-color: #F4DE37;
}
li:nth-child(8) div{
background:
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 50%),
linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.2) 50%),
linear-gradient(315deg, red 0%, red 25%, transparent 25%) -50px 0,
linear-gradient(225deg, red 0%, red 25%, transparent 25%) -50px 0,
linear-gradient(135deg, red 0%, red 25%, transparent 25%),
linear-gradient(45deg, red 0%, red 25%, transparent 25%);	
background-size: 50px 50px, 50px 50px, 100px 100px, 100px 100px, 100px 100px, 100px 100px;
background-color: white;
}
li:nth-child(9) div{
background:
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 50%) 20px 0px,
linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.2) 50%) 20px 0px,
linear-gradient(45deg, transparent 10%, green 10%, green 35%, transparent 35%, transparent 60%, green 60%, green 85%, transparent 85%);	
background-size: 50px 50px, 50px 50px, 100px 100px;
background-color: yellow;
}
li:nth-child(10) div{
background: radial-gradient(circle, #232669 8%, transparent 8%, transparent 30%, #232669 30%, #232669 35%, transparent 35%),
radial-gradient(circle, #232669 6%, transparent 6%) 25em 25em;
background-size: 50em 50em;
background-color: #121051;
font-size:1px;
}
li:nth-child(11) div{
/**
 * cheetah
 */
background: 
radial-gradient(circle, #3F2204 20%, transparent 20%) 0em 51em,
radial-gradient(circle, #3F2204 21%, transparent 21%) 67em 10em,
radial-gradient(circle, #472b0e 20%, transparent 20%) 145em 0em,
radial-gradient(circle, #3F2204 17%, transparent 17%) -8em 60em,
radial-gradient(circle, #3F2204 20%, transparent 20%) 66em 21em,
radial-gradient(circle, #472b0e 22%, transparent 22%) 120em 84em,
radial-gradient(circle, #472b0e 18%, transparent 18%) -1em 155em,
radial-gradient(circle, #3F2204 20%, transparent 20%) 71em 135em,
radial-gradient(circle, #3F2204 20%, transparent 20%) 81em 140em,
radial-gradient(circle, #d18c41 0%, #D19441 1000%);
background-size: 200em 200em;
background-color: #D19441;
font-size:1px;
}
li:nth-child(12) div{
/**
 * heart
 */

background: 
radial-gradient(circle, #f50 0%, #f30 19%, #f30 33%, transparent 33%) 17em 8em,
radial-gradient(circle, #f50 0%, #f30 19%, #f30 33%, transparent 33%) 83em 8em,
radial-gradient(circle, #f30 10%, transparent 10%) 50em 40em,
linear-gradient(225deg, #f30 18%, transparent 18%) 150em 111em,
linear-gradient(315deg, #f30 18%, transparent 18%) 150em 111em;
background-size: 200em 150em;
background-color: #49BAC3;
font-size:1px;}
li:nth-child(13) div{
/**
* twisted
**/
background:
linear-gradient(-45deg, transparent 49%, rgba(0,0,0,0.1) 49%, rgba(0,0,0,0.2) 50%, #ffff00 50%, #ffcc00 63%, transparent 63%) 34em 0,
linear-gradient(-45deg, transparent 48%, rgba(0,0,0,0.2) 48%, rgba(0,0,0,0.2) 50%, #ff5300 50%, #ff3300 63%, rgba(0,0,0,0.1) 63%, rgba(0,0,0,0.1) 64%, transparent 64%) 60em 0,
linear-gradient(45deg, transparent 50%, #ffcc00 50%, #ffcc00 63%, transparent 63%) -26em 0,
linear-gradient(45deg, transparent 50%, #ff3300 50%, #ff3300 63%, transparent 63%);
background-color: #333;
background-size: 120em 60em;
font-size: 5px;
}
li:nth-child(14) div{
background: 
radial-gradient(circle, rgba(255,255,255,.8) 4%, transparent 4%) 84em -13em,
radial-gradient(circle, black 8%, transparent 8%) 95em -2em,
radial-gradient(circle, rgba(255,255,255,.4) 16%, transparent 10%) 75em -22em,
radial-gradient(circle, #94caf0 16%, transparent 10%) 95em -2em,
radial-gradient(circle, white 24%, #dedede 31%, transparent 26%) 95em -2em,

radial-gradient(circle, rgba(255,255,255,.8) 4%, transparent 4%) -116em -13em,
radial-gradient(circle, black 8%, transparent 8%) -105em -2em,
radial-gradient(circle, rgba(255,255,255,.4) 16%, transparent 10%) -125em -22em,
radial-gradient(circle, #94caf0 16%, transparent 10%) -105em -2em,
radial-gradient(circle, white 24%, #dedede 31%, transparent 26%) -105em -2em;
background-color: #fc0;
background-size: 450em 260em;
font-size: .7px;
}
li:nth-child() div{}

dabblet.html

<ol>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
	<li><div></div></li>
</ol>

settings.json

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