HTML5 DOCTYPE

HTML5 documents have a much simpler doctype definition. This doctype kicks all current browser engines into standards mode (vs. quirks mode) and is the recommended W3C doctype for modern HTML.


<!DOCTYPE html>

Rounded Corners

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Rounded corners work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a workaround for older IE versions (not implemented here).

CSS:


width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 15px 15px 15px 15px;
						

Rounded Corners Redux: Circles

Google recently featured a logo composed of small colorful bubbles that spent all their time avoiding the mouse cursor - the actual bubbles were divs without any kind of graphics involved.

So how do you make a round div? If your div has round corners and the corner radius is half the size of your div so that the round corners actually meet, the effect is that the div now appears round. The example above uses three separate styles for the three different sizes of the circles and inline styles for positioning and color. The CSS below is for the small circles in the example above, with a div size of 40 pixels and rounded corners of 20 pixels.

CSS:


width: 40px;
height: 40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color:#ffbbbb;
						

Box Shadows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Object shadows work with Firefox, Safari, Chrome, Opera and IE9 Preview. Here is a great tutorial with many more examples for box shadows. There are also several workarounds for older versions of Internet Explorer.

CSS:


width: 300px;
background-color: #cccccc;
border: 1px solid #999999;
-moz-box-shadow: 3px 3px 3px #aaaaaa;
-webkit-box-shadow: 3px 3px 3px #aaaaaa;
box-shadow: 3px 3px 3px #aaaaaa;
padding: 15px 15px 15px 15px;
						

Gradients

Linear Gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Gradients are now finally becoming a mainstream feature with the WebKit team's announcement (Jan 2011) of expanded support of the Mozilla flavor of the proposed W3C spec. Be aware that this spec seems to be currently in need of editors at the WHATWG and while it is now supported identically by Mozilla and WebKit, there is no official specification.

Opera has also announced that they are working on the the gradient spec (developer tweet from October 2010), but we may have to wait for version 12 for the gradient support to surface.

The examples here work in the latest version of Firefox and in the WebKit Nightly Builds (January 2011) - it can be assumed that the next update of Safari will follow along.

Here is a simple linear gradient, browsers default to a top-to-bottom direction:

CSS:


width: 300px;
border: 1px solid #999999;
padding: 15px 15px 15px 15px;
background-image: -webkit-linear-gradient(#aaddaa, #ffffff);
background-image: -moz-linear-gradient(#aaddaa, #ffffff);
background-image: -o-linear-gradient(#aaddaa, #ffffff);
background-image: linear-gradient(#aaddaa, #ffffff);
						

Here are some more complex examples - the WebKit blog has a good overview of the new syntax:

Angled Linear Gradient

CSS:


background-image: -webkit-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -moz-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: -o-linear-gradient(135deg, #aaddaa, #ffffff);
background-image: linear-gradient(135deg, #aaddaa, #ffffff);
						

Angled Linear Gradient with Color Stops

CSS:


background-image: -webkit-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -moz-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: -o-linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
background-image: linear-gradient(45deg, #ffffff, #ffbbbb, #aaddaa, #bbbbff, #ffffff);
						

Radial Gradient with Color Stops and Positions

CSS:


background-image: -webkit-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -moz-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: -o-radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
background-image: radial-gradient(200px 50px, circle, #ffffff, #ffbbbb 25%, #aaddaa 30%, #bbbbff 35%);
						

Text Shadows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Shadows work with Firefox, Safari, Chrome and Opera. There are workarounds for Internet Explorer.

CSS:


text-shadow: #666666 2px 2px 4px;
						

Usage:
text-shadow: [color] [y-offset] [x-offset] [blur-radius];

The color value can be either the first or last parameter for a shadow definition and multiple shadow definitions can be added with a comma separator. Here is an example with two shadows applied:

Lorem ipsum dolor sit amet in 3D!

It's HTML5 in 3D! I hope you still have some of those red-green 3D glasses around...

CSS:


font-size: 22px;
padding: 15px 15px 15px 15px;
text-shadow: #ee3333 -8px 0px 2px, #33ee33 8px 0px 2px;
						

Border Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus, consequat eget sodales non, ultrices vitae arcu. Vivamus quis felis sit amet mi malesuada gravida vitae rhoncus diam.

Border images work currently with Firefox, Safari, Chrome and Opera. Here are some further examples.

Image:

CSS:


width: 300px;
padding: 15px 15px 15px 15px;
color: #ffffff;
border-width: 10px;
-moz-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
-webkit-border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
border-image: url('../images/roundedcorner.png') 20 20 20 20 stretch stretch;
						

Usage:
border-image: [image-source] [image-slice-from-top] [image-slice-from-right] [image-slice-from-bottom] [image-slice-from-left] [image-repeat-horizontal] [image-repeat-vertical];

This is a very complex CSS3 feature with a number of variations for all of the properties - I very much recommend reading the W3C spec. Here is also a very good tutorial exploring border images by Louis-Rémi Babé.

Here is another example for the practical use of border image in combination with the :after pseudo element.

Transform Rotate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam lacus.

CSS transforms work with Firefox, Safari, Chrome and Opera. This is one of the few new CSS properties where Opera also needs a vendor prefix, and its support is definitely still experimental with markedly limited text quality. For IE, it is possible to add similar effects via matrix filters.

Here is the full W3C spec for "CSS 2D Transforms Module Level 3" (yeah, I love that title, too!).

CSS:


margin: 50px 0 50px 0;
width: 200px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
						

Column Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae velit tortor, ac dictum eros. Phasellus ut ante ante, a lacinia est. Suspendisse quis velit vitae ligula aliquet porta eget in diam.

Proin nunc velit, fringilla eget pretium ut, ultricies at enim. Cras molestie sem ac dui ornare in accumsan nisi dapibus. Aliquam ac molestie neque. Nam auctor leo nec augue sollicitudin eget mattis enim auctor. Curabitur suscipit elementum turpis, quis facilisis lectus ullamcorper placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mi mauris, ornare at tincidunt eu, pretium mollis turpis. Curabitur interdum facilisis dapibus. Curabitur tortor augue, varius vel tempus in, fermentum nec est.

Etiam in nulla sit amet justo luctus faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Fusce condimentum eros ultrices turpis dictum ultricies. Donec velit dui, ultrices eu mattis in, pretium blandit nibh. Sed id elit in justo condimentum fermentum. Nam iaculis massa sed nulla tincidunt consectetur. Cras rutrum blandit felis, vel pulvinar massa tristique nec. Mauris vitae justo ut nisl adipiscing molestie eu vitae ligula. Curabitur accumsan vehicula tellus eu dignissim. Proin eleifend vehicula vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Phasellus suscipit condimentum mollis. Mauris urna nisi, viverra quis accumsan at, faucibus ac dolor. Sed pharetra, leo eget imperdiet aliquam, tellus elit ullamcorper quam, vel cursus libero urna at sapien. Quisque vitae mi eu arcu congue lobortis at at lorem. Quisque varius bibendum felis, id consequat lorem blandit at. Nullam feugiat lorem eget urna egestas in vehicula mi elementum.

Column Layout is supported in Safari and Firefox. This degrades gracefully on other browsers by reverting to a standard one column layout.

CSS:


width: 600px;
padding: 15px 15px 15px 15px;
-webkit-column-count: 2;
-webkit-column-gap: 30px;
-moz-column-count: 2;
-moz-column-gap: 30px;
column-count: 2;
column-gap: 30px;
						

SVG

Universal support for inline SVG in HTML 5 with SVGweb on all modern browsers and IE.

Safari, Chrome, Firefox and Opera render the SVG code natively, IE uses the SVGweb Flash renderer. There are minor implementation differences, for instance Safari does currently (September 2010) not yet support Gaussian Blur.

Inline SVG code (script tag enclosure is necessary for the SVGweb library which has to be included in the page):


<script type="image/svg+xml">
	<svg xmlns="http://www.w3.org/2000/svg" 
		xmlns:xlink="http://www.w3.org/1999/xlink"
		xmlns:svg="http://www.w3.org/2000/svg"
		version="1.1"
		viewBox="0 0 300 150"
		style="width:300px;height:150px;background-color: #cccccc; display: block; border: 1px #999999 solid;">
		<defs>
			<filter id="Gaussian_Blur">
				<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
			</filter>
		</defs>
		<g transform="translate(10,0)">
			<rect x="180" y="80" width="100" height="30" fill="#666666" filter="url(#Gaussian_Blur)"></rect>
			<circle id="myCircle"
				cx="230" cy="115" r="25"
				fill="#666666" filter="url(#Gaussian_Blur)"></circle>
			<rect x="30" y="15" width="200" height="60" rx="15" ry="15" stroke-width="2px" fill="#000088"></rect>
			<circle id="myCircle"
				cx="130" cy="85" r="50"
				fill="#0088ff"
				stroke="#880000"
				stroke-width="3"></circle>
			<text x="98" y="90">Hello World</text> 
		</g>
	</svg>
</script>
						

Canvas

Canvas has not been implemented in Internet Explorer up to version 8, however there is excanvas, a JavaScript library that implements most of the canvas functionality in IE. Canvas does work flawlessly in the IE9 Preview as well as in the latest versions of Firefox, Safari, Chrome and Opera.
Here is the inline canvas tag and JavaScript for the example above:


<canvas id="demoCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var canvas, graphics;
function draw_init() {
	canvas = document.getElementById('demoCanvas');
	if (canvas.getContext) {
		graphics = canvas.getContext('2d');
	}
	draw();
}
function draw() {
	var theme = ["#10222B","#95AB63","#BDD684","#E2F0D6","#F6FFE0"];
	var x = Math.random() * 300;
	var y = Math.random() * 150;
	var size = (Math.random() * 100) + 20;
	var num_circles = (Math.random() * 10) + 2;
	for (var i = size; i > 0; i-= (size/num_circles)) {
		graphics.fillStyle = theme[ (Math.random() * 5 >> 0)];
		graphics.beginPath();
		graphics.arc(x, y, i * .5, 0, Math.PI*2, true); 
		graphics.closePath();
		graphics.fill();
	}
	t = setTimeout('draw()',1000);
}
draw_init();
</script> 
						

Canvas Text

The new fillText and strokeText canvas functions work with all fonts installed on the machine (unfortunately there is still no font download):


<canvas id="textCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var textcanvas, textgraphics;
function textdraw_init() {
	textcanvas = document.getElementById('textCanvas');
	if (textcanvas.getContext){
		textgraphics = textcanvas.getContext('2d');
	}
	textdraw();
}
function textdraw() {
	var texttheme = ["#004488","#0066aa","#0088cc","#00aaee","#00ccff"];
	var textfont = ["Arial","Times New Roman","Comic Sans MS","Papyrus","Baskerville"];
	var x = Math.random() * 600;
	var y = Math.random() * 150;
	var size = (Math.random() * 50) + 10;
	textgraphics.font = size+"px '"+textfont[ (Math.random() * 5 >> 0)]+"'";
	if (Math.random() > .5) {
		textgraphics.fillStyle = texttheme[ (Math.random() * 5 >> 0)];
		textgraphics.fillText("Sample String", x, y);
	} else {
		textgraphics.strokeStyle = texttheme[ (Math.random() * 5 >> 0)];
		textgraphics.strokeText("Sample String", x, y);
	}


	t = setTimeout('textdraw()',950);
}
textdraw_init();
</script> 
						

Canvas Text Rotate (via transform)

Here is an example of rotating text in a canvas with the canvas.transform method:


<canvas id="fxtextCanvas" width="600" height="150"></canvas>
<script type="text/javascript">
var fxtextcanvas, fxtextgraphics;
function fxtextdraw_init() {
	fxtextcanvas = document.getElementById('fxtextCanvas');
	if (fxtextcanvas.getContext){
		fxtextgraphics = fxtextcanvas.getContext('2d');
	}
	fxtextdraw();
}
function fxtextdraw() {
	fxtextgraphics.font = "16px 'Arial'";
	var sin = Math.sin(Math.PI/6);
	var cos = Math.cos(Math.PI/6);
	fxtextgraphics.translate(300, 70);
	var c = 0;
	for (var i=0; i < 12; i++) {
		c = Math.floor(255 / 12 * i);
		fxtextgraphics.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
		fxtextgraphics.fillText("Sample String", 5, 30);
		fxtextgraphics.transform(cos, sin, -sin, cos, 0, 0);
	}
}
fxtextdraw_init();
</script> 
						

Canvas Image Load & Manipulation


Convert to Grayscale - Reset

We first load a jpg image as an object in fximage_init() and once the load event fires we draw the image unaltered to the canvas in the fximage_draw() function.

The fximage_grayscale() function is then called to loop through all the pixels of the canvas, converting each pixel to grayscale and then rewriting the image data to the canvas.


<canvas id="fximageCanvas" width="400" height="300"></canvas>
<a href="javascript:fximage_grayscale();">Convert to Grayscale</a> - <a href="javascript:fximage_draw();">Reset</a>
<script type="text/javascript">
var fximage = new Image();
var fximage_canvas, fximage_graphics;
function fximage_init() {
	fximage_canvas = document.getElementById('fximageCanvas');
	if (fximage_canvas.getContext){
		fximage_graphics = fximage_canvas.getContext('2d');
	}
	fximage.onload = fximage_draw;
	fximage.src = "images/goldengate.jpg";
}
function fximage_draw() {
	fximage_graphics.drawImage(fximage, 0, 0, 400, 300);
}
function fximage_grayscale() {
	input = fximage_graphics.getImageData(0, 0, fximage_canvas.width, fximage_canvas.height);
	output = fximage_graphics.createImageData(fximage_canvas.width, fximage_canvas.height);
	w = input.width;
	h = input.height;
	inputData = input.data;
	outputData = output.data;
	for (var y=1; y<h-1; y++) {
		for (var x=1; x<w-1; x++) {
			i = (y*w + x) * 4;
			grayscale = inputData[i] * .3 + inputData[i+1] * .59 + inputData[i+2] * .11;
			outputData[i] = grayscale;		// red
			outputData[i+1] = grayscale;		// green
			outputData[i+2] = grayscale;		// blue
			outputData[i+3] = 255;			// alpha
		}
	}
	fximage_graphics.putImageData(output, 0, 0);
}
fximage_init();
</script> 
						

Audio

Here is the full W3C spec for the Audio Element and here is a good overview of the audio tag and how to control media tags (audio and video) via JavaScript on Mozilla's developer site.

Stories In Flight also hosts separate pages on HTML5 Audio and JavaScript Control and the HTML5 Audio Data API.

"Truth 2" by Jon Gilham used with permission by the artist.

HTML:


<audio controls="true" preload="metadata">
	<source src="demomedia/audio/Truth_2_Jon_Gilham.mp3" type="audio/mpeg" /><!-- Safari/IE9 -->
	<source src="demomedia/audio/Truth_2_Jon_Gilham.ogg" type="audio/ogg" /><!-- Firefox/Opera/Chrome -->
</audio>
						

Video

Here is the full W3C spec for the Video Element and here is a good overview of the video tag and how to control media tags (audio and video) via JavaScript on Mozilla's developer site.

The proposed W3C video tag also includes a <track> element that allows the inclusion of subtitles, however none of the browsers has currently a working implementation of this functionality. If you want to include subtitles, Stories In Flight also hosts the VideoSub library which allows the use of standards-compliant track elements in your videos right now.

HTML:


<video controls="true" preload="metadata" width="320" height="176">
	<source src="demomedia/video/jellies.mp4" type="video/mp4" /><!-- WebKit -->
	<source src="demomedia/video/jellies.ogg" type="video/ogg" /><!-- Firefox / Opera -->
</video>
						

Comments

no comments yet...
Your Comments
Name *:        Email *:       

Sorry, but we have to trick the spambots... How much is 2+1? *:

URL:
SUBMIT