sydney/after-dark-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructured files. Improved README.

Browse Source
This commit is contained in:
Bryan Braun committed 2014-03-12 22:13:03 -04:00
1 parent df0cd9b87e
commit 513f33e808
19 files changed
+64 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.DS_Store
Vendored
BIN
View File
Binary file not shown.
README.markdown
+3 -1
View File
@@ -1,11 +1,13 @@
# After Dark in CSS
![After Dark Icon](img/after-dark-icon.png)
![Flying Toasters in CSS](img/flying-toasters-css.jpg)
Do you longingly reminisce about the days when flying toasters graced your screen? Do words like "Confetti Factory" and "Daredevil Dan" make your heart skip a beat?
If so, then never fear --- CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers.
The animations were made with CSS alone. No animated gifs or javascript.
### [See them here!](http://bryanbraun.github.io/after-dark-css/)
#### Browsers
base.css → all/base.css
+1 -1
View File
@@ -9,7 +9,7 @@
@font-face {
font-family: 'ChicagoFLF';
src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('../fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
}
html,
bouncing-ball.html → all/bouncing-ball.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Bouncing Ball | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
example.html → all/example.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Example | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
fade-out.html → all/fade-out.html
+2 -2
View File
@@ -3,11 +3,11 @@
<head>
<meta charset="UTF-8">
<title>Fade Out | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
body {
background: url(img/macos-desktop.png) no-repeat center center fixed;
background: url(../img/macos-desktop.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
fish.html → all/fish.html
+12 -12
View File
@@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Fish | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
body {
background-color: black;
background-image: url(img/seafloor.jpg);
background-image: url(../img/seafloor.jpg);
background-position: bottom;
background-repeat: repeat-x;
}
@@ -21,7 +21,7 @@
width: 50px;
height: 56px;
background-repeat: no-repeat;
background-image: url(img/bubbles_50.png);
background-image: url(../img/bubbles_50.png);
-webkit-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
-moz-animation: rise 13s linear infinite, reappear 39s steps(3) infinite, bubble-alt 0.2s steps(2) infinite;
-o-animation: rise 13s linear infinite, reappear 39s steps(3) linear infinite, bubble-alt 0.2s steps(2) infinite;
@@ -40,31 +40,31 @@
top: -50%;
}
.butterfly {
background-image: url(img/fish-butterfly.png);
background-image: url(../img/fish-butterfly.png);
}
.guppy {
background-image: url(img/fish-guppy.png);
background-image: url(../img/fish-guppy.png);
}
.seahorse {
background-image: url(img/fish-seahorse.png);
background-image: url(../img/fish-seahorse.png);
}
.jelly {
background-image: url(img/fish-jelly.png);
background-image: url(../img/fish-jelly.png);
}
.minnow {
background-image: url(img/fish-minnow.png);
background-image: url(../img/fish-minnow.png);
}
.red {
background-image: url(img/fish-red.png);
background-image: url(../img/fish-red.png);
}
.striped {
background-image: url(img/fish-striped.png);
background-image: url(../img/fish-striped.png);
}
.angel {
background-image: url(img/fish-angel.png);
background-image: url(../img/fish-angel.png);
}
.flounder {
background-image: url(img/fish-flounder.png);
background-image: url(../img/fish-flounder.png);
}
/**
flying-toasters.html → all/flying-toasters.html
+3 -3
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Flying Toasters | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
@@ -11,13 +11,13 @@
position: absolute;
width: 64px;
height: 64px;
background-image: url("img/toaster-sprite.gif");
background-image: url("../img/toaster-sprite.gif");
}
.toast {
position: absolute;
width: 64px;
height: 64px;
background-image: url("img/toast1.gif");
background-image: url("../img/toast1.gif");
}
/**
globe.html → all/globe.html
+2 -2
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Globe | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
@@ -18,7 +18,7 @@
height: 240px;
position: absolute;
background-color: black;
background-image: url(img/globe_240.jpg);
background-image: url(../img/globe_240.jpg);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
hard-rain.html → all/hard-rain.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Hard Rain | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/* shared raindrop attributes */
logo.html → all/logo.html
+2 -2
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Logo | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css" />
<style>
@@ -54,6 +54,6 @@
</head>
<body>
<h1 class="visuallyhidden">Logo Screensaver - After Dark in CSS</h1>
<img src="img/logo.png">
<img src="../img/logo.png">
</body>
</html>
messages.html → all/messages.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Messages | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/**
messages2.html → all/messages2.html
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Messages 2 | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
rainstorm.html → all/rainstorm.html
+7 -7
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Rainstorm | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
@@ -30,14 +30,14 @@
-moz-animation: fall 2.2s infinite linear;
-o-animation: fall 2.2s infinite linear;
animation: fall 2.2s infinite linear;
background: url(img/rain-tile-near.png) repeat;
background: url(../img/rain-tile-near.png) repeat;
}
.r2 {
-webkit-animation: fall 2.2s 1s infinite linear;
-moz-animation: fall 2.2s 1s infinite linear;
-o-animation: fall 2.2s 1s infinite linear;
animation: fall 2.2s 1s infinite linear;
background: url(img/rain-tile-near.png) repeat;
background: url(../img/rain-tile-near.png) repeat;
}
/* Two waves of mid-distant rain */
@@ -46,14 +46,14 @@
-moz-animation: fall 4s infinite linear;
-o-animation: fall 4s infinite linear;
animation: fall 4s infinite linear;
background: url(img/rain-tile-mid.png) repeat;
background: url(../img/rain-tile-mid.png) repeat;
}
.r4 {
-webkit-animation: fall 4.5s 3.2s infinite linear;
-moz-animation: fall 4.5s 3.2s infinite linear;
-o-animation: fall 4.5s 3.2s infinite linear;
animation: fall 4.5s 3.2s infinite linear;
background: url(img/rain-tile-mid.png) repeat;
background: url(../img/rain-tile-mid.png) repeat;
}
/* Two waves of distant rain */
@@ -62,14 +62,14 @@
-moz-animation: fall 6s infinite linear;
-o-animation: fall 6s infinite linear;
animation: fall 6s infinite linear;
background: url(img/rain-tile-distant.png) repeat;
background: url(../img/rain-tile-distant.png) repeat;
}
.r6 {
-webkit-animation: fall 6s 4s infinite linear;
-moz-animation: fall 6s 4s infinite linear;
-o-animation: fall 6s 4s infinite linear;
animation: fall 6s 4s infinite linear;
background: url(img/rain-tile-distant.png) repeat;
background: url(../img/rain-tile-distant.png) repeat;
}
/**
spotlight.html → all/spotlight.html
+3 -3
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Spotlight | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
/**
@@ -13,7 +13,7 @@
* me know!
*/
body {
background: url(img/macos-desktop.png) no-repeat center center fixed;
background: url(../img/macos-desktop.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
@@ -61,6 +61,6 @@
<body>
<h1 class="visuallyhidden">Spotlight Screensaver - After Dark in CSS</h1>
<!-- <b id="spotlight"></b> -->
<img class="spotlight" src="img/spotlight_bg.png" />
<img class="spotlight" src="../img/spotlight_bg.png" />
</body>
</html>
warp.html → all/warp.html
+10 -10
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Warp | After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css">
<style>
@@ -29,63 +29,63 @@
}
.stars:nth-child(1) {
background: url(img/stars1.png) no-repeat center center fixed;
background: url(../img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.stars:nth-child(2) {
background: url(img/stars2.png) no-repeat center center fixed;
background: url(../img/stars2.png) no-repeat center center fixed;
-webkit-animation-delay: 500ms;
-moz-animation-delay: 500ms;
-o-animation-delay: 500ms;
animation-delay: 500ms;
}
.stars:nth-child(3) {
background: url(img/stars3.png) no-repeat center center fixed;
background: url(../img/stars3.png) no-repeat center center fixed;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.stars:nth-child(4) {
background: url(img/stars4.png) no-repeat center center fixed;
background: url(../img/stars4.png) no-repeat center center fixed;
-webkit-animation-delay: 1500ms;
-moz-animation-delay: 1500ms;
-o-animation-delay: 1500ms;
animation-delay: 1500ms;
}
.stars:nth-child(5) {
background: url(img/stars1.png) no-repeat center center fixed;
background: url(../img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.stars:nth-child(6) {
background: url(img/stars2.png) no-repeat center center fixed;
background: url(../img/stars2.png) no-repeat center center fixed;
-webkit-animation-delay: 2500ms;
-moz-animation-delay: 2500ms;
-o-animation-delay: 2500ms;
animation-delay: 2500ms;
}
.stars:nth-child(7) {
background: url(img/stars3.png) no-repeat center center fixed;
background: url(../img/stars3.png) no-repeat center center fixed;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.stars:nth-child(8) {
background: url(img/stars4.png) no-repeat center center fixed;
background: url(../img/stars4.png) no-repeat center center fixed;
-webkit-animation-delay: 3500ms;
-moz-animation-delay: 3500ms;
-o-animation-delay: 3500ms;
animation-delay: 3500ms;
}
.stars:nth-child(9) {
background: url(img/stars1.png) no-repeat center center fixed;
background: url(../img/stars1.png) no-repeat center center fixed;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
img/.DS_Store
Vendored
BIN
View File
Binary file not shown.
img/flying-toasters-css.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

index.html
+14 -14
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>After Dark in CSS</title>
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="all/base.css">
<style>
html,
body {
@@ -201,23 +201,23 @@
<h1 class="title">After Dark in CSS</h1>
<div class="ad"><img src="img/after-dark-icon.png" /></div>
<ul>
<li><a class="s" href="flying-toasters.html">Flying Toasters</a></li>
<li><a class="s" href="fish.html">Fish</a></li>
<li><a class="s" href="globe.html">Globe</a></li>
<li><a href="hard-rain.html">Hard Rain</a></li>
<li><a class="s" href="bouncing-ball.html">Bouncing Ball</a></li>
<li><a class="s" href="warp.html">Warp</a></li>
<li><a class="s" href="messages.html">Messages</a></li>
<li><a class="s" href="messages2.html">Messages 2</a></li>
<li><a href="fade-out.html" class="s">Fade Out</a></li>
<li><a class="s" href="logo.html">Logo</a></li>
<li><a class="s" href="rainstorm.html">Rainstorm</a></li>
<li><a class="s" href="spotlight.html">Spotlight</a></li>
<li><a class="s" href="all/flying-toasters.html">Flying Toasters</a></li>
<li><a class="s" href="all/fish.html">Fish</a></li>
<li><a class="s" href="all/globe.html">Globe</a></li>
<li><a href="all/hard-rain.html">Hard Rain</a></li>
<li><a class="s" href="all/bouncing-ball.html">Bouncing Ball</a></li>
<li><a class="s" href="all/warp.html">Warp</a></li>
<li><a class="s" href="all/messages.html">Messages</a></li>
<li><a class="s" href="all/messages2.html">Messages 2</a></li>
<li><a href="all/fade-out.html" class="s">Fade Out</a></li>
<li><a class="s" href="all/logo.html">Logo</a></li>
<li><a class="s" href="all/rainstorm.html">Rainstorm</a></li>
<li><a class="s" href="all/spotlight.html">Spotlight</a></li>
<li><a id="randomizer" href="#">Randomizer</a></li>
</ul>
</div>
<footer class="footer">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="&quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Classic &quot;After Dark&quot; screensavers, rebuilt using CSS animations:" data-related="bryanebraun">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</footer>