zincplusplus

/**
* Ribbon
**/

.xribbon {
	font-family: Verdana, Arial, sans;
	position: relative;
	text-align: center;
}
.xribbon,

zincplusplus

/**
 * hipster love
 */

background: 
radial-gradient(circle, #f30 0%, #f30 19%, #f30 33%, transparent 33%) 17em 8em,
radial-gradient(circle, #f30 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;

zincplusplus

/**
 * 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,

zincplusplus

/**
 * fashion
 */
background: 
linear-gradient(45deg, rgba(0,0,0,.1), rgba(255,255,255,.1) 25%, rgba(0,0,0,.1) 50%, rgba(255,255,255,.1) 75%, rgba(0,0,0,.1)),
radial-gradient(circle, #254383 8%, transparent 8%, transparent 30%, #254383 30%, #254383 35%, transparent 35%),
radial-gradient(circle, #254383 6%, transparent 6%) 25em 25em;
background-size: 100% 100%, 50em 50em, 50em 50em;
background-color: #112564;
font-size:1px;

zincplusplus

/**
 * The save-as window 
 * start: 1h 19:35
 * end:
 */
 
/*----------------------------------------------------------------------------------
 * tools
 ---------------------------------------------------------------------------------*/

zincplusplus

/**
 * The -Webkit-scrollbar challenge
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Make the first div’s scrollbar like the second’s 
 * without changing the styling of the div (i.e. you
 * can only change the ::-webkit-scrollbar-* rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * It doesn't matter if the second div doesn't look the same
 * after your changes, it's only there to show you how the

zincplusplus

/**
* twisted
**/
body {
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;

zincplusplus

/*
*  gist to dabblet
*/
body {
	background: #2E3538 url("http://dabblet.com/img/noise.png");
	color: #eee;
	font-family: Helvetica, Arial, sans;
	height: 100%;
	margin: 50px 0 0;
	position: relative;

zincplusplus

/**
 * candy
 */

background: 
radial-gradient(circle, #fff 38%, transparent 38%) 50px 57px,
radial-gradient(circle, #E21777 9%, transparent 9%) 50px -305px,
linear-gradient(left, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 50px 0,
radial-gradient(circle, #000 38%, transparent 38%) 0 -43px,
radial-gradient(circle, #E21777 9%, transparent 9%) 0 -81px,

zincplusplus

/**
 * candy
 */

background: 
radial-gradient(circle, #ED1F68 40%, transparent 40%) 0 -43px,
linear-gradient(left, transparent 46%, #ED4B78 46%, #ED1F68 54%, transparent 54%);
background-size: 200px 200px;