Cicada + CSS Backgrounds
.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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment