Adding fallback warning to title slide.

Author: rupl

css/main.css

@@ -817,7 +817,7 @@ span.active {
   bottom: 32%;
   right: 19%;
 }
-#s1 h2 span {
+.csstransforms3d #s1 h2 span {
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
   -ms-transition: 0.6s;
@@ -834,6 +834,17 @@ span.active {
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
 }
+#s1 .warning {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  color: #a00;
+  text-align: center;
+  background: url('/img/bad-time.jpg?1359756760') no-repeat 10% 70%;
+}
+.no-csstransforms3d #s1 .warning.active {
+  opacity: 1;
+}
 
 /*
  * Slide 2: Our friend, the DOM Element

img/bad-time.jpg

@@ -36,6 +36,10 @@ <h1>
           </h1>
           <h2><span>Exploring CSS 3D Transforms</span></h2>
 
+          <div class="warning">
+            <p>Darn, your browser seems unable to display 3D Transforms.</p>
+          </div>
+
         </article>
         <article id="s2">
 

index.html

@@ -16,6 +16,7 @@
       "$('.ox, .m', '#s1').toggleClass('active'); ",
       "$('.odel', '#s1').toggleClass('active'); ",
       "$('h2 span', '#s1').toggleClass('active'); ",
+      "$('.no-csstransforms3d #s1 .warning').toggleClass('active'); ",
 
       // Slide 2
       "scrollTo('#s2');",
@@ -131,6 +132,7 @@
       "$('.ox, .m', '#s1').toggleClass('active'); ",
       "$('.odel', '#s1').toggleClass('active'); ",
       "$('h2 span', '#s1').toggleClass('active'); ",
+      "$('.no-csstransforms3d #s1 .warning').toggleClass('active'); ",
 
       // Slide 2
       "scrollTo('#s1');",

js/main.js

@@ -45,17 +45,32 @@
     }
   }
 
-  // "Exploring CSS 3D Transforms"
+  // Exploring CSS 3D Transforms
   h2 {
     font-size: 3em / $slide-font-size;
     position: absolute;
     bottom: 32%;
     right: 19%;
 
-    span {
+    .csstransforms3d & span {
       @include transition(.6s);
       @include transform(rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em));
       @include transform-style(preserve-3d);
     }
   }
+
+  // This warning is for browsers that don't support 3D transforms
+  .warning {
+    opacity: 0; // hidden by default
+    width: 100%;
+    height: 100%;
+    color: #a00;
+    text-align: center;
+    background: image-url('bad-time.jpg') no-repeat 10% 70%;
+  }
+
+  // Show warning for browsers that fail Modernizr test
+  .no-csstransforms3d & .warning.active {
+    opacity: 1;
+  }
 }