Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 4 commits
  • 8 files changed
  • 0 commit comments
  • 1 contributor
View
BIN css/_fonts/impact_label_reversed-webfont.eot
Binary file not shown.
View
BIN css/_fonts/impact_label_reversed-webfont.ttf
Binary file not shown.
View
BIN css/_fonts/impact_label_reversed-webfont.woff
Binary file not shown.
View
BIN css/_img/static.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11 css/alive.css
@@ -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
224 css/dead.css
@@ -0,0 +1,224 @@
+html {
+ background: #000;
+}
+body {
+ background: #ddd;
+ 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: .75;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ 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(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% {
+ text-shadow: 0 0 30px rgba(20, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
+ }
+ 34% {
+ text-shadow: 0 0 5px rgba(25, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
+ }
+ 100% {
+ text-shadow: 0 0 40px rgba(30, 0, 0, .8);
+ }
+}
+@-moz-keyframes blur {
+ 0% {
+ color: transparent;
+ text-shadow: 0 0 30px rgba(20, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
+ }
+ 36% {
+ text-shadow: 0 0 10px rgba(25, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
+ }
+ 100% {
+ color: transparent;
+ text-shadow: 0 0 40px rgba(30, 0, 0, .8);
+ }
+}
+@keyframes blur {
+ 0% {
+ color: transparent;
+ text-shadow: 0 0 30px rgba(20, 0, 0, .5);
+ }
+ 33% {
+ text-shadow: 0 0 10px rgba(25, 0, 0, .4);
+ }
+ 36% {
+ text-shadow: 0 0 10px rgba(25, 0, 0, .2);
+ }
+ 66% {
+ text-shadow: 0 0 20px rgba(20, 0, 0, .4);
+ }
+ 100% {
+ color: transparent;
+ text-shadow: 0 0 40px rgba(30, 0, 0, .8);
+ }
+}
+@-webkit-keyframes blink {
+ 0% {
+ -webkit-transform: skewX(0deg);
+ }
+ 20% {
+ -webkit-transform: skewX(0deg);
+ }
+ 21% {
+ -webkit-transform: skewX(-3deg);
+ }
+ 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);
+ }
+}
+@-moz-keyframes blink {
+ 0% {
+ -webkit-transform: skewX(0deg);
+ }
+ 20% {
+ -webkit-transform: skewX(0deg);
+ }
+ 21% {
+ -webkit-transform: skewX(-3deg);
+ }
+ 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(-3deg);
+ }
+ 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);
+ }
+}
+
+@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
43 css/global.css
@@ -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
11 index.html
@@ -7,11 +7,18 @@
<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/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>
</body>
</html>

No commit comments for this range

Something went wrong with that request. Please try again.