Permalink
Browse files

Spooooky.

  • Loading branch information...
1 parent 0bebb33 commit 3e7df6c8aaf199acc4c25f0dbfd3b3f2a88e1a47 @Wilto committed Dec 23, 2012
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,11 @@
+body {
+ background: #a9b6c8;
+}
+
+h1 {
+ color: #eaf0f7;
+ text-shadow: 0 0 3px rgba(64,100,138,.3), 0 1px 4px #3b5c7f, 0 8px 18px rgba(64,100,138,.4);
+ -webkit-animation-name: turnonlights;
+ -webkit-animation-duration: 1.0s;
+ -webkit-animation-fill-mode: both;
+}
View
@@ -3,101 +3,135 @@ html {
}
body {
background: #ddd;
- background: rgba(240,100,100, 1);
+ background: rgba(200,100,100, 1);
position: absolute;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
+
+ -webkit-animation: csshk .25s linear;
+ -moz-animation: csshk .25s linear;
+ animation: csshk .25s linear;
}
body:after {
content: " ";
position: absolute;
- opacity: .85;
+ opacity: .75;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
- background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
- background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
- background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
- background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
- background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
+ background: url(_img/static.gif);
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .8) 100%), url(_img/static.gif);
+ background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 100%), url(_img/static.gif);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 100%), url(_img/static.gif);
+ background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 100%), url(_img/static.gif);
+ background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .8) 100%), url(_img/static.gif);
}
h1 {
color: #333;
- color: rgba(200,50,50,.3);
- text-shadow: 0 0 20px rgba(0,0,0,.5);
- z-index: 3;
- position: absolute;
- display: block;
- font: bold 13em/1 sans-serif;
- left: 50%;
- top: 13.5%;
- width: 100%;
- margin-left: -50%;
- height: 200px;
- text-align: center;
- -webkit-animation: blur 2s linear infinite, blink 4s ease infinite;
- -moz-animation: blur 2s linear infinite, blink 4s ease infinite;
- animation: blur 2s linear infinite, blink 4s ease infinite;
+ color: rgba(70,20,20,.35);
+ font-family: "Impact Label", sans-serif;
+ text-shadow: 0 0 20px rgba(50,0,0,.5);
+ -webkit-animation: blur 2s linear infinite, blink 5s ease infinite;
+ -moz-animation: blur 2s linear infinite, blink 5s ease infinite;
+ animation: blur 2s linear infinite, blink 5s ease infinite;
+}
+
+@media screen and (min-width: 40em) {
+ h1 {
+ color: transparent;
+ }
+}
+
+@-webkit-keyframes csshk {
+ 0% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 35% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 100% {
+ -webkit-transform: scale(1, 1);
+ }
+}
+@-moz-keyframes csshk {
+ 0% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 35% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 100% {
+ -webkit-transform: scale(1, 1);
+ }
+}
+@keyframes csshk {
+ 0% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 35% {
+ -webkit-transform: scale(1, .0035);
+ }
+ 100% {
+ -webkit-transform: scale(1, 1);
+ }
}
@-webkit-keyframes blur {
0% {
- color: transparent;
text-shadow: 0 0 30px rgba(20, 0, 0, .5);
}
33% {
- text-shadow: 0 0 10px rgba(15, 0, 0, .4);
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
}
- 36% {
- text-shadow: 0 0 10px rgba(25, 0, 0, .2);
+ 34% {
+ text-shadow: 0 0 5px rgba(25, 0, 0, .2);
}
66% {
- text-shadow: 0 0 20px rgba(15, 0, 0, .4);
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
}
100% {
- color: transparent;
text-shadow: 0 0 40px rgba(30, 0, 0, .8);
}
}
@-moz-keyframes blur {
0% {
color: transparent;
- text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+ text-shadow: 0 0 30px rgba(20, 0, 0, .5);
}
33% {
- text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
}
36% {
- text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ text-shadow: 0 0 10px rgba(25, 0, 0, .2);
}
66% {
- text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
}
100% {
color: transparent;
- text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+ text-shadow: 0 0 40px rgba(30, 0, 0, .8);
}
}
@keyframes blur {
0% {
color: transparent;
- text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+ text-shadow: 0 0 30px rgba(20, 0, 0, .5);
}
33% {
- text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
}
36% {
- text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ text-shadow: 0 0 10px rgba(25, 0, 0, .2);
}
66% {
- text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
}
100% {
color: transparent;
- text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+ text-shadow: 0 0 40px rgba(30, 0, 0, .8);
}
}
@-webkit-keyframes blink {
@@ -114,11 +148,11 @@ h1 {
opacity: 1;
-webkit-transform: skewX(0deg);
}
- 38% {
+ 37% {
opacity: .3;
-webkit-transform: skewX(90deg);
}
- 40% {
+ 39% {
opacity: 1;
-webkit-transform: skewX(0deg);
}
@@ -178,3 +212,13 @@ h1 {
-webkit-transform: skewX(0deg);
}
}
+
+@font-face {
+ font-family: 'Impact Label';
+ src: url('_fonts/impact_label_reversed-webfont.eot');
+ src: url('_fonts/impact_label_reversed-webfont.eot?#iefix') format('embedded-opentype'),
+ url('_fonts/impact_label_reversed-webfont.woff') format('woff'),
+ url('_fonts/impact_label_reversed-webfont.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
View
@@ -0,0 +1,43 @@
+body {
+ display: table;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ z-index: 1;
+}
+h1 {
+ display: block;
+ font: bold 13em/1 sans-serif;
+ text-align: center;
+ position: relative;
+ display: table-cell;
+ vertical-align: middle;
+ font: bold 5.5em/1 sans-serif;
+ left: 0;
+ top: 0;
+ text-align: center;
+ z-index: 3;
+ white-space: pre-wrap;
+}
+@media screen and (min-width: 25em) {
+ h1 {
+ font: bold 8em/1 sans-serif;
+ }
+}
+@media screen and (min-width: 35em) {
+ h1 {
+ font: bold 9.5em/1 sans-serif;
+ }
+}
+@media screen and (min-width: 40em) {
+ h1 {
+ font: bold 13em/1 sans-serif;
+ }
+}
+@media screen and (min-width: 60em) {
+ h1 {
+ font: bold 13em/1 sans-serif;
+ }
+}
View
@@ -10,9 +10,15 @@
<link href="css/_lib/normalize.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../js/_lib/respond.js"></script><!--<![endif]-->
+ <link rel="stylesheet" type="text/css" href="css/global.css">
+
<link rel="stylesheet" type="text/css" href="css/dead.css">
+ <!--<link rel="stylesheet" type="text/css" href="css/alive.css">-->
+
</head>
<body>
- <h1>HTML5 is <strong>DEAD</strong></h1>
+ <h1>HTML5
+is
+<strong>DEAD</strong></h1>
</body>
</html>

0 comments on commit 3e7df6c

Please sign in to comment.