<h2 id="reflection">CSS Reflections</h2>
/*
* Modernizr Example - Javascript Detection
* 
* Cases:
* - support reflections -> add reflections (works only in webkit browsers (Chrome, Safari, Opera)).
* - don't support reflections -> add text-shadow (IE 8 & 9 don't support it).
*/



/* GENERAL STYLES */

* {
  padding: 0;
  margin: 0;
}

body {
  font: 100%/1 Helvetica, Arial, sans-serif;
  margin: 50px auto 0;
  text-align: center;
  background-color: #2a3744;
}

h2 {
  color: #c0ccdb;
  font-size: 3em;
}


/* MODERNIZR STYLES */
  
  .reflection {
    -webkit-box-reflect: below -.45em -webkit-gradient(linear, left top, left bottom,  from(transparent), color-stop(0%, transparent), to(rgba(255, 255, 255, 0.75)));
  }
  
    /*text-shadow based on 3D Text: http://markdotto.com/playground/3d-text*/  
  .no-reflection {
    text-shadow: 0 1px 0 #136ed1,
      0 2px 0 #126ac9,
      0 3px 0 #1160b6,
      0 4px 0 #105cad,
      0 5px 0 #0f56a2,
      0 6px 1px rgba(0,0,0,.1),
      0 0 5px rgba(0,0,0,.1),
      0 1px 3px rgba(0,0,0,.3),
      0 3px 5px rgba(0,0,0,.2),
      0 5px 10px rgba(0,0,0,.25),
      0 10px 10px rgba(0,0,0,.2),
      0 20px 20px rgba(0,0,0,.15);
  }
window.onload = function () {
  
  var element = document.getElementById('reflection');
  if (Modernizr.cssreflections) {
    element.className = 'reflection';
  } else {
    element.className = 'no-reflection'
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.