/cicada.css
forked from Zoramite/cicada.css
Created Jun 9, 2011
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