bigbossSNK

/* Look into my eyes */
/* based on http://jakearchibald.com/2013/solving-rendering-perf-puzzles/*/
div {
	position: absolute;
	margin: 3em;
}

span {
	position: absolute;
	font-size: 0.8em;

bigbossSNK

button {
	margin:3em;
	padding: 0 15px;
	border: solid 1px;
	border-color: #2978B0 #266FA5 #1C557D;
	border-radius: 3px;
	font: bold 13px/36px sans-serif;
	color: #fff;
	background: linear-gradient( top, #50A9E7, #307CB3);
	box-shadow:  0 1px  0   rgba(255,255,255,.2) inset,

bigbossSNK

/*	CSS ruler (bug-free in Chrome)	*/
figure {
	margin: 3em;
	width: 500px;
	height: 20px;
	background: 
		linear-gradient(left, transparent 19px, rgba(255, 255, 255, .6) 19px) repeat-x,
		linear-gradient(left, transparent 4px,  rgba(255, 255, 255, .4) 4px) repeat-x,
		url(/img/noise.png),
		linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));

bigbossSNK

		/* dabblet issue #150		*/

background: gray;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

bigbossSNK

/* CSS Region experiment 1*/
#source  { flow-into: prose;} /* #sources push their content into */
#source2 { flow-into: prose;} /* the named flow 'prose',          */
.region  { flow-from: prose;} /* then .region pulls from prose    */

#region_1, #region_2, #region_3 {
  float: left;
  background: lightblue;
}

bigbossSNK

/* CSS Region experiment 2*/
#source  { flow-into: prose;} /* #sources push their content into */
#source2 { flow-into: prose;} /* the named flow 'prose',          */
.region  { flow-from: prose;} /* then .region pulls from prose    */

#region_1, #region_2, #region_3 {
  position: absolute;
  background: lightblue;
}

bigbossSNK

/*  making custom data- visible  */
[data-state]:before {
	content: attr(data-state);
}

[data-state='open']   { color: green;}
[data-state='closed'] { color: red;}