ahmedelgabri/cicada.css

## cicada.css
.example1 {
	background-color: #efefef;
	background-image: -webkit-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(201,184,88,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(168,137,73,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
	background-image: -moz-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(201,184,88,.13) 50%), -moz-linear-gradient(0, rgba(168,137,73,.17) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
	background-image: -o-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(201,184,88,.13) 50%), -o-linear-gradient(0, transparent 50%, rgba(168,137,73,.17) 50%), -o-linear-gradient(0, rgba(99,78,60,.19) 50%, transparent 50%);
	background-image: linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), linear-gradient(0, rgba(201,184,88,.13) 50%, transparent 50%), linear-gradient(0, rgba(168,137,73,.17) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
}

.example2 {
	background-color: #026873;
	background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
}

.example {
	background-size: 13px, 29px, 37px, 53px;
	margin: 1em;
	height: 15em;
	border: 1px solid;
	color: #333;
}

## index.htm
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Cicada CSS Background Examples</title>

	<link rel="stylesheet" href="cicada.css">
</head>
<body>
	<h1>Cicada + CSS Background Examples</h1>

	<p>
		Examples from <a href="http://forthedeveloper.com/2011/cicada-principle-with-css3/">For the Developer</a>.
	</p>

	<div class="example example1"><!-- --></div>
	<div class="example example2"><!-- --></div>
</body>
</html>
	.example1 {
	background-color: #efefef;
	background-image: -webkit-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(201,184,88,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(168,137,73,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
	background-image: -moz-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(201,184,88,.13) 50%), -moz-linear-gradient(0, rgba(168,137,73,.17) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
	background-image: -o-linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(201,184,88,.13) 50%), -o-linear-gradient(0, transparent 50%, rgba(168,137,73,.17) 50%), -o-linear-gradient(0, rgba(99,78,60,.19) 50%, transparent 50%);
	background-image: linear-gradient(0, rgba(222,213,108,.07) 50%, transparent 50%), linear-gradient(0, rgba(201,184,88,.13) 50%, transparent 50%), linear-gradient(0, rgba(168,137,73,.17) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(99,78,60,.19) 50%);
	}

	.example2 {
	background-color: #026873;
	background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
	}

	.example {
	background-size: 13px, 29px, 37px, 53px;
	margin: 1em;
	height: 15em;
	border: 1px solid;
	color: #333;
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Cicada CSS Background Examples</title>

	<link rel="stylesheet" href="cicada.css">
	</head>
	<body>
	<h1>Cicada + CSS Background Examples</h1>

	<p>
	Examples from <a href="http://forthedeveloper.com/2011/cicada-principle-with-css3/">For the Developer</a>.
	</p>

	<div class="example example1"><!-- --></div>
	<div class="example example2"><!-- --></div>
	</body>
	</html>