Permalink
Browse files

Canvas is for chumps.

  • Loading branch information...
1 parent 57d82bc commit 0bebb3380cb4680a4021f1dde7bc1f56e6e7c0e2 @Wilto committed Dec 23, 2012
Showing with 19 additions and 82 deletions.
  1. +19 −28 css/dead.css
  2. +0 −54 index.html
View
@@ -3,7 +3,7 @@ html {
}
body {
background: #ddd;
- background: rgba(255,110,110, .8);
+ background: rgba(240,100,100, 1);
position: absolute;
height: 100%;
width: 100%;
@@ -13,30 +13,21 @@ body {
body:after {
content: " ";
position: absolute;
+ opacity: .85;
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%);
+ 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);
}
-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);
+ color: rgba(200,50,50,.3);
text-shadow: 0 0 20px rgba(0,0,0,.5);
z-index: 3;
position: absolute;
@@ -48,27 +39,27 @@ h1 {
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-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;
}
@-webkit-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(15, 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(15, 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);
}
}
@-moz-keyframes blur {
@@ -117,7 +108,7 @@ h1 {
-webkit-transform: skewX(0deg);
}
21% {
- -webkit-transform: skewX(-1deg);
+ -webkit-transform: skewX(-3deg);
}
35% {
opacity: 1;
@@ -143,7 +134,7 @@ h1 {
-webkit-transform: skewX(0deg);
}
21% {
- -webkit-transform: skewX(-1deg);
+ -webkit-transform: skewX(-3deg);
}
35% {
opacity: 1;
@@ -169,7 +160,7 @@ h1 {
-webkit-transform: skewX(0deg);
}
21% {
- -webkit-transform: skewX(-1deg);
+ -webkit-transform: skewX(-3deg);
}
35% {
opacity: 1;
View
@@ -14,59 +14,5 @@
</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 = 400;
- canvas.height = HEIGHT = 400;
-
- 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);
- }, 30 );
-
- return screens;
- };
-
- return {
- init: init
- };
- }());
-
- psssh.init();
- </script>
</body>
</html>

0 comments on commit 0bebb33

Please sign in to comment.