html5 part ii design n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML5, part II – design PowerPoint Presentation
Download Presentation
HTML5, part II – design

Loading in 2 Seconds...

play fullscreen
1 / 14

HTML5, part II – design - PowerPoint PPT Presentation


  • 153 Views
  • Uploaded on

HTML5, part II – design. Štěpán Bechynský. Developer Evangelist Microsoft, Czech Republic. CSS3. New modules 2D Transforms Backgrounds and Borders Module Color Module Fonts Module Media Queries Module Namespaces Module Values and Units Module Selectors

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML5, part II – design' - karen-armstrong


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html5 part ii design
HTML5, part II – design

Štěpán Bechynský

Developer Evangelist

Microsoft, Czech Republic

slide2
CSS3
  • New modules
    • 2D Transforms
    • Backgrounds and Borders Module
    • Color Module
    • Fonts Module
    • Media Queries Module
    • Namespaces Module
    • Values and Units Module
    • Selectors
    • Flexible Box Layout Module
    • Multi-column Layout Module
  • Vendor prefix
    • -moz-*
    • -webkit-*
    • -ms-*
    • -o-*
2d transforms
2D Transforms
  • Elements transformed in two-dimensional space
  • Uses ms-* prefix
    • Not Candidate Recommendation
  • matrix(a,b,c,d,e,f)
  • translate(tx,[ty])
    • translateX(tx)
    • translateY(ty)
  • scale(sx,[sy])
    • scaleX(sx)
    • scaleY(sy)
  • rotate(angle)
    • skew(ax,[ay])
    • skewX(ax)
    • skewY(ay)
backgrounds and borders module
Backgrounds and Borders Module
  • background-*
  • border-radius
  • box-shadow
color module
Color Module
  • RGBA Color model
  • HSL Color Model
  • HSLA Color Model
  • Opacity Property
  • List of color keywords for CSS identical to that for SVG 1.0
fonts module
Fonts Module
  • Generic fonts can destroy page layout
  • Font support
    • TTF
    • OpenType
    • WOFF(W3C Web Fonts Working Group)
      • http://www.w3.org/TR/WOFF/
  • Google web fontsgallery
media queries module
Media Queries Module
  • Easy support for different devices
  • Query: language for screen type
selectors
Selectors
  • Structural Pseudo-Classes
    • Example: E:last-child
  • UI Element States Pseudo-Classes
    • Example: E:checked
gradients
Gradients

/* IE10 */

background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */

background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */

background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */

background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

flexible box layout module
Flexible Box Layout Module
  • Allows vertical and horizontal distribution of child elements
  • Switch on: display: -ms-box;
  • Properties
    • -ms-box-align (HorizontalAlignment)
    • -ms-box-pack (VerticalAlignment)
    • -ms-box-flex (Flexibility)
multi column layout module
Multi-column Layout Module
  • Properties
    • column-count
    • column-width
    • column-rule-width
    • column-rule-style
    • column-rule-color
    • column-gap
    • column-width
    • break-inside
scalable vector graphics
ScalableVectorGraphics
  • http://www.w3.org/TR/SVG11/
  • Separate file or part of HTML document
  • DOM of SVG can be changed byJavascript
resources
Resources
  • Books
    • Introducing HTML5 by Bruce Lawson & Remy Sharp
  • W3C
    • W3C HTML5 Specification – www.w3.org/TR/html5
    • HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htm
    • Validator –validator.w3.org/
  • Microsoft Internet Explorer 9
    • Engineering Blog – blogs.msdn.com/ie/
    • Beauty Of The Web – www.beautyoftheweb.com/experience/
    • IE Test Drive – www.ietestdrive.com
    • HTML5 Labs – html5labs.interoperabilitybridges.com/