Logos drawn with CSS3 canvas. No javascript or images used,
Source: http://www.ecsspert.com/atari.php

One-page horizontal scrolling site with layering, easing, bounce and clever timeline navigation.

Source: http://goo.gl/wqfRN

Layering, action and a lot happening with this AJAX-driven vertical scroller… including a bouncing rabbit sure to catch your attention.

Source: ala.ch

Tutorial on how to create beautiful 3D graphs and charts in Adobe Illustrator.

Source: http://bit.ly/egbJ1W

Slick CSS overlays without the use of Javascript. Modern browser support only.

Source: http://iamunr.com/thumbnail-overlay/

CSS:

ul.thumbnails { 
			/* This isn't needed, just some extra styling */
			margin: 0;  list-style-type: none; padding: 0; margin: 20px 0 0 0; 
		}

		ul.thumbnails li {
			/* This isn't needed, just some extra styling */
			display: inline-block; margin: 6px; 

			/* Actually part of the style */
			text-align: center; 
		}

		ul.thumbnails li a {
			border: solid 1px #a3abad; 
			display: inline-block; 
			line-height: 0;
			-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.25);
			-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.25);;
			box-shadow: 0 0 3px rgba(0,0,0, 0.25);
			margin: 0 0 10px;
			position: relative;
			z-index: 1;
			text-decoration: none;
			padding: 2px;
			background: #fff;
		}

		ul.thumbnails li a:hover {
			padding: 3px;
			background: rgb(12,159,208);
			border: solid 1px #1488ad;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
			margin: -1px -1px 9px -1px;
			-webkit-box-shadow: 0 0 5px rgba(0,0,0, 0.25);
			-moz-box-shadow: 0 0 5px rgba(0,0,0, 0.25);;
			box-shadow: 0 0 5px rgba(0,0,0, 0.25);
		}

		ul.thumbnails li a:hover::before {
			content: 'View Project';
			background: rgba(0,0,0,0.7);
			font-size: 12px;
			font-weight: bold;
			line-height: 26px;
			color: #fff;
			width: 100px;
			height: 26px;
			z-index: 3;
			position: absolute;
			top: 0;
			left: 0; 
			bottom: 0;
			right: 0;
			margin: 64px 0 0 55px;
			-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.5); 
			-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.5); 
			text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
			-webkit-border-radius: 14px;
			-moz-border-radius: 14px;
			border-radius: 14px;
		}

		ul.thumbnails li a:hover::after {
			content: '';
			background: rgba(12, 159, 208, 0.15);
			position: absolute; 
			top: 3px;
			right: 3px;
			bottom: 3px;
			left: 3px;
			-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.9);
			-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.9);
			box-shadow: inset 0 0 8px rgba(0,0,0, 0.9);
		}

		ul.thumbnails li strong {
			font-size: 12px;
			color: #535556;
			-webkit-text-shadow: 1px 1px 1px #fff; 
			-moz-text-shadow: 1px 1px 1px #fff; 
			text-shadow: 1px 1px 1px #fff;
		}

Nicolas demonstrates how to generate icons using only CSS with no images required. Whereas it is still experimental and browser support limited, it is impressive nonetheless.

Soure:

Site contains feature box slider with compelling imagery and staggered titles that add extra interest.

Source: http://www.bluecadet.com

A tour through the clouds with this AJAX-driven vertical scroller. Includes subtle layering as screen moves from top to bottom.

Source: freestyle-night.ch

HTML5 Interactive Coming Soon page with sign-up and username reservation.

Source: dabble.in