Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Forked from LeaVerou/dabblet.css
Created January 26, 2012 16:11
Show Gist options
  • Save chriscoyier/1683535 to your computer and use it in GitHub Desktop.
Save chriscoyier/1683535 to your computer and use it in GitHub Desktop.
CSS3 demo: City by night
/**
* CSS3 demo: City by night
* Multiple backgrounds, basic linear gradients
*/
html, body {
height: 100%;
}
html {
background: linear-gradient(black, #444);
background-color: #222;
}
body {
background: url("http://e-steki.gr/nem/images/onenightchat/moon.png") no-repeat 100% 1em,
url("http://e-steki.gr/nem/images/onenightchat/stars.png") repeat-x 0 0,
url("http://e-steki.gr/nem/images/onenightchat/city.png") repeat-x bottom;
margin: 0;
}
section {
max-width: 25em;
margin: 0 auto;
padding-top: 100px;
color: white;
font: italic 100%/1.5 'Palatino Linotype', Georgia, serif;
}
<section>
<h1>City by night</h1>
<p>This is just some example content. Don’t even bother reading it, you will just waste your time.
Why do you keep reading? Do I have to use Lorem Ipsum to stop you from that?
Ok, here goes: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Still reading? Oh gosh, you’re impossible. I’ll stop here to save you from yourself.
</section>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment