Paul Irish and Divya Manian have created a fun visualization on readiness of HTML5 and CSS3 standards in various browsers.
It uses a bunch of the usual CSS cool-suspects: -webkit-gradient, -webkit-transition, -webkit-border-radius, and the like (and -moz/-o too).
The added feature is.... do a mouse scroll on the page:
JAVASCRIPT:
-
-
jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
-
var newval,
-
num = $('div.css-chart p').css('padding-left');
-
-
delta = delta || e.detail || e.wheelDelta;
-
-
if (delta> 0 || e.which == 38) {
-
newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
-
} else if (delta <0 || e.which == 40) {
-
newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
-
} else {
-
return true;
-
}
-
-
$('style.padleft').remove();
-
$('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; }')
-
.appendTo(document.body);
-
-
e.preventDefault();
-
-
})
-