HTML5

Visual Enhancements

CSS3 enables the following, and the people rejoiced:

• border-radius - now any corner on any block-level element can be curved
• text-shadow - text can now have a shadow applied.
• box-shadow - any block-level element can have a dropped shadow applied to the whole box.
• Multiple background-image - any element can have multiple background images applied to it. Each can be positioned independently.
• opacity - controls how opaque an element is. 1 means fully opaque. 0 means completely transparent.
• gradients - generated gradients can now be used instead wherever images used to be possible (background-image, etc.).

Here's a sample of these in action. The CSS to generate this:

	border-radius: 4px; 
	text-shadow: 1px 1px 2px #B6B4B2; 
	box-shadow: 1px 3px 5px #C0BDB7; 
	opacity: .7; 
	background-image: url('img/bg_paint.png'), -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.25, #C0BDB7),
		color-stop(0.80, #E1DFDB)
	);
	padding-left: 5px;

CSS3 also introduces CSS Transformations. They let us manipulate the appearance of content in a new way. They are:

• scale - let’s us scale content
• rotate - let’s us rotate content
• skew - skews content (imagine taking a square and skewing it into a parallelogram)
• translate - moves an element without impacting the padding, margin, float or position properties.

Here's a sample of these in action using the previous sample as a basis. The CSS to generate this (note: transformations aren't, yet, fully supported, so you need the browse prefixes):

	transform: scale(1.1,1.5) rotate(-2deg) skew(10deg,5deg) translate(5px, 10px);
	-ms-transform: scale(1.1,1.5) rotate(-2deg) skew(10deg,5deg) translate(5px, 10px);
	-o-transform: scale(1.1,1.5) rotate(-2deg) skew(10deg,5deg) translate(5px, 10px);
	-moz-transform: scale(1.1,1.5) rotate(-2deg) skew(10deg,5deg) translate(5px, 10px);
	-webkit-transform: scale(1.1,1.5) rotate(-2deg) skew(5deg,3deg) translate(2px, -5px);

Font Enhancements

One of the classic critiques of design for the web from traditional design disciplines was that the typography was severely limited. This was because the end user needed to have the font installed on their system. The number of fonts that were commonly installed across many machines was relatively small.

However, the CSS property "@font-face" has allowed us to load font for use in the page for quite some time. Unfortunately, managing the rights of the font and converting it to all the formats each browser requires is a bear. While technically part of the CSS3 specification, services like typekit have launched recently that make using fonts beyond the traditional "websafe" ones much easier. More information is available on typekit.

Animation

Designers and developers have long-relied on JavaScript or Flash to handle animated elements on a page. Now, with CSS3, we can animate directly in CSS.

Transitions

The easiest to understand is CSS transitions. Basically, we can point a transition at any CSS attribute. When the value of that attribute changes (either through JavaScript or because of a pseudo-class, like :hover, was activated), the browser will automatically create an animation from what it was to the new value. What’s great about this is that older browsers aren’t missing much. If they can’t render the animation, the element will just snap to it’s new value rather than be animated to it.

Hover over this to trigger a transition. The CSS to power this is below:

	#transitionDemo {
		transform: scale(1,1) rotate(0deg);
		-ms-transform: scale(1,1) rotate(0deg);
		-o-transform: scale(1,1) rotate(0deg);
		-moz-transform: scale(1,1) rotate(0deg);
		-webkit-transform: scale(1,1) rotate(0deg);

		-webkit-transition-property: all;
		-webkit-transition-duration: .2s;
		-webkit-transition-timing-function: easeIn;
	}	
	#transitionDemo:hover {
		transform: scale(1.2,1.2) rotate(5deg);
		-ms-transform: scale(1.2,1.2) rotate(5deg);
		-o-transform: scale(1.2,1.2) rotate(5deg);
		-moz-transform: scale(1.2,1.2) rotate(5deg);
		-webkit-transform: scale(1.2,1.2) rotate(5deg);
	}

We can also delay the trigger of this animation by a few moments. Hover over this and wait a moment to trigger a delayed transition. To do this, simply add the CSS is below:

	-webkit-transition-delay: 1s;

These auto-generated tweens can be tweaked. Rather than just a linear motion, they can also be animated with the following swapped into the transition-timing-function property (roll over each to see a sample of them in action):

• linear
• ease
• easeIn
• easeOut
• easeInOut
• cubic-bezier - Allows you to build your own motion. A great tool to construct these visually is Ceaser.

Many CSS properties can be transitioned, but not all. A complete list is available on the W3C’s website.

Keyframes

When transitions aren’t enough, keyframes are pretty powerful. They allow a designer or developer to specify exactly how something should change over time. This, essentially, gives us as much control over the motion of an object as keyframed-based animation in Flash. The downside is that they're also a bit tricky to get used to.

For keyframe animation you basically need two components. You need the CSS for the element you want to animate. You also need a block of CSS that "holds" the animation. You then tie those two together. This allows you to have a "bucket" of pre-built animation that you can apply to any number of objects via CSS. Here's an example:

The CSS for this demo is below

	#keyframeDemo {
		-webkit-animation-name: fade;
		-webkit-animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-fill-mode: forwards;
	}

	@-webkit-keyframes fade {
		0% {	
			opacity: 1;
		}
		50% {
			opacity: .5;
		}
		100% {
			opacity: 1;
		}
	}