zincplusplus

/**
 * pixels
 */

background: 
linear-gradient(180deg, rgba(255,0,102,0) 20%, rgba(255,0,102,.1) 20%, rgba(255,0,102,.1) 40%, rgba(255,0,102,.2) 40%, rgba(255,0,102,.2) 60%, rgba(255,0,102,.4) 60%, rgba(255,0,102,.4) 80%, rgba(255,0,102,.6) 80%),
linear-gradient(-90deg, rgba(255,0,102,0) 20%, rgba(255,0,102,.1) 20%, rgba(255,0,102,.1) 40%, rgba(255,0,102,.2) 40%, rgba(255,0,102,.2) 60%, rgba(255,0,102,.4) 60%, rgba(255,0,102,.4) 80%, rgba(255,0,102,.6) 80%);
background-color: #fc0;
background-size: 100% 100%;

zincplusplus

/**
 * alegria
 */

background: 
/*block1*/ radial-gradient(99em 1em, circle, #ff0053 17%, transparent 1%) -75em 0em,radial-gradient(1em 99em, circle, #ffc000 17%, transparent 1%) -75em 25em,radial-gradient(1em 1em, circle, #ff0053 17%, transparent 1%) -75em 25em,radial-gradient(99em 99em, circle, #ffc000 17%, transparent 2%) -75em 50em,
/*block2*/ radial-gradient(99em 1em, circle, #ff0053 17%, transparent 1%) -75em 50em,radial-gradient(1em 99em, circle, #ffc000 17%, transparent 1%) -75em 75em,radial-gradient(1em 1em, circle, #ff0053 17%, transparent 1%) -75em 75em,radial-gradient(99em 99em, circle, #ffc000 17%, transparent 2%) -75em 0em,
/*block3*/ radial-gradient(99em 1em, circle, #ffc000 17%, transparent 1%) -25em 25em,radial-gradient(1em 99em, circle, #ff0053 17%, transparent 1%) -25em 50em,radial-gradient(1em 1em, circle, #ffc000 17%, transparent 1%) 75em 0em,radial-gradient(99em 99em, circle, #ff0053 17%, transparent 2%) -25em 25em,
/*block4*/ radial-gradient(99em 1em, circle, #ffc000 17%, transparent 1

zincplusplus

/**
 * atomic
 */

background: 
linear-gradient(45deg, rgba(212,213,182,.0) 50%, rgba(212,213,182,1) 100%),
linear-gradient(-45deg, #333 10%, transparent 10%) 70em 78em,
linear-gradient(225deg, #D4D5B6 10%, transparent 10%) 100em 140em,
linear-gradient(45deg, #D4D5B6 10%, transparent 10%) 134em 103em,
linear-gradient(45deg, transparent 10%, #333 5%, #333 24%, transparent 24%) 100em 168em,

zincplusplus

/**
 * atomic
 */

background: 
linear-gradient(45deg, rgba(212,213,182,.0) 53%, rgba(212,213,182,1.5) 100%),
linear-gradient(-45deg, #333 10%, transparent 10%) 70em 78em,
linear-gradient(225deg, #D4D5B6 10%, transparent 10%) 100em 140em,
linear-gradient(45deg, #D4D5B6 10%, transparent 10%) 134em 103em,
linear-gradient(45deg, transparent 10%, #333 5%, #333 24%, transparent 24%) 100em 168em,

zincplusplus

/**
 * Testing media queries
 */

@media screen and (max-device-width: 1270px) {
body { 
	background: red;
}
}
}

zincplusplus

.main {
	margin: 0 auto;
	white-space: nowrap;
	width: 600px;
	
}
.item {
	height: 20px;
}

zincplusplus

.fbox {
	white-space: nowrap;
	width: 400px;
	border: 1px solid black;
	padding-right: 60px;
}
.fbox div {
	display: inline-block;
	background: red;
	position:relative;

zincplusplus

/**
* twitter logo
**/
#icon {
background: url(http://cl.ly/0A143w1d110H2S032J0j/Photoshop%20Document.png) no-repeat 50% 50%;
font-size: 10px;
height: 200px;
overflow: hidden;
position: relative;
width: 290px;

zincplusplus

/**
* twitter logo
**/

zincplusplus

/**
* transparent
**/

background-color: #fff;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
background-size:16em 16em;
background-position:0 0, 8em 8em;
font-size: 1px;