Skip to content

Instantly share code, notes, and snippets.

@Zoramite

Zoramite/cicada.css

Created June 7, 2011 21:20
Show Gist options
  • Save Zoramite/1013197 to your computer and use it in GitHub Desktop.
Save Zoramite/1013197 to your computer and use it in GitHub Desktop.
Download ZIP
Cicada + CSS Backgrounds
Raw
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%);
}
.example3 {
background-color: rgba(189,198,102,.22);
background-image:
-webkit-linear-gradient(0, rgba(239,255,210,.13) 50%, transparent 50%),
-webkit-linear-gradient(0, rgba(189,198,102,.19) 50%, transparent 50%),
-webkit-linear-gradient(0, transparent 50%, rgba(35,139,124,.29) 50%),
-webkit-linear-gradient(0, transparent 50%, rgba(66,77,69,.43) 50%);
background-image:
-moz-linear-gradient(0, rgba(239,255,210,.13) 50%, transparent 50%),
-moz-linear-gradient(0, rgba(189,198,102,.19) 50%, transparent 50%),
-moz-linear-gradient(0, transparent 50%, rgba(35,139,124,.29) 50%),
-moz-linear-gradient(0, transparent 50%, rgba(66,77,69,.43) 50%);
background-image:
-o-linear-gradient(0, rgba(239,255,210,.13) 50%, transparent 50%),
-o-linear-gradient(0, rgba(189,198,102,.19) 50%, transparent 50%),
-o-linear-gradient(0, transparent 50%, rgba(35,139,124,.29) 50%),
-o-linear-gradient(0, transparent 50%, rgba(66,77,69,.43) 50%);
background-image:
linear-gradient(0, rgba(239,255,210,.13) 50%, transparent 50%),
linear-gradient(0, rgba(189,198,102,.19) 50%, transparent 50%),
linear-gradient(0, transparent 50%, rgba(35,139,124,.29) 50%),
linear-gradient(0, transparent 50%, rgba(66,77,69,.43) 50%);
}
.example {
background-size: 13px, 29px, 37px, 53px;
margin: 1em;
height: 15em;
border: 1px solid;
color: #333;
}
Raw
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>
<div class="example example3"><!-- --></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment