<h2 id="reflection">CSS Reflections</h2>
/*
* Feature Queries - Javascript Detection (Example-2)
*
* Cases:
* - support FQ and (reflections and text-stroke) -> add reflections and text-stroke (works only in some webkit browsers (Chrome, Opera)).
* - support FQ and not (reflections and text-stroke) -> 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;
}
/* FQ 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)));
-webkit-text-stroke: 1px tomato;
}
/*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 result = CSS.supports('(-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)))) and (-webkit-text-stroke: 1px tomato)');
var element = document.getElementById('reflection');
if(result) {
element.className = 'reflection';
} else {
element.className = 'no-reflection';
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.