Download - Up to Speed on HTML 5 and CSS 3
![Page 1: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/1.jpg)
CSS 3UP TO SPEED ON
HTML 5 &
REFRESH DC | M. JACKSON WILKINSON & JASON GARBER | JULY 16, 2009
</TITLE>
Sunday, July 19, 2009
![Page 2: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/2.jpg)
THE INTRO
Sunday, July 19, 2009
![Page 3: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/3.jpg)
M. JACKSON WILKINSONYour Humble Refresh DC Organizer
That’s“Michael”
Sunday, July 19, 2009
![Page 4: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/4.jpg)
Sunday, July 19, 2009
![Page 5: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/5.jpg)
Sunday, July 19, 2009
![Page 6: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/6.jpg)
JASON GARBERRefresh DC Organizer Emeritus
Sunday, July 19, 2009
![Page 7: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/7.jpg)
Sunday, July 19, 2009
![Page 8: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/8.jpg)
WEB STANDARDSA Very Brief History of
Sunday, July 19, 2009
![Page 9: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/9.jpg)
XHTML 1
2001-2006
CSS 2.1Content Presentation
Sunday, July 19, 2009
![Page 10: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/10.jpg)
WHAT WG
2004-2007
Web Hypertext Application Technology Working Group
Sunday, July 19, 2009
![Page 11: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/11.jpg)
W3C
2007 - PRESENT
World Wide Web Consortium
Sunday, July 19, 2009
![Page 12: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/12.jpg)
HTML 5
2007 - PRESENT
CSS 3Content Presentation
Sunday, July 19, 2009
![Page 13: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/13.jpg)
HTML 5The Content Layer:
Sunday, July 19, 2009
![Page 14: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/14.jpg)
NEW ELEMENTS
Sunday, July 19, 2009
![Page 15: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/15.jpg)
structural elements
Browser Support:structural elements
Provides new semantic vocabulary for parts of a page previously served by DIVs with ID and Class attributes.
IE requires some workarounds using JavaScript to make these elements work.
HEADER
ARTICLE
FOOTER
ASIDE
NAV
SECTION
Sunday, July 19, 2009
![Page 16: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/16.jpg)
figure
Browser Support:figure
Allows for associating captions with embedded content, including videos, audio, pullquotes, or images.
FIGURE
LEGEND
CONTENT (IMG, Q, VIDEO, ETC.)
Sunday, July 19, 2009
![Page 17: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/17.jpg)
audio & video
Browser Support:audio & video
Allows for associating captions with embedded content, including videos, audio, or images.
Opera, Chrome, and Firefox all support the Ogg Theora video format natively, while Safari and Chrome support H.264.
<video src="test.ogg" autoplay="autoplay" controls="controls"> Your browser does not support the video element. This could also include object and embed codes for legacy browsers.</video>
Sunday, July 19, 2009
![Page 18: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/18.jpg)
OTHER ELEMENTSMETER Contained content is a measurement, like length.
PROGRESS
TIME
COMMAND
DATAGRID
OUTPUT
RUBY
Contains current process toward a goal, like a percentage.
Time
Represents something a command a user may execute.
Represents data. Non-tabular or otherwise.
Displays the output of a program or process.
Allows input of rubi/ruby annotations for Asian languages.
Sunday, July 19, 2009
![Page 19: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/19.jpg)
NEW FORM CONTROLS
Sunday, July 19, 2009
![Page 20: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/20.jpg)
FORM CONTROLSDATETIME Allows input of a date and a time.
DATETIME-LOCAL
NUMBER
RANGE
URL
COLOR
Allows input of a date and a time, in local time.
Allows input of a number.
Input is verified to be within a range.
Confirms the input to be a valid email.
Ensures input is a valid URL.
Provides a mechanism for the user to input an RGB color.
Sunday, July 19, 2009
![Page 21: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/21.jpg)
DOC STRUCTURE
Sunday, July 19, 2009
![Page 22: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/22.jpg)
HTML 5 doctype
Browser Support:HTML 5 doctype
The HTML 5 doctype is way easier than any other doctype. Evar.
Just type the parts you remember, and you’ll probably be right.
<!DOCTYPE html>
Sunday, July 19, 2009
![Page 23: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/23.jpg)
HTML5 & XHTML5
Browser Support:HTML 5 doctype
HTML 5 supports the standard HTML syntax (formerly SGML), but also allows for an XML-based variant XHTML5.
Since it’s XML, XHTML should be served as application/xml or application/xhtml+xml. Warning: this means browsers freak if there’s an error.
<html>
vs.<html xmlns="http://
www.w3.org/1999/xhtml">
Sunday, July 19, 2009
![Page 24: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/24.jpg)
Block-Level Links
Browser Support:Block-level Links
You can now wrap links around block-level elements, rather than having to create links around every element inside the block element.
This is useful for lists of articles that include multiple elements, callouts with a single action, etc.
<li> <a href="page.html"> <img src="pic.jpg"> <h3>Title</h3> <p>Text</p> </a></li>
Sunday, July 19, 2009
![Page 25: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/25.jpg)
NEW APIs
Sunday, July 19, 2009
![Page 26: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/26.jpg)
Drag & Drop API
Browser Support:Drag and Drop API
Allows objects (images and links, by default) to be dragged and then dropped onto a target.
The target is enabled by canceling the ‘dragover’ (for sane browsers) or ‘dragenter’ (for IE) events for the drop target. Then listen for a ‘drop’ event which contains a ‘dataTransfer’ object with info.
+
Sunday, July 19, 2009
![Page 27: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/27.jpg)
getElementsByClassName
Browser Support:getElementsByClassName
Works just like getElementsById, but selects an array of all elements based on a shared class name.
No more varied custom functions to make this happen, and performance is significantly better.
Sunday, July 19, 2009
![Page 28: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/28.jpg)
Cross-Document Messaging
Browser Support:Cross-Doc Messaging
This allows non-hostile documents on different domains to simply communicate with each other.
The sending document can call postMessage() on the window object of the receiving document, while the receiving document listens for a ‘message’ event.
MAIN DOCUMENT
FOREIGNIFRAME
Sunday, July 19, 2009
![Page 29: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/29.jpg)
Simple Client Storage
Browser Support:Simple Client Storage
The sessionStorage DOM attribute stores session data for a single window, like cookies on crack.
The localStorage DOM attribute allows each site to store megabytes of data across sessions to improve performance.
Both methods store only strings.
<input type="checkbox" onchange=" localStorage.insurance=checked "/>
Sunday, July 19, 2009
![Page 30: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/30.jpg)
Structured Client Storage
Browser Support:Structured Client Storage
HTML 5’s Web Storage module provides an SQL server within the client, accessible using Javascript. It uses fairly standard SQL queries for both reading and writing.
There’s a lot to be explained about the built-in SQL server, so go check out the docs for more information.
tx.executeSql( ‘SELECT * FROM Notes’, [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { renderNote(rs.rows[i]); }
Sunday, July 19, 2009
![Page 31: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/31.jpg)
Offline Application Caching
Browser Support:Offline Application Caching
Allow the client to refer directly to its cache, authoritatively, for certain resources, even if the browser is offline.
Resources listed in the “network” section are never cached.
<html manifest=”/cache.manifest”>
CACHE MANIFESTindex.htmlhelp.htmlstyle/default.cssimages/logo.pngimages/backgound.png
NETWORK:server.cgi
Sunday, July 19, 2009
![Page 32: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/32.jpg)
Canvas
Browser Support:canvas
Provides an API for drawing directly in the browser window, using instructions that define vector-based shapes and lines.
This allows SVG-like graphics to be created on the fly in the browser, with fallback content (like Flash?) provided to legacy browsers.
<canvas id="canvas" width="150" height="150"> fallback content</canvas>
function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }}
Sunday, July 19, 2009
![Page 33: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/33.jpg)
CSS 3The Presentation Layer:
Sunday, July 19, 2009
![Page 34: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/34.jpg)
COLOR
Sunday, July 19, 2009
![Page 35: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/35.jpg)
opacity
Browser Support:opacity
Adjusts the opacity of the selected element’s presentation on screen.
Takes values between 0.0 (fully transparent) and 1.0 (fully opaque)
div { color: #f00; opacity: 1.0; }
div { color: #f00; opacity: 0.5; }
Sunday, July 19, 2009
![Page 36: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/36.jpg)
RGBA Color
Browser Support:RGBA color
Like RGB color definitions, but allows a fourth field, defining the alpha value of the color being applied.
Like opacity, the alpha value is between 0.0 (fully transparent) and 1.0 (fully opaque).
div { color: rgb(0,255,0); }
div { color: rgba(0,255,0,0.5); }
Sunday, July 19, 2009
![Page 37: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/37.jpg)
HSL/A Color
Browser Support:HSL/A color
HSL color definitions accept three arguments: hue is a degree on a color wheel (0-360), saturation is a percentage, and lightness is a percentage.
HSLA is like HSL color, but allows a fourth field, defining the alpha value of the color being applied. See RGBA.
div { color: hsl(240,50%,50%); }
div { color: hsla(240,50%,50%,0.5); }
Sunday, July 19, 2009
![Page 38: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/38.jpg)
BACKGROUNDS
Sunday, July 19, 2009
![Page 39: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/39.jpg)
background-size
Browser Support:background-size
Defines the size at which the browser should display the specified background image. Accepts all normal size definitions as width followed by height.
In shorthand, this appears after background-position values.
div { background-size: 100px 65px; }
div { background-size: 400px 65px; }
Sunday, July 19, 2009
![Page 40: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/40.jpg)
background: url(body-top.png) top left no-repeat,url(body-bottom.png) bottom left no-repeat,url(body-middle.png) left repeat-y;
background-image
Browser Support:background-image
Allows for multiple images to be specified. The first image specified is layered closest to the top of the screen, and subsequent images are layered beneath.
Sunday, July 19, 2009
![Page 41: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/41.jpg)
BORDERS
Sunday, July 19, 2009
![Page 42: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/42.jpg)
border: 5px solid #000;border-color: #000 transparent transparent #000;
border-color
Browser Support:border-color
Allows for multiple border colors to be specified, one pixel at a time. The last specified color is repeated if necessary.
This cannot be used in the border shorthand syntax.
Sunday, July 19, 2009
![Page 43: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/43.jpg)
border-image: url(button.png) 0 12 0 12 stretch stretch;
border-image
Browser Support:border-image
Allows the border to be represented by an image, by defining which parts of the image should be used for the edges, and which should be repeated in the main part of the element.
This is difficult to represent completely, so go look it up.
border-image: url(border.png) 27 27 27 27 round round;
Sunday, July 19, 2009
![Page 44: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/44.jpg)
border-radius: 10px;
border-radius
Browser Support:border-radius
Curves the corners of the border using the radius given, often in pixels. This can be given to all corners, or only to individual corners as specified.
Firefox refers to individual corners like “border-radius-topright” while Safari (correctly) refers to it as “border-top-right-radius”.
border-top-right-radius: 10px;
Sunday, July 19, 2009
![Page 45: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/45.jpg)
box-shadow: 10px 10px 10px #333;
box-shadow
Browser Support:box-shadow
Creates a drop shadow beneath the selected element.
The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow.
Sunday, July 19, 2009
![Page 46: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/46.jpg)
TEXT
Sunday, July 19, 2009
![Page 47: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/47.jpg)
text-overflow: ellipsis;
text-overflow
Browser Support:text-overflow
If text overflows the available space, the text-overflow property defines what happens.
The value “ellipsis” appends an ellipsis character at the overflow point.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacutus es…
Sunday, July 19, 2009
![Page 48: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/48.jpg)
text-shadow: 10px 10px 10px #333;
text-shadow
Browser Support:text-shadow
Creates a drop shadow beneath the selected text.
The first argument is the horizontal offset, the second is the vertical offset, the third is the blur radius, and the final argument is the color to be used as the shadow. Multiple shadow definitions may be separated using commas.
This is sample text.
Sunday, July 19, 2009
![Page 49: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/49.jpg)
column-width: 200px;column-gap: 20px;
column-width & column-gap
Browser Support:column-width/column-gap
Breaks flowing text into multiple columns, based on the width of the container. Column width defines the width of each column, and column-gap defines the gap between columns.
Column-count can be specified in lieu of column-width.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nunc, auctor et accumsan ut, aliquam vel leo. Quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel semper dolor odio in libero. Curabitur vitae sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis
quisque dignissim tincidunt rhoncus. Duis sed velit rutrum lorem rutrum faucibus. Nam tincidunt eros at arcu vestibulum egestas. Donec fringilla, turpis in auctor luctus, orci orci vestibulum lacus, a tristique felis erat non diam. Morbi dolor massa, elementum ac iaculis quis, iaculis sed neque. Aliquam erat volutpat. Aliquam porttitor auctor massa sit amet ultrices. Maecenas quis nunc nibh, sit amet hendrerit leo. Donec a massa eget velit consectetur fermentum aliquet et eros. Vestibulum volutpat, est vitae dapibus congue, nibh augue vehicula lacus, vel semper dolor odio in libero. Curabitur vitae sem consequat purus fermentum tincidunt. Donec vestibulum felis ut metus ultrices a vulputate felis rhoncus eum ivolonortis
Sunday, July 19, 2009
![Page 50: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/50.jpg)
@font-face { font-family: Helvy; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }
p.specialFont { font-family: Helvy, sans-serif; }
@font-face
Browser Support:column-width/column-gap
Allows a font file to be associated with a font name for later use in font-family declarations.
IE supports only .eot Embedded OpenType files, while the other browsers support any TTF and OTF font files.
Sunday, July 19, 2009
![Page 51: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/51.jpg)
TRANSFORMATION
Sunday, July 19, 2009
![Page 52: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/52.jpg)
rotate
Browser Support:rotate
Rotates the selected element at the defined angle, defined in degrees.
The rotation doesn’t affect layout, and elements that are transformed are treated similarly to position:relative.
transform: rotate(30deg);
Sunday, July 19, 2009
![Page 53: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/53.jpg)
scale
Browser Support:scale
Scales the element in question based on the specified unit-less numbers given for the X and Y axes. If only one number is given, it is applied to both axes.
transform: scale(0.5,2.0);
Sunday, July 19, 2009
![Page 54: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/54.jpg)
skew
Browser Support:scale
Skews the element around the X and Y axes by the specified angles, in degrees. If it’s only one number, the Y axis is assumed to be zero. transform: skew(-30deg);
Sunday, July 19, 2009
![Page 55: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/55.jpg)
translate
Browser Support:translate
Moves the object along each axis by the length specified. The unit can be anything accepted as a length in CSS, such as px, em, percentages, etc.
transform: translate(30px, 0);
Sunday, July 19, 2009
![Page 56: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/56.jpg)
3D TRANSFORMATIONS
PERSPECTIVE The distance, in pixels, of the z=0 plane from the viewer.
MATRIX3D
ROTATE3D
SCALE3D
TRANSLATE3D
Allows creation of a 3d transformation matrix.
Rotate the matched element in three dimensions.
Performs a three-dimensional scale operation.
Allows the matched element to be moved along three axes.
Sunday, July 19, 2009
![Page 57: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/57.jpg)
BROWSER PREFIXES
Sunday, July 19, 2009
![Page 58: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/58.jpg)
FIREFOX:
SAFARI:
OPERA:
IE:
-moz-box-shadow:
-webkit-box-shadow:
-o-box-shadow:
-ms-box-shadow:
Sunday, July 19, 2009
![Page 59: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/59.jpg)
READY YET?When is it Time to Use These?
Sunday, July 19, 2009
![Page 60: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/60.jpg)
THE FUTURE
Sunday, July 19, 2009
![Page 61: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/61.jpg)
IMPLEMENTATION trumps
SPECIFICATION
Sunday, July 19, 2009
![Page 62: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/62.jpg)
PROGRESSFUL DEGRAHANCEMENT™
Sunday, July 19, 2009
![Page 63: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/63.jpg)
BUSINESS AND USER GOALS
In the end, be mindful of
Sunday, July 19, 2009
![Page 64: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/64.jpg)
CRITICISMA Healthy Dose of
Sunday, July 19, 2009
![Page 65: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/65.jpg)
MORE RESOURCES
HTML 5 Doctor http://html5doctor.com/
HTML 5 Spec
ALA Article
Bruce Lawson
Your Presenters
http://dev.w3.org/html5/spec/Overview.html
http://www.alistapart.com/articles/previewofhtml5
http://www.brucelawson.co.uk/category/ accessibility-web-standards/html5/
Feel free to follow up with Jackson & Jason
Sunday, July 19, 2009
![Page 66: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/66.jpg)
FIN
Sunday, July 19, 2009
![Page 67: Up to Speed on HTML 5 and CSS 3](https://reader033.vdocuments.net/reader033/viewer/2022051512/540dfa2c8d7f728d7e8b4b92/html5/thumbnails/67.jpg)
SpeakerRate: spkr8.com/t/1250
Get in Touch!
Twitter: @whafro & @jgarber
Sunday, July 19, 2009