📱 Just randomly dropping in to make these look better on mobile devices.

This commit is contained in:
Bryan Braun committed 2019-11-20 21:26:24 -05:00
1 parent 513f33e808
commit 8b28529383
6 files changed
+165 -100

No files matched your search

+2 -1
View File
@@ -17,6 +17,7 @@ body {
background-color: #111; background-color: #111;
margin: 0; margin: 0;
height: 100%; height: 100%;
width: 100%;
font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif; font-family: 'ChicagoFLF', 'Times New Roman', 'Georgia', serif;
overflow: hidden; overflow: hidden;
} }
@@ -41,4 +42,4 @@ body {
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
+1
View File
@@ -12,6 +12,7 @@
background-image: url(../img/seafloor.jpg); background-image: url(../img/seafloor.jpg);
background-position: bottom; background-position: bottom;
background-repeat: repeat-x; background-repeat: repeat-x;
position: relative;
} }
.bubbles { .bubbles {
+45 -44
View File
@@ -3,10 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Flying Toasters | After Dark in CSS</title> <title>Flying Toasters | After Dark in CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.png" /> <link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="base.css">
<style> <style>
.toaster { .toaster {
position: absolute; position: absolute;
width: 64px; width: 64px;
@@ -19,18 +20,18 @@
height: 64px; height: 64px;
background-image: url("../img/toast1.gif"); background-image: url("../img/toast1.gif");
} }
/** /**
* Toaster Animations * Toaster Animations
* *
* There are several kinds of toaster animations, marked as t1, t2, & t3. * There are several kinds of toaster animations, marked as t1, t2, & t3.
* *
* T1 is fastest speed * T1 is fastest speed
* T2 is mid speed & flaps out of sequence with T1 * T2 is mid speed & flaps out of sequence with T1
* T3 is the common speed * T3 is the common speed
* T4 is a deleyd batch going at the fastest speed * T4 is a delayed batch going at the fastest speed
* T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed * T5, T6, T7, T8, & T9 are a delayed batch of toasters going at the common speed
*/ */
.t1 { .t1 {
-webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite; -webkit-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
-moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite; -moz-animation: flap .2s steps(4) infinite alternate, fly 10s linear infinite;
@@ -93,17 +94,17 @@
-ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite; -ms-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
-o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite; -o-animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite; animation: flap .2s steps(4) infinite alternate-reverse, fly 24s 20s linear infinite;
} }
/** /**
* Toast Animations * Toast Animations
* *
* There are several kinds of toaster animations, marked as ts1, ts2, & ts3. * There are several kinds of toaster animations, marked as ts1, ts2, & ts3.
* *
* Tst1 is fast * Tst1 is fast
* Tst2 is mid speed * Tst2 is mid speed
* Tst3 is the common speed * Tst3 is the common speed
* Tst4 is a delayed batch of toast going at the common speed * Tst4 is a delayed batch of toast going at the common speed
*/ */
.tst1 { .tst1 {
-webkit-animation: fly 10s linear infinite; -webkit-animation: fly 10s linear infinite;
-moz-animation: fly 10s linear infinite; -moz-animation: fly 10s linear infinite;
@@ -124,42 +125,42 @@
-ms-animation: fly 24s linear infinite; -ms-animation: fly 24s linear infinite;
-o-animation: fly 24s linear infinite; -o-animation: fly 24s linear infinite;
animation: fly 24s linear infinite; animation: fly 24s linear infinite;
} }
.tst4 { .tst4 {
-webkit-animation: fly 24s 12s linear infinite; -webkit-animation: fly 24s 12s linear infinite;
-moz-animation: fly 24s 12s linear infinite; -moz-animation: fly 24s 12s linear infinite;
-ms-animation: fly 24s 12s linear infinite; -ms-animation: fly 24s 12s linear infinite;
-o-animation: fly 24s 12s linear infinite; -o-animation: fly 24s 12s linear infinite;
animation: fly 24s 12s linear infinite; animation: fly 24s 12s linear infinite;
} }
/** /**
* Starting positions of objects (both toast & toasters). * Starting positions of objects (both toast & toasters).
* - There is a different position for each object to prevent overlapping. * - There is a different position for each object to prevent overlapping.
* - We use percentages in order to accomodate for all window dimensions. * - We use percentages in order to accommodate for all window dimensions.
* - Use -6% as the smallest amount for remaining off-screen. * - Use -6% as the smallest amount for remaining off-screen.
* - Organized into reverse "L" shaped batches to keep a constant flow. * - Organized into reverse "L" shaped batches to keep a constant flow.
*/ */
/* Batch 1 (-10% to -20%) */ /* Batch 1 (-10% to -20%) */
/* Top edge, from right to left */ /* Top edge, from right to left */
.p6 { right: -2%; top: -10%; } .p6 { right: -2%; top: -17%; }
.p7 { right: 10%; top: -12%; } .p7 { right: 10%; top: -19%; }
.p8 { right: 20%; top: -18%; } .p8 { right: 20%; top: -18%; }
.p9 { right: 30%; top: -13%; } .p9 { right: 30%; top: -20%; }
.p10 { right: 40%; top: -17%; } .p10 { right: 40%; top: -21%; }
.p11 { right: 50%; top: -11%; } .p11 { right: 50%; top: -18%; }
.p12 { right: 60%; top: -20%; } .p12 { right: 60%; top: -20%; }
/* Right side, from top to bottom */ /* Right side, from top to bottom */
.p13 { right: -10%; top: 10%; } .p13 { right: -17%; top: 10%; }
.p14 { right: -13%; top: 20%; } .p14 { right: -19%; top: 20%; }
.p15 { right: -17%; top: 30%; } .p15 { right: -21%; top: 30%; }
.p16 { right: -15%; top: 50%; } .p16 { right: -23%; top: 50%; }
.p17 { right: -20%; top: 70%; } .p17 { right: -25%; top: 70%; }
/* Batch 2 (-20% to -40%) */ /* Batch 2 (-20% to -40%) */
/* Top edge, from right to left */ /* Top edge, from right to left */
.p18 { right: 0%; top: -26%; } .p18 { right: 0%; top: -26%; }
.p19 { right: 10%; top: -20%; } .p19 { right: 10%; top: -20%; }
.p20 { right: 20%; top: -36%; } .p20 { right: 20%; top: -36%; }
.p21 { right: 30%; top: -24%; } .p21 { right: 30%; top: -24%; }
.p22 { right: 40%; top: -33%; } .p22 { right: 40%; top: -33%; }
@@ -168,7 +169,7 @@
.p24 { right: -26%; top: 10%; } .p24 { right: -26%; top: 10%; }
.p25 { right: -36%; top: 30%; } .p25 { right: -36%; top: 30%; }
.p26 { right: -29%; top: 50%; } .p26 { right: -29%; top: 50%; }
/* Batch 3 (-40% to -60%)*/ /* Batch 3 (-40% to -60%)*/
/* Top edge, from right to left */ /* Top edge, from right to left */
.p27 { right: 0; top: -46%; } .p27 { right: 0; top: -46%; }
@@ -179,7 +180,7 @@
.p31 { right: -46%; top: 10%; } .p31 { right: -46%; top: 10%; }
.p32 { right: -56%; top: 20%; } .p32 { right: -56%; top: 20%; }
.p33 { right: -49%; top: 30%; } .p33 { right: -49%; top: 30%; }
/* Flapping animation */ /* Flapping animation */
@-webkit-keyframes flap { @-webkit-keyframes flap {
from { background-position: 0px; } from { background-position: 0px; }
@@ -197,11 +198,11 @@
from { background-position: 0px; } from { background-position: 0px; }
to { background-position: -256px; } to { background-position: -256px; }
} }
/* Gliding animation using translate */ /* Gliding animation using translate */
/* Moving 1600px, to accomodate for large screens */ /* Moving 1600px, to accomodate for large screens */
@-webkit-keyframes fly { @-webkit-keyframes fly {
from { from {
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0); -moz-transform: translate(0, 0);
-o-transform: translate(0, 0); -o-transform: translate(0, 0);
@@ -217,7 +218,7 @@
} }
} }
@-moz-keyframes fly { @-moz-keyframes fly {
from { from {
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0); -moz-transform: translate(0, 0);
-o-transform: translate(0, 0); -o-transform: translate(0, 0);
@@ -233,7 +234,7 @@
} }
} }
@-o-keyframes fly { @-o-keyframes fly {
from { from {
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0); -moz-transform: translate(0, 0);
-o-transform: translate(0, 0); -o-transform: translate(0, 0);
@@ -249,7 +250,7 @@
} }
} }
@keyframes fly { @keyframes fly {
from { from {
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0); -moz-transform: translate(0, 0);
-o-transform: translate(0, 0); -o-transform: translate(0, 0);
@@ -264,13 +265,13 @@
transform: translate(-1600px, 1600px); transform: translate(-1600px, 1600px);
} }
} }
</style> </style>
</head> </head>
<body> <body>
<h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1> <h1 class="visuallyhidden">Flying Toasters - After Dark in CSS</h1>
<!-- First group of objects --> <!-- First group of objects -->
<div class="toaster t1 p6"></div> <div class="toaster t1 p6"></div>
<div class="toaster t3 p7"></div> <div class="toaster t3 p7"></div>
<div class="toast tst1 p8"></div> <div class="toast tst1 p8"></div>
@@ -285,7 +286,7 @@
<div class="toast tst3 p20"></div> <div class="toast tst3 p20"></div>
<div class="toaster t2 p21"></div> <div class="toaster t2 p21"></div>
<div class="toast tst1 p24"></div> <div class="toast tst1 p24"></div>
<div class="toaster t1 p22"></div> <div class="toaster t1 p22"></div>
<div class="toast tst2 p26"></div> <div class="toast tst2 p26"></div>
<div class="toaster t1 p28"></div> <div class="toaster t1 p28"></div>
<div class="toast tst2 p30"></div> <div class="toast tst2 p30"></div>
@@ -294,23 +295,23 @@
<div class="toast tst3 p33"></div> <div class="toast tst3 p33"></div>
<!-- wave 1 of (fast delayed) objects --> <!-- wave 1 of (fast delayed) objects -->
<div class="toaster t4 p27"></div> <div class="toaster t4 p27"></div>
<div class="toaster t4 p10"></div> <div class="toaster t4 p10"></div>
<div class="toaster t4 p25"></div> <div class="toaster t4 p25"></div>
<div class="toaster t4 p29"></div> <div class="toaster t4 p29"></div>
<!-- wave 2 of (delayed) objects --> <!-- wave 2 of (delayed) objects -->
<div class="toaster t5 p15"></div> <div class="toaster t5 p15"></div>
<div class="toaster t5 p18"></div> <div class="toaster t5 p18"></div>
<div class="toaster t5 p22"></div> <div class="toaster t5 p22"></div>
<!-- wave 3 of (delayed) objects --> <!-- wave 3 of (delayed) objects -->
<div class="toaster t6 p6"></div> <div class="toaster t6 p6"></div>
<div class="toaster t6 p11"></div> <div class="toaster t6 p11"></div>
<div class="toaster t6 p15"></div> <div class="toaster t6 p15"></div>
<div class="toaster t6 p19"></div> <div class="toaster t6 p19"></div>
<div class="toaster t6 p23"></div> <div class="toaster t6 p23"></div>
<!-- wave 5 of (delayed) objects --> <!-- wave 5 of (delayed) objects -->
<div class="toast tst4 p10"></div> <div class="toast tst4 p10"></div>
<div class="toast tst4 p23"></div> <div class="toast tst4 p23"></div>
@@ -326,12 +327,12 @@
<div class="toaster t8 p13"></div> <div class="toaster t8 p13"></div>
<div class="toaster t8 p17"></div> <div class="toaster t8 p17"></div>
<div class="toaster t8 p25"></div> <div class="toaster t8 p25"></div>
<!-- wave 7 of (delayed) objects --> <!-- wave 7 of (delayed) objects -->
<div class="toaster t9 p14"></div> <div class="toaster t9 p14"></div>
<div class="toaster t9 p18"></div> <div class="toaster t9 p18"></div>
<div class="toaster t9 p21"></div> <div class="toaster t9 p21"></div>
<div class="toaster t9 p26"></div> <div class="toaster t9 p26"></div>
</body> </body>
</html> </html>
+35 -30
View File
@@ -3,9 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hard Rain | After Dark in CSS</title> <title>Hard Rain | After Dark in CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.png" /> <link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="base.css">
<style> <style>
body {
position: relative;
}
/* shared raindrop attributes */ /* shared raindrop attributes */
.r { .r {
position: absolute; position: absolute;
@@ -14,7 +19,7 @@
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
} }
/** /**
* Animation timing * Animation timing
* Each one has a slightly later delay * Each one has a slightly later delay
@@ -199,51 +204,51 @@
-moz-animation: drip 4.5s ease-in-out infinite; -moz-animation: drip 4.5s ease-in-out infinite;
-o-animation: drip 4.5s ease-in-out infinite; -o-animation: drip 4.5s ease-in-out infinite;
animation: drip 4.5s ease-in-out infinite; animation: drip 4.5s ease-in-out infinite;
} }
/* positions */ /* positions */
/* row 1 */ /* row 1 */
.p0-1 { top: -2%; left: 5%; } .p0-1 { top: -2%; left: 5%; }
.p0-2 { top: -17%; left: 25%; } .p0-2 { top: -17%; left: 25%; }
.p0-3 { top: 4%; left: 45%; } .p0-3 { top: 4%; left: 45%; }
.p0-4 { top: -4%; left: 65%; } .p0-4 { top: -4%; left: 65%; }
.p0-5 { top: 1%; left: 85%; } .p0-5 { top: 1%; left: 85%; }
/* row 2 */ /* row 2 */
.p1-1 { top: 18%; left: 5%; } .p1-1 { top: 18%; left: 5%; }
.p1-2 { top: 7%; left: 25%; } .p1-2 { top: 7%; left: 25%; }
.p1-3 { top: 24%; left: 45%; } .p1-3 { top: 24%; left: 45%; }
.p1-4 { top: 16%; left: 65%; } .p1-4 { top: 16%; left: 65%; }
.p1-5 { top: 21%; left: 85%; } .p1-5 { top: 21%; left: 85%; }
/* row 3 */ /* row 3 */
.p2-1 { top: 38%; left: 15%; } .p2-1 { top: 38%; left: 15%; }
.p2-2 { top: 27%; left: 35%; } .p2-2 { top: 27%; left: 35%; }
.p2-3 { top: 44%; left: 55%; } .p2-3 { top: 44%; left: 55%; }
.p2-4 { top: 36%; left: 75%; } .p2-4 { top: 36%; left: 75%; }
.p2-5 { top: 41%; left: 95%; } .p2-5 { top: 41%; left: 95%; }
/* row 4 */ /* row 4 */
.p3-1 { top: 58%; left: 5%; } .p3-1 { top: 58%; left: 5%; }
.p3-2 { top: 47%; left: 25%; } .p3-2 { top: 47%; left: 25%; }
.p3-3 { top: 64%; left: 45%; } .p3-3 { top: 64%; left: 45%; }
.p3-4 { top: 56%; left: 65%; } .p3-4 { top: 56%; left: 65%; }
.p3-5 { top: 61%; left: 85%; } .p3-5 { top: 61%; left: 85%; }
/* row 5 */ /* row 5 */
.p4-1 { top: 78%; left: 15%; } .p4-1 { top: 78%; left: 15%; }
.p4-2 { top: 67%; left: 35%; } .p4-2 { top: 67%; left: 35%; }
.p4-3 { top: 84%; left: 55%; } .p4-3 { top: 84%; left: 55%; }
.p4-4 { top: 76%; left: 75%; } .p4-4 { top: 76%; left: 75%; }
.p4-5 { top: 81%; left: 95%; } .p4-5 { top: 81%; left: 95%; }
/* row 6 */ /* row 6 */
.p5-1 { top: 98%; left: 15%; } .p5-1 { top: 98%; left: 15%; }
.p5-2 { top: 87%; left: 35%; } .p5-2 { top: 87%; left: 35%; }
.p5-3 { top: 104%; left: 55%; } .p5-3 { top: 104%; left: 55%; }
.p5-4 { top: 96%; left: 75%; } .p5-4 { top: 96%; left: 75%; }
.p5-5 { top: 101%; left: 95%; } .p5-5 { top: 101%; left: 95%; }
/* sizes (smallest to largest) */ /* sizes (smallest to largest) */
.s140 { .s140 {
/** /**
@@ -252,29 +257,29 @@
*/ */
margin: -70px 0 0 -70px; margin: -70px 0 0 -70px;
width: 140px; width: 140px;
height: 140px; height: 140px;
} }
.s200 { .s200 {
margin: -100px 0 0 -100px; margin: -100px 0 0 -100px;
width: 200px; width: 200px;
height: 200px; height: 200px;
} }
.s250 { .s250 {
margin: -125px 0 0 -125px; margin: -125px 0 0 -125px;
width: 250px; width: 250px;
height: 250px; height: 250px;
} }
.s300 { .s300 {
margin: -150px 0 0 -150px; margin: -150px 0 0 -150px;
width: 300px; width: 300px;
height: 300px; height: 300px;
} }
.s350 { .s350 {
margin: -175px 0 0 -175px; margin: -175px 0 0 -175px;
width: 350px; width: 350px;
height: 350px; height: 350px;
} }
/* colors (pulled from screenshots) */ /* colors (pulled from screenshots) */
.dkblue { border-color: #00006e; } .dkblue { border-color: #00006e; }
.lime { border-color: #c8d354; } .lime { border-color: #c8d354; }
@@ -284,7 +289,7 @@
.pink { border-color: #9a3368; } .pink { border-color: #9a3368; }
.yellow { border-color: #efda1d; } .yellow { border-color: #efda1d; }
.green { border-color: #397132; } .green { border-color: #397132; }
/** /**
* Keyframes * Keyframes
* They are kind of wordy, but that allows them to be used * They are kind of wordy, but that allows them to be used
@@ -376,42 +381,42 @@
<div class="r t17 p0-3 s140 ltgray"></div> <div class="r t17 p0-3 s140 ltgray"></div>
<div class="r t11 p0-4 s300 red"></div> <div class="r t11 p0-4 s300 red"></div>
<div class="r t14 p0-5 s250 ltblue"></div> <div class="r t14 p0-5 s250 ltblue"></div>
<!-- row 2 --> <!-- row 2 -->
<div class="r t29 p1-1 s350 pink"></div> <div class="r t29 p1-1 s350 pink"></div>
<div class="r t18 p1-2 s300 yellow"></div> <div class="r t18 p1-2 s300 yellow"></div>
<div class="r t30 p1-3 s140 green"></div> <div class="r t30 p1-3 s140 green"></div>
<div class="r t12 p1-4 s200 ltgray"></div> <div class="r t12 p1-4 s200 ltgray"></div>
<div class="r t27 p1-5 s250 dkblue"></div> <div class="r t27 p1-5 s250 dkblue"></div>
<!-- row 3 --> <!-- row 3 -->
<div class="r t10 p2-1 s140 pink"></div> <div class="r t10 p2-1 s140 pink"></div>
<div class="r t4 p2-2 s200 red"></div> <div class="r t4 p2-2 s200 red"></div>
<div class="r t8 p2-3 s300 ltblue"></div> <div class="r t8 p2-3 s300 ltblue"></div>
<div class="r t22 p2-4 s350 yellow"></div> <div class="r t22 p2-4 s350 yellow"></div>
<div class="r t1 p2-5 s250 lime"></div> <div class="r t1 p2-5 s250 lime"></div>
<!-- row 4 --> <!-- row 4 -->
<div class="r t3 p3-1 s300 green"></div> <div class="r t3 p3-1 s300 green"></div>
<div class="r t6 p3-2 s250 dkblue"></div> <div class="r t6 p3-2 s250 dkblue"></div>
<div class="r t15 p3-3 s350 ltgray"></div> <div class="r t15 p3-3 s350 ltgray"></div>
<div class="r t24 p3-4 s140 pink"></div> <div class="r t24 p3-4 s140 pink"></div>
<div class="r t21 p3-5 s200 ltblue"></div> <div class="r t21 p3-5 s200 ltblue"></div>
<!-- row 5 --> <!-- row 5 -->
<div class="r t13 p4-1 s250 yellow"></div> <div class="r t13 p4-1 s250 yellow"></div>
<div class="r t28 p4-2 s140 red"></div> <div class="r t28 p4-2 s140 red"></div>
<div class="r t2 p4-3 s200 ltgray"></div> <div class="r t2 p4-3 s200 ltgray"></div>
<div class="r t19 p4-4 s300 green"></div> <div class="r t19 p4-4 s300 green"></div>
<div class="r t25 p4-5 s350 lime"></div> <div class="r t25 p4-5 s350 lime"></div>
<!-- row 6 --> <!-- row 6 -->
<div class="r t5 p5-1 s350 dkblue"></div> <div class="r t5 p5-1 s350 dkblue"></div>
<div class="r t26 p5-2 s300 pink"></div> <div class="r t26 p5-2 s300 pink"></div>
<div class="r t20 p5-3 s140 ltblue"></div> <div class="r t20 p5-3 s140 ltblue"></div>
<div class="r t16 p5-4 s250 yellow"></div> <div class="r t16 p5-4 s250 yellow"></div>
<div class="r t9 p5-5 s200 ltgray"></div> <div class="r t9 p5-5 s200 ltgray"></div>
<!-- batch 2 (out of sequence) --> <!-- batch 2 (out of sequence) -->
<!-- row 1 --> <!-- row 1 -->
<div class="r t22 p0-1 s200 dkblue"></div> <div class="r t22 p0-1 s200 dkblue"></div>
@@ -419,35 +424,35 @@
<div class="r t2 p0-3 s140 ltgray"></div> <div class="r t2 p0-3 s140 ltgray"></div>
<div class="r t26 p0-4 s300 red"></div> <div class="r t26 p0-4 s300 red"></div>
<div class="r t29 p0-5 s250 ltblue"></div> <div class="r t29 p0-5 s250 ltblue"></div>
<!-- row 2 --> <!-- row 2 -->
<div class="r t14 p1-1 s350 pink"></div> <div class="r t14 p1-1 s350 pink"></div>
<div class="r t3 p1-2 s300 yellow"></div> <div class="r t3 p1-2 s300 yellow"></div>
<div class="r t15 p1-3 s140 green"></div> <div class="r t15 p1-3 s140 green"></div>
<div class="r t27 p1-4 s200 ltgray"></div> <div class="r t27 p1-4 s200 ltgray"></div>
<div class="r t12 p1-5 s250 dkblue"></div> <div class="r t12 p1-5 s250 dkblue"></div>
<!-- row 3 --> <!-- row 3 -->
<div class="r t25 p2-1 s140 pink"></div> <div class="r t25 p2-1 s140 pink"></div>
<div class="r t19 p2-2 s200 red"></div> <div class="r t19 p2-2 s200 red"></div>
<div class="r t23 p2-3 s300 ltblue"></div> <div class="r t23 p2-3 s300 ltblue"></div>
<div class="r t7 p2-4 s350 yellow"></div> <div class="r t7 p2-4 s350 yellow"></div>
<div class="r t16 p2-5 s250 lime"></div> <div class="r t16 p2-5 s250 lime"></div>
<!-- row 4 --> <!-- row 4 -->
<div class="r t18 p3-1 s300 green"></div> <div class="r t18 p3-1 s300 green"></div>
<div class="r t21 p3-2 s250 dkblue"></div> <div class="r t21 p3-2 s250 dkblue"></div>
<div class="r t30 p3-3 s350 ltgray"></div> <div class="r t30 p3-3 s350 ltgray"></div>
<div class="r t9 p3-4 s140 pink"></div> <div class="r t9 p3-4 s140 pink"></div>
<div class="r t6 p3-5 s200 ltblue"></div> <div class="r t6 p3-5 s200 ltblue"></div>
<!-- row 5 --> <!-- row 5 -->
<div class="r t28 p4-1 s250 yellow"></div> <div class="r t28 p4-1 s250 yellow"></div>
<div class="r t13 p4-2 s140 red"></div> <div class="r t13 p4-2 s140 red"></div>
<div class="r t17 p4-3 s200 ltgray"></div> <div class="r t17 p4-3 s200 ltgray"></div>
<div class="r t4 p4-4 s300 green"></div> <div class="r t4 p4-4 s300 green"></div>
<div class="r t10 p4-5 s350 lime"></div> <div class="r t10 p4-5 s350 lime"></div>
<!-- row 6 --> <!-- row 6 -->
<div class="r t20 p5-1 s350 dkblue"></div> <div class="r t20 p5-1 s350 dkblue"></div>
<div class="r t11 p5-2 s300 pink"></div> <div class="r t11 p5-2 s300 pink"></div>
+4 -2
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Spotlight | After Dark in CSS</title> <title>Spotlight | After Dark in CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.png" /> <link rel="shortcut icon" href="../img/favicon.png" />
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="base.css">
<style> <style>
@@ -13,13 +14,14 @@
* me know! * me know!
*/ */
body { 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; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
-o-background-size: cover; -o-background-size: cover;
background-size: cover; background-size: cover;
position: relative;
} }
/* ball styling */ /* ball styling */
.spotlight { .spotlight {
position: absolute; position: absolute;
+78 -23
View File
@@ -1,8 +1,10 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>After Dark in CSS</title> <title>After Dark in CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.png" /> <link rel="shortcut icon" href="img/favicon.png" />
<link rel="stylesheet" href="all/base.css"> <link rel="stylesheet" href="all/base.css">
<style> <style>
@@ -10,9 +12,11 @@
body { body {
background-color: #929292; background-color: #929292;
} }
a { a {
color: black; color: black;
} }
.content { .content {
position: relative; position: relative;
z-index: 2; z-index: 2;
@@ -22,6 +26,7 @@
background: #fff; background: #fff;
box-shadow: 1px 1px #111; box-shadow: 1px 1px #111;
} }
.title { .title {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
@@ -32,6 +37,7 @@
background-color: #f0f0f0; background-color: #f0f0f0;
box-shadow: inset 1px -3px 0px -2px #a8a9b6; box-shadow: inset 1px -3px 0px -2px #a8a9b6;
} }
.title:before { .title:before {
height: 11px; height: 11px;
width: 64px; width: 64px;
@@ -40,6 +46,7 @@
background: url(img/lines.png) repeat; background: url(img/lines.png) repeat;
margin-right: 8px; margin-right: 8px;
} }
.title:after { .title:after {
height: 11px; height: 11px;
width: 64px; width: 64px;
@@ -48,16 +55,19 @@
background: url(img/lines.png) repeat; background: url(img/lines.png) repeat;
margin-left: 8px; margin-left: 8px;
} }
.content .ad { .content .ad {
text-align: center; text-align: center;
margin: 1em 0; margin: 1em 0;
} }
.content ul { .content ul {
list-style-type: none; list-style-type: none;
margin: 2px 0 2em 0; margin: 2px 0 2em 0;
padding: 0 0 0 2em; padding: 0 0 0 2em;
font-size: 12px; font-size: 12px;
} }
.footer { .footer {
width: 400px; width: 400px;
text-align: center; text-align: center;
@@ -75,8 +85,9 @@
border-left: 1px solid #38394a; border-left: 1px solid #38394a;
box-shadow: 0 0 0px 1px #f0f0f0; box-shadow: 0 0 0px 1px #f0f0f0;
} }
.closebox-innr { .closebox-innr {
display: block; display: block;
height: 8px; height: 8px;
width: 8px; width: 8px;
background-color: #a2a5ae; background-color: #a2a5ae;
@@ -84,9 +95,11 @@
border-right: 1px solid #38394a; border-right: 1px solid #38394a;
text-indent: -99999em; text-indent: -99999em;
} }
.closebox-innr:hover { .closebox-innr:hover {
background-color: #ccc; background-color: #ccc;
} }
.maxbox { .maxbox {
position: absolute; position: absolute;
top: 3px; top: 3px;
@@ -97,6 +110,7 @@
border-left: 1px solid #38394a; border-left: 1px solid #38394a;
box-shadow: 0 0 0px 1px #f0f0f0; box-shadow: 0 0 0px 1px #f0f0f0;
} }
.maxbox-innr { .maxbox-innr {
height: 8px; height: 8px;
width: 8px; width: 8px;
@@ -104,6 +118,7 @@
border-bottom: 1px solid #38394a; border-bottom: 1px solid #38394a;
border-right: 1px solid #38394a; border-right: 1px solid #38394a;
} }
.maxbox-innr:before { .maxbox-innr:before {
height: 5px; height: 5px;
width: 5px; width: 5px;
@@ -125,37 +140,67 @@
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
.toaster { .toaster {
width: 64px; width: 64px;
height: 64px; height: 64px;
margin: 0 auto 2em; margin: 0 auto 2em;
background-image: url("img/toaster-sprite.gif"); background-image: url("img/toaster-sprite.gif");
-webkit-animation: flap .2s steps(4) infinite alternate; -webkit-animation: flap .2s steps(4) infinite alternate;
-moz-animation: flap .2s steps(4) infinite alternate; -moz-animation: flap .2s steps(4) infinite alternate;
-o-animation: flap .2s steps(4) infinite alternate; -o-animation: flap .2s steps(4) infinite alternate;
animation: flap .2s steps(4) infinite alternate; animation: flap .2s steps(4) infinite alternate;
} }
/* Flapping animation */ /* Flapping animation */
@-webkit-keyframes flap { @-webkit-keyframes flap {
from { background-position: 0px; } from {
to { background-position: -256px; } background-position: 0px;
}
to {
background-position: -256px;
}
} }
@-moz-keyframes flap { @-moz-keyframes flap {
from { background-position: 0px; } from {
to { background-position: -256px; } background-position: 0px;
}
to {
background-position: -256px;
}
} }
@-ms-keyframes flap { @-ms-keyframes flap {
from { background-position: 0px; } from {
to { background-position: -256px; } background-position: 0px;
}
to {
background-position: -256px;
}
} }
@-o-keyframes flap { @-o-keyframes flap {
from { background-position: 0px; } from {
to { background-position: -256px; } background-position: 0px;
}
to {
background-position: -256px;
}
} }
@keyframes flap { @keyframes flap {
from { background-position: 0px; } from {
to { background-position: -256px; } background-position: 0px;
}
to {
background-position: -256px;
}
} }
</style> </style>
<script> <script>
@@ -173,7 +218,7 @@
/* Build a list of href's */ /* Build a list of href's */
var choices = Array(); var choices = Array();
var elements = document.querySelectorAll('.s'); var elements = document.querySelectorAll('.s');
Array.prototype.forEach.call(elements, function(el, i){ Array.prototype.forEach.call(elements, function (el, i) {
choices.push(el.getAttribute('href')); choices.push(el.getAttribute('href'));
}); });
@@ -193,11 +238,17 @@
} }
</script> </script>
</head> </head>
<body> <body>
<a href="https://github.com/bryanbraun/after-dark-css"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> <a href="https://github.com/bryanbraun/after-dark-css"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://github-camo.global.ssl.fastly.net/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div id="content" class="content"> <div id="content" class="content">
<div class="closebox"><a class="closebox-innr" id="x" href="#">Close</a></div> <div class="closebox"><a class="closebox-innr" id="x" href="#">Close</a></div>
<div class="maxbox"><div class="maxbox-innr"></div></div> <div class="maxbox">
<div class="maxbox-innr"></div>
</div>
<h1 class="title">After Dark in CSS</h1> <h1 class="title">After Dark in CSS</h1>
<div class="ad"><img src="img/after-dark-icon.png" /></div> <div class="ad"><img src="img/after-dark-icon.png" /></div>
<ul> <ul>
@@ -217,13 +268,17 @@
</ul> </ul>
</div> </div>
<footer class="footer"> <footer class="footer">
<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> <a href="https://twitter.com/share" class="twitter-share-button"
<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> 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> </footer>
<div class="behind"> <div class="behind">
<a href="http://codepen.io/bryanbraun/pen/bojpu" class="clearfix"><div class="toaster"></div></a> <a href="http://codepen.io/bryanbraun/pen/bojpu" class="clearfix">
<div class="toaster"></div>
</a>
<p>Made by <a href="http://bryanbraun.com">Bryan</a></p> <p>Made by <a href="http://bryanbraun.com">Bryan</a></p>
</div> </div>
</body> </body>
</html>
</html>