HTML 5 OverviewName/Dept.: Lawrence HoDate: 2013.01.23
Outline(1/2)▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪ ...
Outline(2/2)▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr ...
What is HTML5?▪ HTML5 will be the new standard for HTML.▪ The previous version of HTML, HTML 4.01,  came in 1999. The web ...
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
How Did HTML5 Get Started?▪ HTML5 is a cooperation between the World Wide Web  Consortium (W3C) and the Web Hypertext Appl...
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
HTML5 New Features▪ Some of the most interesting new features in  HTML5:  • The <canvas> element for 2D drawing  • The <vi...
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
Building an HTML5 Starter Document▪ Doctype: <! DOCTYPE html>▪ Character Encoding: <meta charset="utf-8" />▪ JavaScript an...
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
HTML5 New Semantic/Structural Elements<article>      Defines an article<aside>        Defines content aside from the page ...
HTML5 New Semantic/Structural Elements<mark>       Defines marked/highlighted text<meter>      Defines a scalar measuremen...
Using the header Element to Create a Site Header▪   Here is a basic example:    <header>          <img alt="HTML5 Cookbook...
A typical header element with a site title, logo                       The header element is often the first thing        ...
Multiple header elements on one page
Using the hgroup Element to Group Headings▪ Using another new HTML5 element, the  hgroup element, you can add further  inf...
A main title and a subheader would be     inside an hgroup element.
Creating Navigation with the nav Element▪ It is used to link to other pages within the site  or to other parts of the page...
The nav Element Inside a header Element▪ You can put nav in the header as well, because  the header allows for introductor...
Multiple Navigation Groups in a            Single nav Element<nav>     <h2>Shared</h2>     <ul>          <li><a href="#">A...
Navigation Sample      Basic Navigation      The nav Element Inside a header Element      Multiple Navigation Groups in a ...
Using the New article Element▪ The article element and the section element (discussed in the next  section) are arguably t...
Basic article element with content
Grouping Content with the section Element▪ The section element is an area of content or an  area of a page that nearly alw...
Basic news page with sections highlighted   No CSS Style          Use CSS Style
Which Should You Use: article or section?▪ Section has semantic meaning; it is the  grouping of related content.▪ A sectio...
The article Elements Inside a section Element<section id="headline">     <h1>Grouping Content with the section Element</h1...
The article Elements Inside a section Element
Creating a Sidebar with the aside Element▪ The aside element is for a group of content  that is “tangentially” related to ...
Using the footer Element▪ The footer element, as its name suggests, is typically at the bottom of  the page.   <footer >  ...
Page layout with multiple footer elements
Figure and figcaption Elements▪ The figure element allows you to wrap an  image and give it a description.▪ You can associ...
Multiple Images Within figure<figure>  <img alt="October 2010 data in bar chart  format“ src="analytics-october.jpg" />  <...
Figure element used to display three images, which              share the one caption    figcaption
Marking Up the Date and Time with the time                 Element▪ The time element allows you to code dates and  times t...
Making a Native Toggle Widget with the                   details Element▪ The details element creates an interactive  open...
Example of the details Element<details open>   <summary>Lawrence Ho</summary>   <figure>        <img alt="" src="images/to...
The details element with one section open             viewed in Chrome
Highlighting Text with the mark Element▪ The mark element gives the document author a chance to  highlight, or bring atten...
The mark element used to highlight text for a                  user
s Element and cite element▪ Previously the s element was specifically for  strikethrough text.▪ In HTML5, it has been rede...
Sample of s and cite element
The ol Element▪ The ol element, used to create an ordered list,  has been redefined, so it now has three  acceptable attri...
Nested Ordered Lists<ol>   <li>Lorem ipsum dolor adipiscing elit.      <ol>          <li>Lorem ips, cetuer adipiscing elit...
Type Attribute▪ Using the type attribute, you can change the  type of numbering you get on the lists,  without the need fo...
Sample of ol element
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
Elements That Are No More▪ The following HTML 4.01 elements are removed from  HTML5:   •   acronym(use abbr; see earlier) ...
Outline▪   What is HTML5?▪   How Did HTML5 Get Started?▪   HTML5 New Features▪   Building an HTML5 Starter Document▪   HTM...
HTML5 New Form Elements<datalist>   Specifies a list of pre-defined options for input             controls<keygen>     Def...
Different input type▪ There are several new input types in HTML5  that are useful for creating forms or updating  old form...
Creating Calendar and Time Controls▪ Creating a widget has always required  JavaScript, but that is going to change.▪ date...
A Sample of datetime picker<label for="birthday">Datetime</label><input required type=" datetime " id=" datetime”name=" da...
Creating Calendar Data Picker▪ date Input Type Device and Browser Support:                 OS type        Version         ...
A Sample of Calendar Data Picker<label for="birthday">Birthday</label><input required type="date" id="birthday"name="birth...
Leveraging jQuery to Replace a Calendar<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scri...
A Sample of jQuery Calendar Data Picker▪ Internet Explorer 10 with the fallback jQuery  calendar:
Creating a Number Picker▪ The number input type is used to enter a number. It accepts only  numbers; otherwise, it will re...
A Sample of Number Picker▪ <input min="0" max="10" step="0.5"  required type="number" id="number"  name="number" />▪ The i...
Creating a Slider         (Without the Need for JavaScript)▪   The range input type generates a slider control.▪   It has ...
A Sample of range<label for="range">Volume</label><input min="0" max="10" step="0.5" requiredtype="range" id="range" name=...
Displaying Results with the output Element▪ The output element uses JavaScript to display results,  usually from a calcula...
A Sample of output Element<label for="range">Volume</label><input min="0" max="10" step="0.5" value="2" requiredtype="rang...
Creating a Color Picker▪ <input type="color">provides the user a  choice of some basic colors with the options of using  a...
A Sample of Color Picker<label for="color">Choose a page color</label><input type="color" id="color" name="color" />▪ The ...
Using Form Placeholder Text▪ Placeholder text is the text displayed inside a text  field when the form loads.▪ You can ove...
Placeholder Attribute Device and Browser                 Support            OS type        Version            Android     ...
A Sample of Placeholder Text<label for="website">Website</label><input placeholder=http://mysite.com type="url"id="website...
Creating an Autocomplete Feature with list and                     datalist▪ datalist is a new element in HTML5.▪ Combined...
Datalist Element Device and Browser Support              OS type        Version              Android          --          ...
A sample of datalist element<label for="job">Job</label><input list="joblist" required type="text" id="job" name="job" /><...
Basic Validation with the required Attribute▪ The browser will not attempt to submit the form if the  required fields are ...
A Sample of required Attribute▪ Error message for an incomplete required field in Opera 12:▪ In Chrome 23:▪ In Firefox 17:
Customizing and Styling the Form
Outline▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr to De...
HTML5 New Media Elements<audio>      Defines sound content<video>      Defines a video or movie<source>     Defines multip...
Including Video with the video Element▪ Basic Use of the video Element:<!DOCTYPE html><html lang="en"><head><meta charset=...
HTML5 and Video Codecs▪ In HTML5, three main codecs and video  formats to consider:H.264, Ogg, WebM.▪ Codecs and Browser S...
Enabling Video for All Browsers▪ Because of browser and codec issues, you  have to provide different formats of video  wit...
New Video Attributes▪ The src Attribute▪ The poster Attribute▪ The preload Attribute:  • preload="auto"  • preload="none" ...
Making Your Own Custom Controls▪ HTML5 provides a JavaScript media API for the video and audio  elements.   1.   Wrap a <d...
The samples of video element
Including Audio with the audio Element▪ Basic Example of the audio Element:<!DOCTYPE html><html lang="en"><head><meta char...
File Type and Browser SupportCodec   Android   Chrome   Firefox   IE   iOS   Opera   Safari Ogg      --       13+       4+...
Enabling Audio for All Browsers<audio controls><source src="music.mp3" type="audio/mp3" /><source src="music.ogg" type="au...
The samples of audio element
Outline▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr to De...
Canvas Overview▪ The canvas element gives you a blank surface,  which you can use to render graphics, images, and  text dy...
Canvas Overview▪ The canvas element has the standard  attributes of an HTML element.▪ Minimally, you will need the id, wid...
Getting Started▪ Setting Up the canvas Element:<!DOCTYPE html><html><head><style>canvas {   border: 1px solid #000;}</styl...
To draw on the canvas from JavaScript<canvas id="mycanvas" width="640“ height="480"></canvas><script>var canvas =document....
X and Y Coordinates▪ (X,Y) coordinate system is used to determine  the particular location or pixel that is being  updated...
Canvas Tools▪ Rectangle: Draws a rectangle at a specific  location with a specific width and height.▪ Line: Creates a line...
Laying a Grid on the Canvas▪ The canvas element uses the grid system for the basic  shape-drawing tools, effects, and tran...
A Sample of grid coordinate system▪ The canvas grid coordinate system drawn by using  the line, arc, and fillText methods:
Drawing Polygons with a Path▪ Use the line drawing and path functionality of the Canvas API to draw a  regular polygon bas...
A Sample of Polygons▪ Polygon created with 7 sides and a radius of 150 via  the path functionality:
The Samples of Cavans
Outline▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr to De...
Dealing with Internet Explorer▪ IE6, 7, and 8, by default, do not recognize the  new HTML5 elements.▪ you can programmatic...
HTML5Shiv▪ The “shiv” is designed to allow versions prior to  IE9 to recognize the HTML5 elements and allow  them to be st...
Making CSS Compatible▪ To make sure IE plays nice, you need to set  your new elements to display: block.▪ Setting Up New E...
Outline▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr to De...
Using Modernizr to Detect Features▪ Modernizr is a JavaScript library (found at  http://modernizr.com) that detects what  ...
Feature Detection with Modernizr and                   JavaScript<!DOCTYPE html><html class="no-js“ lang="en"><head>   <me...
Outline▪   HTML5 New Media Elements▪   The new <canvas> Element▪   Dealing with Internet Explorer▪   Using Modernizr to De...
New Layout and Style Techniques with CSS3▪ CSS level 3 (CSS3) is the latest iteration of the  CSS specification.▪ CSS3 Med...
CSS3 Media Queries Device and Browser              Support          OS type        Version          Android         2.3+  ...
Simple Media Query Example▪ You could have several different media queries  as you attempt to target all different types o...
Media Queries Inside a CSS Filebody {background: black; color: #fff; font: normal 62.5%/1.5tahoma, verdana, sans-serif;}h1...
Using Custom Fonts with @font-face▪ Using @font-face, you can embed your own font with just a few lines of  CSS.▪ @font-fa...
Cross-Browser @font-face@font-face {   font-family: AnagramRegular;      src: url(type/Anagram-webfont.eot);      src: url...
Making Multiple Backgrounds with CSS Gradients▪   Gradient Device and Browser Support:                            OS type ...
A simple CSS3 linear gradient
Making Buttons with CSS Gradients<style>input[type="submit"] {   background: url(images/accept.png) 8px 55% no-repeat #91B...
CSS3 button gradients
Gradients with Multiple Stopsbody {   background: -moz-linear-gradient(45deg,#000000 0%, #FFFFFF 25%, #000000 50%,#FFFFFF ...
CSS3 gradients with multiple stops
Enhancing a Site with Transformations and                       Transitionsh1 {       -webkit-transform: rotate(10deg);   ...
An image and text rotated using CSS
Animated Color Change on Mouse Hovera {      background: #fff;      border-radius: 5px;      display: block;      float: l...
Transition effects
Animated Image Zoom on Mouse Hoverimg {   background: #fff; border: 1px solid #BFBFBF;   display: block;float: left;   hei...
Image on mouse hover
CSS Animation Device and Browser Support           OS type        Version           Android         2.3+           Chrome ...
img {                             CSS Animation     position: absolute;     -webkit-animation-name: moveIt;     -webkit-an...
CSS Animation Introduction▪ -webkit/moz-animation-name: The name of  the animation you want to use▪ -webkit/moz-animation-...
CSS Animation Introduction▪ You define the animation @-webkit/moz-  keyframes MoveIt.▪ This is a simple animation so you s...
Animated Banner
Summary
Thank you for your listening.And don’t forget stretch your body…
Upcoming SlideShare
Loading in …5
×

HTML5 overview

0 views
473 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 overview

  1. 1. HTML 5 OverviewName/Dept.: Lawrence HoDate: 2013.01.23
  2. 2. Outline(1/2)▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  3. 3. Outline(2/2)▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  4. 4. What is HTML5?▪ HTML5 will be the new standard for HTML.▪ The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.▪ HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
  5. 5. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  6. 6. How Did HTML5 Get Started?▪ HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).▪ WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.▪ Some rules for HTML5 were established: • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins (like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • The development process should be visible to the public
  7. 7. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  8. 8. HTML5 New Features▪ Some of the most interesting new features in HTML5: • The <canvas> element for 2D drawing • The <video> and <audio> elements for media playback • Support for local storage • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> • New form controls, like calendar, date, time, email, url, search
  9. 9. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  10. 10. Building an HTML5 Starter Document▪ Doctype: <! DOCTYPE html>▪ Character Encoding: <meta charset="utf-8" />▪ JavaScript and CSS Links: <script src="my-javascript-file.js"></script> <link rel="stylesheet" href="my-css-file.css" />▪ HTML5 starting page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>page title</title> <script src="my-javascript-file.js"></script> <link rel="stylesheet" href="my-css-file.css" /> </head> <body> <!-- new HTML5 elements are going to go here :) --> </body>
  11. 11. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  12. 12. HTML5 New Semantic/Structural Elements<article> Defines an article<aside> Defines content aside from the page content<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it<command> Defines a command button that a user can invoke<details> Defines additional details that the user can view or hide<summary> Defines a visible heading for a <details> element<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.<figcaption> Defines a caption for a <figure> element<footer> Defines a footer for a document or section<header> Defines a header for a document or section<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
  13. 13. HTML5 New Semantic/Structural Elements<mark> Defines marked/highlighted text<meter> Defines a scalar measurement within a known range (a gauge)<nav> Defines navigation links<progress> Represents the progress of a task<ruby> Defines a ruby annotation (for East Asian typography)<rt> Defines an explanation/pronunciation of characters (for East Asian typography)<rp> Defines what to show in browsers that do not support ruby annotations<section> Defines a section in a document<time> Defines a date/time<wbr> Defines a possible line-break
  14. 14. Using the header Element to Create a Site Header▪ Here is a basic example: <header> <img alt="HTML5 Cookbook logo" src="logo.png" /> <h1><a href="#">HTML5 Cookbook</a></h1> </header>▪ You are not restricted to just one header element per page, and it does not have to be at the top of a page. <article> <header> <h1><a href="#">Chapter 1</a></h1> <p>2013.01.01</p> </header> <p>AAAAAAABBBBBBBCCCCCCC.</p> </article> <article> <header> <h1><a href="#">Chapter 2</a></h1> <p>2013.01.01</p> </header> <p>AAAAAAABBBBBBBCCCCCCC.</p> </article>
  15. 15. A typical header element with a site title, logo The header element is often the first thing on a web page, and it usually contains things like a logo, the website name, or the main site navigation.
  16. 16. Multiple header elements on one page
  17. 17. Using the hgroup Element to Group Headings▪ Using another new HTML5 element, the hgroup element, you can add further information to your header element. <header> <hgroup> <h1><a href="#">HTML5 Overview</a></h1> <h2>Delicious HTML5 recipes</h2> </hgroup> </header>
  18. 18. A main title and a subheader would be inside an hgroup element.
  19. 19. Creating Navigation with the nav Element▪ It is used to link to other pages within the site or to other parts of the page. <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Meet the team</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
  20. 20. The nav Element Inside a header Element▪ You can put nav in the header as well, because the header allows for introductory and navigational content. <header> <h1>My super HTML5 site</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> </header>
  21. 21. Multiple Navigation Groups in a Single nav Element<nav> <h2>Shared</h2> <ul> <li><a href="#">Angkor Wat</a></li> <li><a href="#">Angkor Thom</a></li> <li><a href="#">Pre Rup</a></li> </ul> <h2>Read</h2> <ul> <li><a href="#">Takeo</a></li> <li><a href="#">Bayon</a></li> <li><a href="#">Neakpean</a></li> </ul> <h2>Watched/Listened</h2> <ul> <li><a href="#">Chau Say Thevoda</a></li> <li><a href="#">Tamanon</a></li> <li><a href="#">Ta Prohm</a></li> </ul></nav>
  22. 22. Navigation Sample Basic Navigation The nav Element Inside a header Element Multiple Navigation Groups in a Single nav Element
  23. 23. Using the New article Element▪ The article element and the section element (discussed in the next section) are arguably the two most important new HTML5 structural elements, but they are also two of the most confusing. <article> <header> <h1>HTML5 saves millions!</h1> <p>32nd October 2010</p> </header> <p><strong>aaaaaaaaaa</strong> ccccccccccccccc</p> <h2>Another heading</h2> <ol> <li>bbbbbbbbbbbbbbbbbbbbbb</li> <li>dddddddddddddddddddddd</li> </ol> <blockquote><p>eeeeeeeeeeeeeeeeeee</p></blockquote> <h3>And another heading</h3> <ul> <li>fffffffffffffffffffffffffffffffff</li> <li>ggggggggggggggggggggg</li> </ul> <p>hhhhhhhhhhhhhhhhhhhhhhhhh</p> </article>
  24. 24. Basic article element with content
  25. 25. Grouping Content with the section Element▪ The section element is an area of content or an area of a page that nearly always requires a heading. <h1>Loads News</h1> <section> <h1>Sports News</h1> <p>Well put sports news here.</p> </section> <section> <h1>Entertainment News</h1> <p>Entertainment news will go here.</p> </section> <section> <h1>Nerdy News</h1> <p>News for nerds will go in this section of the page.</p> </section>
  26. 26. Basic news page with sections highlighted No CSS Style Use CSS Style
  27. 27. Which Should You Use: article or section?▪ Section has semantic meaning; it is the grouping of related content.▪ A section can have articles within it.▪ If you think the content would make sense on its own, then it is an article.
  28. 28. The article Elements Inside a section Element<section id="headline"> <h1>Grouping Content with the section Element</h1> <article> <header> <h2><a href="#">This is our most important article</a></h2> <p>10th November 2013</p> <p>Pellentesque habitant morbi tristique fames ac turpis egestas.</p> </header> </article> <article> <header> <h1>Highlighting Text with the mark Element</h1> <p>The modern name, <mark>Angkor Wat</mark> meaning "city“….</p> </header> </article> <artical> <header> <h1>The nav Element Inside a header Element</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> </header> </artical></section>
  29. 29. The article Elements Inside a section Element
  30. 30. Creating a Sidebar with the aside Element▪ The aside element is for a group of content that is “tangentially” related to its surrounding content, such as a list of most popular posts, blog categories, or recent comments.▪ Using aside to Mark Up a “Related Links” Section: Sidebar
  31. 31. Using the footer Element▪ The footer element, as its name suggests, is typically at the bottom of the page. <footer > <small>&copy; Copyright HTML5 2013</small> </footer>▪ Like the header element, you can use footer more than once on a page. You can put a footer inside an article. <article> <h1>10 things about HTML5</h1> <footer> <p>aaaaabbbbbbcccccccddd</p> </footer> <p><strong>Pellentesque habitant morbi tristique</strong>...</p> <!-- general content --> <footer> <p>aaaaannnkjojhu8jid</p> </footer> </article> <footer> <small>&copy; Copyright HTML5 Cookbook 2011</small> </footer>
  32. 32. Page layout with multiple footer elements
  33. 33. Figure and figcaption Elements▪ The figure element allows you to wrap an image and give it a description.▪ You can associate images with a caption, using figcaption.▪ figure does not always have to include an image.▪ Image with Caption: <figure> <img alt="Bar chart" src="analytics.gif" /> <figcaption> Website analytics for October 2010 </figcaption> </figure>
  34. 34. Multiple Images Within figure<figure> <img alt="October 2010 data in bar chart format“ src="analytics-october.jpg" /> <img alt="November 2010 data in bar chart format“ src="analytics-november.jpg" /> <img alt="December 2010 data in bar chart format“ src="analytics-december.jpg" /> <figcaption> Comparative website analytics for Winter 2010(October, November, December) </figcaption></figure>
  35. 35. Figure element used to display three images, which share the one caption figcaption
  36. 36. Marking Up the Date and Time with the time Element▪ The time element allows you to code dates and times that are readable by machines but are displayed to users in a readable fashion.▪ The time element has two optional attributes: • datetime • Pubdate<article> <footer> <p>This news article was published on <time pubdate datetime="2011-04- 01T16:00">1st April 2011 at 4pm</time>by <a href="#">Lawrence Ho</a></p> </footer></article>
  37. 37. Making a Native Toggle Widget with the details Element▪ The details element creates an interactive open/close toggle effect, without the need for JavaScript and/or CSS.▪ The summary element can be used within details to represent the summary of the content.▪ details has an optional attribute: open. If this is true, it will show the details element open by default.
  38. 38. Example of the details Element<details open> <summary>Lawrence Ho</summary> <figure> <img alt="" src="images/tom-and-luce.jpg" /> <figcaption>Lawrence and her friends</figcaption> </figure> <p>Pellentesque habitant morbi turpis egestas.</p> <p>Pellentesque habsuada fames ac turpis egestas.</p> <p>Pellentesque habitant malesc turpis egestas.</p> <p>Pellentesque habiet malesrpis egestas.</p></details><details> <summary>MitraStar</summary> <figure> <img alt="" src="chuck.jpg" /> <figcaption>MitraStar</figcaption> </figure> <p>Pellentesqetfames ac turpis egestas.</p></details>
  39. 39. The details element with one section open viewed in Chrome
  40. 40. Highlighting Text with the mark Element▪ The mark element gives the document author a chance to highlight, or bring attention to, some text in the document.▪ The mark Element with Additional CSS:<style> mark {background-color: red ; font-weight:bold;}</style><article> <header> <h1>Something in Latin</h1> </header> <p>Pellentesque et netus et malesuada fames acturpis egestas. <mark>Vestibulum tortor quam</mark>,feugiat vitae, ultricies eget, tempor sit amet, ante.Donec d leo. </p></article>
  41. 41. The mark element used to highlight text for a user
  42. 42. s Element and cite element▪ Previously the s element was specifically for strikethrough text.▪ In HTML5, it has been redefined and is now used to represent content that is no longer correct or relevant.▪ cite represents the title of a work, such as a book or a song.
  43. 43. Sample of s and cite element
  44. 44. The ol Element▪ The ol element, used to create an ordered list, has been redefined, so it now has three acceptable attributes: • start • reversed • Type▪ Reversed Ordered List: <h1>My favorite colors</h1> <ol reversed> <li>Red</li> <li>Green</li> <li>Blue</li> </ol>
  45. 45. Nested Ordered Lists<ol> <li>Lorem ipsum dolor adipiscing elit. <ol> <li>Lorem ips, cetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Lorem ipsum adipiscing elit. <ol> <li>Aliquam eu risus.</li> <li>Vestibulum a dapibus neque.</li> </ol> </li> <li>Vestibulum auctor dapibus neque.</li> </ol> </li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li></ol>
  46. 46. Type Attribute▪ Using the type attribute, you can change the type of numbering you get on the lists, without the need for CSS. You can choose from five types: • type="1" = 1, 2, 3,4, 5 • type="a" = a, b, c, d, e • type="A" = A, B, C, D, E • type="i" = i, ii, iii, iv, v • type="I" = I, II, III, IV, V
  47. 47. Sample of ol element
  48. 48. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  49. 49. Elements That Are No More▪ The following HTML 4.01 elements are removed from HTML5: • acronym(use abbr; see earlier) • applet(use object) • basefont(use CSS for presentation) • big(use CSS for presentation) • center(use CSS for presentation) • frame(though iframestill exists) • frameset • noframes • font(use CSS for presentation) • strike(depending on the content, use sor del) • tt(use CSS for presentation) • u(use CSS for presentation)
  50. 50. Outline▪ What is HTML5?▪ How Did HTML5 Get Started?▪ HTML5 New Features▪ Building an HTML5 Starter Document▪ HTML5 New Semantic/Structural Elements▪ Elements That Are No More▪ HTML5 New Form Elements
  51. 51. HTML5 New Form Elements<datalist> Specifies a list of pre-defined options for input controls<keygen> Defines a key-pair generator field (for forms)<output> Defines the result of a calculation
  52. 52. Different input type▪ There are several new input types in HTML5 that are useful for creating forms or updating old forms: • <input required type="email" id="email" name="email" /> • <input required type="tel" id="tel" name="tel" /> • <input required type="url" id="url" name="url" /> • <input required type="search" id="search" name="search" /> • <input required type="date" id="birthday" name="birthday" />
  53. 53. Creating Calendar and Time Controls▪ Creating a widget has always required JavaScript, but that is going to change.▪ datetime Input Type Device and Browser Support: OS type Version Android -- Chrome -- Firefox -- Internet Explore -- iOS Safari 5.0+ Opera 10.0+ Safari --
  54. 54. A Sample of datetime picker<label for="birthday">Datetime</label><input required type=" datetime " id=" datetime”name=" datetime " />▪ The input type=”datetime” element in Opera 12 provides the user with a calendar date picker:
  55. 55. Creating Calendar Data Picker▪ date Input Type Device and Browser Support: OS type Version Android -- Chrome 13.0+ Firefox -- Internet Explore -- iOS Safari 5.0+ Opera 10.0+ Safari --
  56. 56. A Sample of Calendar Data Picker<label for="birthday">Birthday</label><input required type="date" id="birthday"name="birthday" />▪ The input type=”date” element in Google Chrome23 provides the user with a calendar date picker:
  57. 57. Leveraging jQuery to Replace a Calendar<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script><link rel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" media="screen" /><script> $(function(){ function inputSupport() { var input = document.createElement("input"); input.setAttribute("type", "date"); var val = (input.type !== "text"); delete input; return val; } if (!inputSupport()) { //alert("the date input type is not supported"); $(input[type=date]).datepicker({ dateFormat: yy-mm-dd // this format is the same format as inthe HTML5 Specification }); } });</script>
  58. 58. A Sample of jQuery Calendar Data Picker▪ Internet Explorer 10 with the fallback jQuery calendar:
  59. 59. Creating a Number Picker▪ The number input type is used to enter a number. It accepts only numbers; otherwise, it will return a validation error.▪ It allows the min, max, and step attributes so you can limit the number range to suit your information needs.▪ The step attribute allows you to specify the increment values that can be entered.▪ Number Picker Device and Browser Support: OS type Version Android -- Chrome 11.0+ Firefox -- Internet Explore -- iOS Safari -- Opera 10.0+ Safari 5.1+
  60. 60. A Sample of Number Picker▪ <input min="0" max="10" step="0.5" required type="number" id="number" name="number" />▪ The input type=”number” element displayed in Google Chrome 23:
  61. 61. Creating a Slider (Without the Need for JavaScript)▪ The range input type generates a slider control.▪ It has no text area for the user to type into.▪ It can use the min, max, and step attributes.▪ Slider Device and Browser Support: OS type Version Android -- Chrome 10.0+ Firefox -- Internet Explore 10.0+ iOS Safari 5.0+ Opera 10.0+ Safari 5.0+
  62. 62. A Sample of range<label for="range">Volume</label><input min="0" max="10" step="0.5" requiredtype="range" id="range" name="range" /> Chrome23 Firefox17 Opera12 IE10
  63. 63. Displaying Results with the output Element▪ The output element uses JavaScript to display results, usually from a calculation or from a script.▪ output Element Device and Browser Support: OS type Version Android -- Chrome 10.0 Firefox 4.0 Internet Explore 10.0+ iOS Safari 4.0 Opera 10.0+ Safari 5.0
  64. 64. A Sample of output Element<label for="range">Volume</label><input min="0" max="10" step="0.5" value="2" requiredtype="range" id="range" name="range" /><output onforminput="value=range.value"></output>▪ The output element used to display the value of the range input type in Opera 12:▪ In Google Chrome 23:
  65. 65. Creating a Color Picker▪ <input type="color">provides the user a choice of some basic colors with the options of using a color picker.▪ Color Picker Device and Browser Support: OS type Version Android -- Chrome 13.0+ Firefox -- Internet Explore -- iOS Safari -- Opera 10.0+ Safari --
  66. 66. A Sample of Color Picker<label for="color">Choose a page color</label><input type="color" id="color" name="color" />▪ The input type=”color” in Opera 12:▪ In Google Chrome 23:
  67. 67. Using Form Placeholder Text▪ Placeholder text is the text displayed inside a text field when the form loads.▪ You can override the text color in Mozilla and WebKit browsers by using the following CSS: Input::-webkit-input-placeholder {color: red;} input:-moz-placeholder {color: red;}
  68. 68. Placeholder Attribute Device and Browser Support OS type Version Android 2.2 Chrome 9.0+ Firefox 4.0+ Internet Explore 10.0+ iOS Safari -- Opera 10.0+ Safari --
  69. 69. A Sample of Placeholder Text<label for="website">Website</label><input placeholder=http://mysite.com type="url"id="website" name="website" />▪ The placeholder attribute in Chrome23:▪ In Firefox17:▪ In Opera12:
  70. 70. Creating an Autocomplete Feature with list and datalist▪ datalist is a new element in HTML5.▪ Combined with the list attribute, it is used to provide a predefined list of, making the process of creating a list seem like an autocomplete form.▪ Users don’t necessarily have to choose from the predefined options; they can type their own answer if they wanted.
  71. 71. Datalist Element Device and Browser Support OS type Version Android -- Chrome 13.0+ Firefox 4.0+ Internet Explore 10.0+ iOS Safari -- Opera 10.0+ Safari --
  72. 72. A sample of datalist element<label for="job">Job</label><input list="joblist" required type="text" id="job" name="job" /><datalist id="joblist"> <option label="Space Cowboy" value="Space Cowboy"> <option label="Web developer" value="Web developer"> <option label="Web designer" value="Web designer"> <option label=“Nurse" value=“Nurse"></datalist>▪ The datalist element used to provide autocomplete options in Firefox 17:
  73. 73. Basic Validation with the required Attribute▪ The browser will not attempt to submit the form if the required fields are empty.▪ In browsers that support this attribute, if required fields are empty, an error will be shown.▪ Required Attribute Device and Browser Support: OS type Version Android -- Chrome 10.0+ Firefox 4.0+ Internet Explore 10.0+ iOS Safari -- Opera 11.0+ Safari 5.0
  74. 74. A Sample of required Attribute▪ Error message for an incomplete required field in Opera 12:▪ In Chrome 23:▪ In Firefox 17:
  75. 75. Customizing and Styling the Form
  76. 76. Outline▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  77. 77. HTML5 New Media Elements<audio> Defines sound content<video> Defines a video or movie<source> Defines multiple media resources for <video> and <audio><embed> Defines a container for an external application or interactive content (a plug-in)<track> Defines text tracks for <video> and <audio>
  78. 78. Including Video with the video Element▪ Basic Use of the video Element:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic Use of the Video Element</title></head><body> <video src="mymovie.mp4"></video> <!--video is a self-closing element so can also be used as: <video src="mymovie.mp4" /> --></body></html>
  79. 79. HTML5 and Video Codecs▪ In HTML5, three main codecs and video formats to consider:H.264, Ogg, WebM.▪ Codecs and Browser Support: Codec Android Chrome Firefox IE iOS Opera Safari H.264 2.3 13+ -- 9+ 4+ -- 5+ Ogg -- 13+ 5+ -- -- 11+ -- WebM -- 13+ 5+ -- -- 11+ --
  80. 80. Enabling Video for All Browsers▪ Because of browser and codec issues, you have to provide different formats of video within the one video element.▪ Using the Source Element to Display Different Video Formats: <video width="640" height="480" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> </video>
  81. 81. New Video Attributes▪ The src Attribute▪ The poster Attribute▪ The preload Attribute: • preload="auto" • preload="none" • preload="metadata"▪ The autoplay Attribute▪ The controls Attribute
  82. 82. Making Your Own Custom Controls▪ HTML5 provides a JavaScript media API for the video and audio elements. 1. Wrap a <div id="video-wrapper"> around the video element, and add <div id="controls"> 2. Declare the video element as an object so it can be referenced, and then remove the default browser controls. 3. When the video is ready to play, the Play button is enabled. 4. Add functionsand listenersfor the buttons, other controls, and displays.
  83. 83. The samples of video element
  84. 84. Including Audio with the audio Element▪ Basic Example of the audio Element:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic Audio Example</title></head><body><audio src="music.mp3" controls /></body></html>
  85. 85. File Type and Browser SupportCodec Android Chrome Firefox IE iOS Opera Safari Ogg -- 13+ 4+ -- -- 11+ -- MP3 2.3 13+ -- 9+ 4+ -- 5+ WAV -- -- -- -- -- -- --
  86. 86. Enabling Audio for All Browsers<audio controls><source src="music.mp3" type="audio/mp3" /><source src="music.ogg" type="audio/ogg" /></audio>▪ The audio element does not need height or width attributes, but you can apply a height and width using CSS:audio {display: block; width: 90px; height: 28px;}
  87. 87. The samples of audio element
  88. 88. Outline▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  89. 89. Canvas Overview▪ The canvas element gives you a blank surface, which you can use to render graphics, images, and text dynamically.▪ The version of each browser that supports the canvas element: OS type Version Android 2.1+ Chrome 10.0+ Firefox 3.6+ Internet Explore 9.0+ iOS Safari 3.2+ Opera 10.6+ Safari 3.2+
  90. 90. Canvas Overview▪ The canvas element has the standard attributes of an HTML element.▪ Minimally, you will need the id, width, and height.▪ The canvas element can be styled like any other element through CSS.▪ You could also add a background color or other styles.
  91. 91. Getting Started▪ Setting Up the canvas Element:<!DOCTYPE html><html><head><style>canvas { border: 1px solid #000;}</style></head><body><canvas id="myCanvas" width="640" height="480"></canvas></body></html>
  92. 92. To draw on the canvas from JavaScript<canvas id="mycanvas" width="640“ height="480"></canvas><script>var canvas =document.getElementById(mycanvas).getContext(2d);</script>▪ The getContext method can be used to verify your JavaScript and determine whether the current browser supports the canvas drawing.
  93. 93. X and Y Coordinates▪ (X,Y) coordinate system is used to determine the particular location or pixel that is being updated.▪ These coordinates are used with the various tools to reference starting points, end points, and other locations.
  94. 94. Canvas Tools▪ Rectangle: Draws a rectangle at a specific location with a specific width and height.▪ Line: Creates a line from point A to point B.▪ Path: Creates a path using one or more lines or curves.▪ Arc: Creates an arc given particular dimensions and employed to also create circles▪ Curve: Creates one of two types of curves: Bezier or Quadratic
  95. 95. Laying a Grid on the Canvas▪ The canvas element uses the grid system for the basic shape-drawing tools, effects, and transformations.▪ Use two of the basic shape methods, line and arc.▪ fillText, that allows the JavaScript to apply text to the canvas element.▪ Make the grid visible by following these steps:1. Create a blank HTML page with the html body tags including the canvas opening and closing tags, and fallback text in between.2. Add the style section with the canvas id style.
  96. 96. A Sample of grid coordinate system▪ The canvas grid coordinate system drawn by using the line, arc, and fillText methods:
  97. 97. Drawing Polygons with a Path▪ Use the line drawing and path functionality of the Canvas API to draw a regular polygon based on a number of sides and radius provided by the user.▪ The polygons can be created by following the steps: 1. Create the page with the style and body tags for the canvas. 2. Add the input fields for the number of sides and radius along with the button to trigger the drawing of the polygon. 3. Add the init function, global variables, and load event handler to set the global references to the canvas and context. 4. Add the drawPolygon function, which is the worker function for drawing the actual regular polygon.
  98. 98. A Sample of Polygons▪ Polygon created with 7 sides and a radius of 150 via the path functionality:
  99. 99. The Samples of Cavans
  100. 100. Outline▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  101. 101. Dealing with Internet Explorer▪ IE6, 7, and 8, by default, do not recognize the new HTML5 elements.▪ you can programmatically create them through JavaScript as part of the DOM, as in this example: <script> document.createElement(article); document.createElement(section); //and so on </script>
  102. 102. HTML5Shiv▪ The “shiv” is designed to allow versions prior to IE9 to recognize the HTML5 elements and allow them to be styled using CSS.▪ Using the HTML5 Shiv: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk /html5.js"></script> <![endif]--> <!-- put CSS after the shiv --> </head>
  103. 103. Making CSS Compatible▪ To make sure IE plays nice, you need to set your new elements to display: block.▪ Setting Up New Elements in CSS: article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  104. 104. Outline▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  105. 105. Using Modernizr to Detect Features▪ Modernizr is a JavaScript library (found at http://modernizr.com) that detects what HTML5 and CSS3 features the browser supports.▪ It does not fill in the gaps and add the missing functionality.▪ The Modernizr library is simple to use and has been integrated into major and minor sites around the world.
  106. 106. Feature Detection with Modernizr and JavaScript<!DOCTYPE html><html class="no-js“ lang="en"><head> <meta charset="utf-8"> <title>Lets go Modernizr</title> <script src="modernizr.js"></script> <script> if (Modernizr.sessionstorage) { alert(SessionStorage is supported.); } else { alert(SessionStorage is not supported.); } </script></head><body></body></html>
  107. 107. Outline▪ HTML5 New Media Elements▪ The new <canvas> Element▪ Dealing with Internet Explorer▪ Using Modernizr to Detect Features▪ CSS3 Overview
  108. 108. New Layout and Style Techniques with CSS3▪ CSS level 3 (CSS3) is the latest iteration of the CSS specification.▪ CSS3 Media Queries gives you the ability to target specific screen widths, heights, and even orientation, so you can target smartphones like the iPhone or Android phone, as well as new tablet devices like the iPad, all with CSS.
  109. 109. CSS3 Media Queries Device and Browser Support OS type Version Android 2.3+ Chrome 13.0+ Firefox 4.0+ Internet Explore 9.0+ iOS Safari 4.0+ Opera 11.0+ Safari 5.0+
  110. 110. Simple Media Query Example▪ You could have several different media queries as you attempt to target all different types of devices, resolutions, and screen orientation.<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="smartphone.css" /><link rel="stylesheet" media="screen and (min-width:480px)" href="screen.css" />
  111. 111. Media Queries Inside a CSS Filebody {background: black; color: #fff; font: normal 62.5%/1.5tahoma, verdana, sans-serif;}h1 {font-size: 2em;}p {font-size: 1.4em;}/* styles for smartphones and very small screen resolution */@media only screen and (min-width: 320px) and (max-width: 400px){body {background: blue;}}/* styles for screen resolutions bigger than smartphones butsmaller or equal to 1024px */@media only screen and (min-width: 401px) and (max-width: 1024px){body {background: red;}}/* styles for screen resolutions for a very wide resolution */@media only screen and (min-width: 2000px){body {background: green;}}
  112. 112. Using Custom Fonts with @font-face▪ Using @font-face, you can embed your own font with just a few lines of CSS.▪ @font-face in Its Simplest Form: <style> @font-face { font-family: Anagram; src: url(anagram.ttf); } h1 { font-family: Anagram, Tahoma, Verdana, sans-serif; font-size: 9em; } </style> <header role="banner"> <hgroup> <h1>Loads of News</h1> <h2>Bringing you all kinds of news!</h2> </hgroup> </header>
  113. 113. Cross-Browser @font-face@font-face { font-family: AnagramRegular; src: url(type/Anagram-webfont.eot); src: url(type/Anagram-webfont.eot?#iefix) format(embedded-opentype), url(type/Anagram-webfont.woff) format(woff), url(type/Anagram-webfont.ttf) format(truetype), url(type/Anagram-webfont.svg#webfontCiw7vqzS) format(svg);}
  114. 114. Making Multiple Backgrounds with CSS Gradients▪ Gradient Device and Browser Support: OS type Version Android 2.3+ Chrome 13.0+ Firefox 4.0+ Internet Explore -- iOS Safari 4.0+ Opera 11.0+ Safari 5.0+▪ Simple CSS Linear Gradient:body { background: url(gradient.gif); /* for browsers that cant do gradients */ background: -moz-linear-gradient(white, gray); background: -webkit-linear-gradient(white, gray); background: -linear-gradient(white, gray);}
  115. 115. A simple CSS3 linear gradient
  116. 116. Making Buttons with CSS Gradients<style>input[type="submit"] { background: url(images/accept.png) 8px 55% no-repeat #91BD09; background: url(images/accept.png) 8px 55% no-repeat, -webkit-linear-gradient(#91BD09, #578730); background: url(images/accept.png) 8px 55% no-repeat, -moz-linear-gradient(#91BD09, #578730); background: url(images/accept.png) 8px 55% no-repeat, -linear-gradient(#91BD09, #578730);}input[type=submit]:hover { box-shadow: 0px 0px 25px #7ab526;}</style>
  117. 117. CSS3 button gradients
  118. 118. Gradients with Multiple Stopsbody { background: -moz-linear-gradient(45deg,#000000 0%, #FFFFFF 25%, #000000 50%,#FFFFFF 75%, #000000 100%); background: -webkit-linear-gradient(45deg,#000000 0%, #FFFFFF 25%, #000000 50%,#FFFFFF 75%, #000000 100%); background: -linear-gradient(45deg,#000000 0%, #FFFFFF 25%, #000000 50%,#FFFFFF 75%, #000000 100%);}
  119. 119. CSS3 gradients with multiple stops
  120. 120. Enhancing a Site with Transformations and Transitionsh1 { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}figure { background: #fff; border: 1px solid #BFBFBF; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); display: block; float: right; margin: 20px 20px 50px 50px; padding: 5px; text-align: center; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg);}
  121. 121. An image and text rotated using CSS
  122. 122. Animated Color Change on Mouse Hovera { background: #fff; border-radius: 5px; display: block; float: left; padding: 5px; text-align: center; width: 125px; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in;}a:hover { background: #000; color: #fff;}
  123. 123. Transition effects
  124. 124. Animated Image Zoom on Mouse Hoverimg { background: #fff; border: 1px solid #BFBFBF; display: block;float: left; height: 125px;margin: 0 10px 0 0; padding: 5px;width: 125px; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;}img:hover { -webkit-transform: rotate(10deg) scale(2); -moz-transform: rotate(10deg) scale(2); -o-transform: rotate(10deg) scale(2); -ms-transform: rotate(10deg) scale(2); transform: rotate(10deg) scale(2);}
  125. 125. Image on mouse hover
  126. 126. CSS Animation Device and Browser Support OS type Version Android 2.3+ Chrome 13.0+ Firefox 5.0+ Internet Explore -- iOS Safari 4.0+ Opera -- Safari 5.0+
  127. 127. img { CSS Animation position: absolute; -webkit-animation-name: moveIt; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: moveIt; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear;}@-webkit-keyframes moveIt { from { left: 0; -webkit-transform:rotate(0deg); } to { left: 100%; -webkit-transform:rotate(360deg); }}keyframes moveIt { from { left: 0; transform:rotate(0deg); } to { left: 100%; transform:rotate(360deg); }}
  128. 128. CSS Animation Introduction▪ -webkit/moz-animation-name: The name of the animation you want to use▪ -webkit/moz-animation-duration: How long the animation will last▪ -webkit/moz-animation-iteration- count:How many times the animation will repeat▪ -webkit/moz-animation-timing- function:The type of animation; choose from ease, linear, ease-in, ease-out, ease-in-out, and a customcubic-bezier
  129. 129. CSS Animation Introduction▪ You define the animation @-webkit/moz- keyframes MoveIt.▪ This is a simple animation so you start with a from property and end with a to value.▪ In these properties, you are using normal CSS to move the image and also rotate it.
  130. 130. Animated Banner
  131. 131. Summary
  132. 132. Thank you for your listening.And don’t forget stretch your body…

×