Skip to content
Browse files

First, the bad news.

  • Loading branch information...
1 parent 8f685f2 commit 2147fc0816ca03e264f5934a6b9c7a066afb481f @Wilto committed
Showing with 245 additions and 1 deletion.
  1. +189 −0 css/dead.css
  2. +56 −1 index.html
View
189 css/dead.css
@@ -0,0 +1,189 @@
+html {
+ background: #000;
+}
+body {
+ background: #ddd;
+ background: rgba(255,110,110, .8);
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+}
+body:after {
+ content: " ";
+ position: absolute;
+ 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%);
+ 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%);
+ 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%);
+ background: -o-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+ 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%);
+}
+canvas {
+ z-index: 1;
+ position: absolute;
+ opacity: .8;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+
+h1 {
+ color: #333;
+ color: rgba(50,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 3s ease infinite;
+ -moz-animation: blur 2s linear infinite, blink 3s ease infinite;
+ animation: blur 2s linear infinite, blink 3s ease infinite;
+}
+@-webkit-keyframes blur {
+ 0% {
+ color: transparent;
+ text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+ }
+ 36% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+ }
+ 100% {
+ color: transparent;
+ text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+ }
+}
+@-moz-keyframes blur {
+ 0% {
+ color: transparent;
+ text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+ }
+ 36% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+ }
+ 100% {
+ color: transparent;
+ text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+ }
+}
+@keyframes blur {
+ 0% {
+ color: transparent;
+ text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+ }
+ 36% {
+ text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+ }
+ 100% {
+ color: transparent;
+ text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+ }
+}
+@-webkit-keyframes blink {
+ 0% {
+ -webkit-transform: skewX(0deg);
+ }
+ 20% {
+ -webkit-transform: skewX(0deg);
+ }
+ 21% {
+ -webkit-transform: skewX(-1deg);
+ }
+ 35% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 38% {
+ opacity: .3;
+ -webkit-transform: skewX(90deg);
+ }
+ 40% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 100% {
+ -webkit-transform: skewX(0deg);
+ }
+}
+@-moz-keyframes blink {
+ 0% {
+ -webkit-transform: skewX(0deg);
+ }
+ 20% {
+ -webkit-transform: skewX(0deg);
+ }
+ 21% {
+ -webkit-transform: skewX(-1deg);
+ }
+ 35% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 37% {
+ opacity: .3;
+ -webkit-transform: skewX(90deg);
+ }
+ 39% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 100% {
+ -webkit-transform: skewX(0deg);
+ }
+}
+@keyframes blink {
+ 0% {
+ -webkit-transform: skewX(0deg);
+ }
+ 20% {
+ -webkit-transform: skewX(0deg);
+ }
+ 21% {
+ -webkit-transform: skewX(-1deg);
+ }
+ 35% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 37% {
+ opacity: .3;
+ -webkit-transform: skewX(90deg);
+ }
+ 39% {
+ opacity: 1;
+ -webkit-transform: skewX(0deg);
+ }
+ 100% {
+ -webkit-transform: skewX(0deg);
+ }
+}
View
57 index.html
@@ -7,11 +7,66 @@
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="../css/_lib/normalize.css" rel="stylesheet">
+ <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/dead.css">
</head>
<body>
+ <h1>HTML5 is <strong>DEAD</strong></h1>
+ <canvas></canvas>
+ <script type="text/javascript">
+ // Adapted from http://codepen.io/moklick/pen/zKleC
+
+ var psssh = ( function () {
+ var canvas,
+ WIDTH,
+ HEIGHT,
+ screens = [],
+ ctx,
+ init = function () {
+ var canvas = document.getElementsByTagName( "canvas" )[ 0 ];
+
+ canvas.width = WIDTH = 700;
+ canvas.height = HEIGHT = 700;
+
+ ctx = canvas.getContext( "2d" );
+ ctx.fillRect( 0, 0, WIDTH, HEIGHT );
+
+ makeScreens();
+ },
+ makeScreens = function() {
+ for ( var i = 0; i < 4; i++ ) {
+ var imgData = ctx.getImageData( 0, 0, WIDTH, HEIGHT ),
+ pix = imgData.data;
+
+ for ( var p = 0, pl = pix.length; p < pl; p += 4 ) {
+ var color = ( Math.random() * 255 ) + 40;
+
+ pix[ p ] = color;
+ pix[ p + 1 ] = color;
+ pix[ p + 2 ] = color;
+ }
+ ctx.putImageData( imgData, 0, 0);
+ screens.push( imgData );
+ }
+
+ var j = 0;
+ setInterval( function() {
+ j = ( j == 3 ) ? 0 : j + 1;
+ ctx.putImageData( screens[ j ], 0, 0);
+ }, 150 );
+
+ return screens;
+ };
+
+ return {
+ init: init
+ };
+ }());
+
+ psssh.init();
+ </script>
</body>
</html>

0 comments on commit 2147fc0

Please sign in to comment.
Something went wrong with that request. Please try again.