info@themewerk.com

Canvas

Canvas

HTML5 tags

New tags added in HTML 5

Layout tags

<article> Defines an article
<aside> Defines contents aside from the page content
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<nav> Defines navigation links
<section> Defines a section
<wbr> Defines a possible line-break

Web Apps tags

<canvas> Defines graphics
<command> Defines a command button
<datagrid> References dynamic data in a tree or a tabular data form
<datalist> Defines a dropdown list
<details> Defines details of an element

Media tags

<audio> Defines sound content
<source> Defines media resources
<video> Defines a video

Ruby tags

<rp> Defines browser substitute for unsupported ruby elements
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations

Other tags

<dialog> Defines a conversion or people talking
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<summary> Defines the header of a “detail” element
<time> Defines a date/time

Existing tags in HTML 4 & 5

<!–..–> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<address> Defines an address element
<area> Defines an area inside an image map
<b> Defines bold text
<base> Defines a base URL for all the links in a page
<bdo> Defines the direction of text display
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<button> Defines a push button
<caption> Defines a table caption
<cite> Defines a citaion
<code> Defines computer code text
<col> Defines attributes table columns
<colgroup> Defines groups of table columns
<dd> Defines a definition description
<del> Defines Defines deleted text
<dfn> Defines a definition term
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text
<fieldset> Defines a fieldset
<form> Defines a form
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<ins> Defines inserted text
<kbd> Defines keyboard text
<label> Defines a label for a form control
<legend> Defines a title in a fieldset
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map
<menu> Defines a menu list
<meta> Defines meta information
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Defines text that is no longer correct
<samp> Defines sample computer code
<script> Defines a script
<select> Defines a selectable list
<small> Defines small text
<span> Defines a section in a document
<strong> Defines strong text
<style> Defines a style definition
<sub> Defines subscripted text
<table> Defines a table
<tbody> Defines a table body
<td> Defines a table cell
<th> Defines a table header
<thead> Defines a table header
<title> Defines the document title
<tr> Defines a table row
<ul> Defines a unordered list
<var> Defines a variable

Old tags

<acronym> Defined acronyms in HTML 4.01
<applet> Defined an embedded applet
<basefont> Defined default font properties for all text in a document
<big> Used to make text bigger
<center> set to center align text and content
<dir> Defined a directory list
<font> Specified font face, font size, and font color of text
<frame> Defined on particular window without a frameset
<frameset> Defined a frameset, which organized multiple windows
<noframes> Displayed text for browser that do not handle frames
<strike> Defined strikthrough text
<tt> Defined teletype text
<u> Defined underliend text
<xmp> Defined preformatted text

Global attributes

New attributes

contenteditable Specifies if the user is allowed to edit the content or not
value: true | false
contetxtmenu Specifies the context menu for an element
value: menu id
draggable Specifies whether a user is allowed to drag an element
value: true | false | auto
dropzone Specifies what happens when dragged data is dropped
value: copy | move | link
hidden Specifies that the element is not relevant
value: hidden
spellcheck Specifies if the element must have its spelling checked
value: true | false

Existing attributes

accesskey Specifies a keyboard shortcut to access an element
value: character
class Specifies a classname for an element (for stylesheets)
value: class name
dir Specifies the text direction for the cotent in an element
value: ltr | rtl
id Specifies a unique id for an element
value: id
lang Specifies a language code for the content in an element
value: language code
style Specifies the tab order of an element
value: number
title Specifies extra information about an element
value: text

Event attributes

New attributes on Window

onafterprint Run after the document is printed
onbeforeprint Run before the document is printed
onbeforeonload Run before the document loads
onerror Rn when an error occur
onhaschange Run when the document has change
onmessage Run when the message is triggered
onoffline Run when the document goes offline
ononline Run when the document comes online
onpagehide Run when the window is hidden
onpageshow Run when the window becomes visible
onpopstate Run when the window’s history change
onredo Run when the document performs a redo
onresize Run when the window resized
onstorage Run when a document loads
onundo Run when a document perform an undo
onunload Run when the user leaves the document

Existing attributes on Window

onblur Run when the window loses focus
onfocus Run when the window get focus
onload Run when the document loads

New attributes on Form

oncontextmenu Run when a context menu is triggered
onformchange Run when a form changes
onforminput Run when a form gets user input
oninput Run when an element gets user input
oninvalid Run when an element is invalid

Existing attributes in Form

onblur Run when an element loses focus
onchange Run when an element changes
onfocus Run when an element gets focus
onselect Run when an element is selected
onsubmit Run when a form is submitted

Unsupported attributes in Form

onreset Run when a form is reset (Not supported in HTML 5)

Existing attributes for keyboard

onkeydown Run when a key is pressed
onkeypress Run when a keys pressed and reloaded
onkeyup Run when a key is released

New attributes for mouse

ondrag Run when an element is dragged
ondragend Run at the end of a drag operation
ondragenter Run when an element is dragged on a drop target
ondragleave Run when an element leaves a valid drop target
ondragover Run when an element is dragged over a drop target
ondragstart Run at the star of drag operation
ondrop Run when dragged element is being dropped
onmousewheel Run when the mouse wheel is being rotated
onscroll Run when an element’s scrollbar is being scrolled

Existing attributes for mouse

onclick Run on a mouse click
ondbclick Run on a mouse double-click
onmousedown Run when a mouse button is pressed
onmousemove Run when the mouse pointer moves
onmouseout Run when the mouse pointer moves out of an element
onmouseover Run when the mouse pointer moves over an element
onmouseup Run when mouse button is released

New attributes for media

oncanplay Run when media can start play
oncanplaythrough Run when media can be played to the end
ondurationchange Run when the length of the media is changed
onemtied Run when a media resource element becomes empty
onended Run when media has reach end
onerror Run when an error occurs loading an element
onloadeddata Run when media data is loaded
onloadedmetadata Run when the duration of a media element is loaded
onloadstart Run when the browser starts to load the media data
onpause Run when media data is paused
onplaying Run when media data has start playing
onprogress Run when the browser is fetching the media data
onratechange Run when the media data’s playing rate has changed
onreadystatechange Run when the ready-state changes
onseeked Run when a element’s seeking attribute is not true
onseeking Run when an element’s seeking attribute is true
onstalled Run when there is an error in fetching media data
onsuspend Run when browser has stopped fetching media data
ontimeupdate Run when media changes its playing position
onvolumechange Run when media changes the volume, also when mute
onwaiting Run when media has stopped playing

Existing attributes for media

onabort Run on an abort event

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.

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 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 GrayscaleReset

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 = "http://www.themewerk.com/wp-content/uploads/2015/09/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="audio/Truth_2_Jon_Gilham.mp3" type="audio/mpeg" /><!-- Safari/IE9 -->
	<source src="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="video/jellies.mp4" type="video/mp4" /><!-- WebKit -->
	<source src="video/jellies.ogg" type="video/ogg" /><!-- Firefox / Opera -->
</video>
						

HTML CHEAT SHEET

SYNTAX
Basic
HTML: <tag></tagclose> or <tag>

XHTML: <tag></tagclose> or <tag
/>

With an Attribute
HTML: <tag attribute=”?”>
XHTML: <tag attribute=”?” / >
BASIC
<body> the visible portion of the page
<head> portion not displayed on the page
<html> creates a html page
<title> shows the page name in the title bar
LINKS
<img src=”URL”>* displays an image
<a href=”#?”>* link to anchor in current document
<a href=”URL”>* link to another document
<a href=”URL#?”>* link to anchor in another document
<a href=”mailto:EMAIL”>* email link
STRUCTURE
<br>* line break
<code> source code listing
<div> Formats structure or block of text
<em> italic text
<h1>…<h6> page headings from largest to smallest
<hr> horizontal rule
<p> paragraph
<pre> preformatted text
<span> Inline formatting
<strong> bold text
<sub> subscript text
<sup> superscript text
FRAMES
<frame> defines a single frame
<frameset> frame document
<iframe> inline frame
HEAD
<link rel=”stylesheet” href=”?” type=”text/css”> * external CSS link
<script language=”Javascript” type=”text/javascript”> embedded javascript
<meta http-equiv=”content-type” content=”?”;
charset=”?”>*
meta information
TABLES
<caption> table caption
<table> defines a table
<tbody> body section of the table
<td> table cell
<td colspan=”?”> number of columns cell spans
<td rowspan=”?”> number of rows cell should spans
<tfoot> footer section of the table
<th> table header cells
<th colspan=”?”> number of columns table header cell spans
<thead> the header section of the table
<tr> table row
LISTS
<dd> definition
<dl> definition list
<dt> definition term
<li> item in a list
<ol> ordered list
<ul> unordered list
FORMS
<form> defines a form
<fieldset> group of related form items
<input type=”?”>* form element (see input types at right)
<option> menu item in a select box
<select> drop-down list
<textarea> multi-row text area
SPECIAL CHARACTERS
&nbsp; non-breaking space
&quot; quotation mark
&amp; ampersand
&lt; less than sign
&gt; greater than sign
* Note: Does not require a closing
tag

Template


<html>
<head>
<title></title>
Meta
Tags
CSS
JavaScript

</head>
<body>
Content

</body>
</html>

CSS Media


all
handheld
print
projection
screen

Meta Types


http-equiv
name

Lists


<ol>
<li>
</li>
</ol><ul>
<li>
</li>
</ul>

Table


<table><thead>
<tr>
<th>

</th>
</tr>
</thead>

<tbody>

<tr>
<td>
</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>
</td>

</tr>
</tfoot>

</table>

Input Types


button
checkbox
file
hidden
image
password
radio
reset
submit
text

CSS CHEAT SHEET

SYNTAX
Syntax
selector {property: value;}
External Style Sheet
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Internal Style
<style type=”text/css”>
selector {property: value;}
</style>
Inline Style
<tag style=”property: value”>
GENERAL
Class String preceded by a period
ID String preceded by a hash mark
div Formats structure or block of text
span Inline formatting
color Foreground color
cursor Appearance of the cursor
display
block; inline; list-item; none
overflow How content overflowing its box is handled

visible, hidden, scroll, auto
visibility
visible, hidden
FONT
font-style
Italic, normal
font-variant
normal, small-caps
font-weight
bold, normal, lighter, bolder, integer (100-900)
font-size Size of the font
font-family Specific font(s) to be used
TEXT
letter-spacing Space between letters
line-height Vertical distance between baselines
text-align Horizontal alignment
text-decoration
blink, line-through, none, overline, underline
text-indent First line indentation
text-transform
capitalize, lowercase, uppercase
vertical-align Vertical alignment
word-spacing Spacing between words
BOX MODEL
CSS Box Model height; width;
margin-top; margin-right; margin-bottom; margin-left;
padding-top; padding-right;
padding-bottom; padding-left;
BORDER
border-width Width of the border
border-style
dashed; dotted; double; groove; inset; outset;
ridge; solid; none
border-color Color of the border
POSITION
clear Any floating elements around the element?

both, left, right, none
float Floats to a specified side

left, right, none
left The left position of an element

auto, length values (pt, in, cm, px)
top The top position of an element

auto, length values (pt, in, cm, px)
position
static, relative, absolute
z-index Element above or below overlapping elements?

auto, integer (higher numbers on top)
BACKGROUND
background-color Background color
background-image Background image
background-repeat
repeat, no-repeat, repeat-x, repeat-y
background-attachment Background image scroll with the element?

scroll, fixed
background-position
(x y), top, center, bottom, left, right
LIST
list-style-type Type of bullet or numbering in the list

disc; circle; square; decimal; lower-roman;
upper-roman; lower-alpha; upper-alpha; none
list-style-position Position of the bullet or number in a list

inside; outside
list-style-image Image to be used as the bullet in a list
* The properties for each selector
are in the order they should appear when using shorthand notation.

Shorthand*


background
border
border-bottom
border-left

border-right
border-top
font
list-style
margin
padding

Comments


/* Comment */

Pseudo Selectors


:hover
:active
:focus
:link
:visited
:first-line
:first-letter

Media Types


all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Units


Length
%
em
pt
px
Keywords
bolder
lighter
larger

Named Colors and Hex Values in HTML

The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch.

Name Hexcode
Aqua #00FFFF
Black #000000
Blue #0000FF
Fuchsia #FF00FF
Gray #808080
Green #008000
Lime #00FF00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
White #FFFFFF
Yellow #FFFF00

Elements

Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element.

Element Description
A Use to create hyperlinks
Abbr Use for abbreviations
address Contact information
Area Hyperlink in an image-map
article* Provides section formatting for short expository items like articles, blogs, etc.
aside* Slightly related piece of content for host page
audio * Used to add audio for playback associated with web page
b Bold text
base Base URL
bdi* Isolate text that might be formatted in a different direction from text around it
bdo Use to specify the direction of text
blockquote Block quotation
body Document body
br Line break
button Creates a button.
canvas* Use to define a page region in which drawing can occur
caption Table title
cite Cited title of a work
code Code fragment
col Column in a table
colgroup Group of table columns
command* Use to define user GUI elements
datalist* Use to create a list of input elements for pull-down menus
dd Description
del Deleted text
details* Provides additional information or controls to users on demand
dfn Defining instance
div Generic container
dl Description list
dt Term or name
em Emphasis
embed * Links to external application or interactive content
fieldset Related form controls
figcaption* Provide a caption for a figure element
figure* Standalone flow content element; may be static or dynamic
footer* Concluding information for a document section
form Defines a user-submittable form
h1 – h6 Headings
head Container for metadata about the document, scripts, and styles
header* Header for the document
hgroup* Heading group
hr Horizontal rule / thematic break
html Root element
i Italic text
iframe Nested browsing content
img Image
input Input control
ins Inserted text
kbd User input
keygen* User-accessible control to generate key pairs for security or encryption
label Caption for a form control
legend Explanatory caption
li List item
link Metadata for linking external documents
map Define an image-map
mark* Mark or highlight a run of text in one document, for reference in another document
menu List of commands
meta Metadata
meter* Define a visual indicator for some type of measurement
nav* Use to define a navigation bar or area in a web page
noscript Define content to display in case the script can’t be run
object External content
ol Ordered list
optgroup Define a group of options
output* Some kind of output from script calculation or API call
p Paragraph
param Use to provide parameters to plugins
pre Preformatted text
progress* A visual meter for task completion (progress bar)
q Quoted text
rp* Use for putting parentheses around ruby annotations
rt* Use to mark the text of a ruby annotation
ruby* Use to annotate ideographic languages like Chinese or Japanese
s Mark text as removed, with strike through formatting.
samp Sample output
script Embedded script
section* Generic document or application section
select Option selection form control
small Small text
source* Use to specify multiple sources for audio and video
span A generic text wrapper
strong Important text. Is usually formatted as bold
style Presentation information, typically CSS
sub Subscript text
summary* Summary, legend, or caption for input details information
sup Superscript text
table Table
tbody Group of table rows
td Table cell
textarea Text input area
tfoot Table footer row group
th Table header cell
thead Table heading row group
time* Value for representing date and/or time
title Document title
tr Table row
track* Specify a supplementary media track
u Underline
ul Unordered list
var Use to specify a mathematical or programming variable, or a placeholder
video * Use to playback video content in web page
wbr * Use to denote possible line break point for text flow

* New in HTML5

CSS Property Reference

The following table shows CSS properties that are supported by most browsers today, along with their allowed values.

Name Values
animation <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
animation-delay <time>
animation-direction normal | alternate | reverse | alternate reverse
animation-duration <time>
animation-fill-mode none | forwards | backwards | both
animation-iteration-count infinite | <number>
animation-name none | <identifier>
animation-play-state running | paused
animation-timing-function <timingfunction>
backface-visibility visible | hidden
background-attachment scroll | fixed | inherit
background-clip border-box | padding-box | content-box | inherit
background-color <color> | inherit
background-image <uri> | none | inherit
background-origin border-box | padding-box | content-box | inherit
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit
background-size <length> | <percentage> | auto | cover | contain
background [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit
border-collapse collapse | separate | inherit
border-color [ <color> ]{1,4} | inherit
border-image none | <image>
border-image-outset [‘sides’ || ‘horizontal’ || ‘vertical’ || ‘top’ || ‘bottom’ || ‘right’ || ‘left’] | inherit
border-image-repeat [‘type’ || ‘horizontal’ || ‘vertical’ || ‘stretch’ || ‘repeat’ || ’round’] | inherit
border-image-source none | <image>
border-image-slice [<number> | <percentage>]{1,4} && fill?
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4}
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
border-spacing <length> <length>? | inherit
border-style <border-style>{1,4} | inherit
border-top border-right border-bottom border-left [ <border-width> || <border-style> ||border-top-color ] | inherit
border-top-color border-right-color border-bottom-color border-left-color <color> | inherit
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius [ <length> | <percentage> ]{1,2}
border-top-style border-right-style border-bottom-style border-left-style <border-style> | inherit
border-top-width border-right-width border-bottom-width border-left-width <border-width> | inherit
border-width <border-width>{1,4} | inherit
border [ <border-width> || <border-style> ||border-top-color ] | inherit
bottom <length> | <percentage> | auto | inherit
box-shadow none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column
caption-side top | bottom | inherit
clear none | left | right | both | inherit
clip <shape> | auto | inherit
color <color> | inherit
columns <‘column-width’> || <‘column-count’>
column-count <number> | auto
column-fill auto | balance
column-gap <length> | normal
column-rule <‘column-rule-width’> || <‘column-rule-style’> || <‘column-rule-color’>
column-rule-color <color>
column-rule-style [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
column-rule-width <length> | [thin | medium | thick]
column-span none | all | inherit
column-width <length> | auto
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
counter-increment [ <identifier> <integer>? ]+ | none | inherit
counter-reset [ <identifier> <integer>? ]+ | none | inherit
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
direction ltr | rtl | inherit
display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
empty-cells show | hide | inherit
float left | right | none | inherit
font-family [ [ <family-name> | <generic-family> ] [,<family-name>| <generic-family> ]* ] | inherit
font-size <absolute-size> | <relative-size> | <length> |<percentage> | inherit
font-style normal | italic | oblique | inherit
font-variant normal | small-caps | inherit
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
height <length> | <percentage> | auto | inherit
@keyframes [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
left <length> | <percentage> | auto | inherit
letter-spacing normal | <length> | inherit
line-height normal | <number> | <length> | <percentage>| inherit
list-style-image <uri> | none | inherit
list-style-position inside | outside | inherit
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
list-style [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit
margin-right margin-left <margin-width> | inherit
margin-top margin-bottom <margin-width> | inherit
margin <margin-width>{1,4} | inherit
max-height <length> | <percentage> | none | inherit
max-width <length> | <percentage> | none | inherit
min-height <length> | <percentage> | inherit
min-width <length> | <percentage> | inherit
opacity <number> | inherit
orphans <integer> | inherit
outline-color <color> | invert | inherit
outline-style <border-style> | inherit
outline-width <border-width> | inherit
outline [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit
overflow visible | hidden | scroll | auto | inherit
overflow-wrap normal | break-word | inherit
overflow-x visible | hidden | scroll | auto | inherit
overflow-y visible | hidden | scroll | auto | inherit
padding-top padding-right padding-bottom padding-left <padding-width> | inherit
padding <padding-width>{1,4} | inherit
page-break-after auto | always | avoid | left | right | inherit
page-break-before auto | always | avoid | left | right | inherit
page-break-inside avoid | auto | inherit
perspective none | <length>
perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
position static | relative | absolute | fixed | inherit
quotes [<string> <string>]+ | none | inherit
right <length> | <percentage> | auto | inherit
table-layout auto | fixed | inherit
text-align left | right | center | justify | inherit
text-decoration none | [ underline || overline || line-through || blink ] | inherit
text-indent <length> | <percentage> | inherit
text-transform capitalize | uppercase | lowercase | none |inherit
top <length> | <percentage> | auto | inherit
transform none | <transform-function>+
transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
transform-style flat | preserve-3d
transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
transition-delay <time>
transition-duration <time>
transition-timing-function <timing-function>
transition-property none | <single-transition-property># [ ‘,’ <single-transition-property># ]*
unicode-bidi normal | embed | bidi-override | inherit
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> |<length> | inherit
visibility visible | hidden | collapse | inherit
white-space normal | pre | nowrap | pre-wrap | pre-line |inherit
widows <integer> | inherit
width <length> | <percentage> | auto | inherit
word-spacing normal | <length> | inherit
z-index auto | <integer> | inherit
Top