Advanced HTML & CSS
Techniques for Developing
Webkit Mobile Applications

                                Michael T. Smith...
Who I Am?
Who I Am?
- Senior Developer, Magnani Caruso Dutton
Who I Am?
- Senior Developer, Magnani Caruso Dutton
- Discover Financial Services, AT&T, London 2012
Who I Am?
- Senior Developer, Magnani Caruso Dutton
- Discover Financial Services, AT&T, London 2012
- Full Time Web Devel...
Who I Am?
- Senior Developer, Magnani Caruso Dutton
- Discover Financial Services, AT&T, London 2012
- Full Time Web Devel...
iPhone, Pre, Android?
iPhone, Pre, Android?
- iPhone, iPod touch?
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
  - 1,500,000 by end of year (?)
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
  - 1,500,000 by end of year (?)
- A...
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
  - 1,500,000 by end of year (?)
- A...
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
  - 1,500,000 by end of year (?)
- A...
iPhone, Pre, Android?
- iPhone, iPod touch?
  - More than 45,000,000 sold
- Palm Pre?
  - 1,500,000 by end of year (?)
- A...
WebKit
WebKit
- WebKit browser engine across all three platforms
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
- Some differences
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
- Some differences
- Progressive...
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
- Some differences
- Progressive...
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
- Some differences
- Progressive...
WebKit
- WebKit browser engine across all three platforms
- Build for one -- test for all
- Some differences
- Progressive...
Webkit Background
Webkit Background
- Actively developed, open source browser engine
Webkit Background
- Actively developed, open source browser engine
- Dave Hyatt (http://surfingsafari.com),
  Safari & Web...
Webkit Background
- Actively developed, open source browser engine
- Dave Hyatt (http://surfingsafari.com),
  Safari & Web...
Let’s begin...
“Web Application” Basics
“Web Application” Basics
- Two forms:
“Web Application” Basics
- Two forms:
  - Web Application
“Web Application” Basics
- Two forms:
  - Web Application
    - the original, non-native answer to the SDK
“Web Application” Basics
- Two forms:
  - Web Application
    - the original, non-native answer to the SDK
  - Web-based A...
“Web Application” Basics
- Two forms:
  - Web Application
    - the original, non-native answer to the SDK
  - Web-based A...
“Web Application” Basics




Web-based App     Web App
“Web Application” Basics
“Web Application” Basics
- Form is determined by user and developer
“Web Application” Basics
- Form is determined by user and developer
- User must choose to “Save to Home Screen”
“Web Application” Basics
- Form is determined by user and developer
- User must choose to “Save to Home Screen”
- Develope...
HTML
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">


<link rel="apple-touch-startup-image" href="/startup.png">
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">


<link rel="apple-touch-startup-image" href="/startup.png">


...
HTML
<meta name="apple-mobile-web-app-status-bar-style"
      content="[default|black|black-translucent]">
HTML
<meta name="apple-mobile-web-app-status-bar-style"
      content="[default|black|black-translucent]">




      defau...
HTML
<meta name="apple-mobile-web-app-status-bar-style"
      content="[default|black|black-translucent]">




      defau...
HTML
<meta name="apple-mobile-web-app-status-bar-style"
      content="[default|black|black-translucent]">




      defau...
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">


<link rel="apple-touch-startup-image" href="/startup.png">


...
HTML
<meta name="viewport" content ="width = [200 to 10,000 || device-width]">

<meta name="viewport" content ="height = [...
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">


<link rel="apple-touch-startup-image" href="/startup.png">


...
HTML
<link rel="apple-touch-icon" href="/custom_icon.png">


<link rel="apple-touch-startup-image" href="/startup.png">


...
...which brings us
   to the CSS...
WebKit CSS Support
WebKit CSS Support
- WebKit’s CSS support is spectacular.
WebKit CSS Support
- WebKit’s CSS support is spectacular.
- Large subset of CSS 2.1 Specification
WebKit CSS Support
- WebKit’s CSS support is spectacular.
- Large subset of CSS 2.1 Specification
- Portions of CSS 3 Spec...
WebKit CSS Support
- WebKit’s CSS support is spectacular.
- Large subset of CSS 2.1 Specification
- Portions of CSS 3 Spec...
WebKit CSS Support
- WebKit’s CSS support is spectacular.
- Large subset of CSS 2.1 Specification
- Portions of CSS 3 Spec...
border                             opacity                     counter-reset             -webkit-appearance
           bor...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-border-radius
-webkit-border-radius
- Rounds the corners of a box
-webkit-border-radius
-webkit-border-radius
-webkit-border-radius: radius;
-webkit-border-radius: horizontal_radius
    vertical_radius;
-webkit-border-radius
-webkit-border-radius: radius;
-webkit-border-radius: horizontal_radius
    vertical_radius;

-webki...
-webkit-border-radius
-webkit-border-radius
-webkit-border-radius
         header #information {
             display: block;
             position: absolute;
       ...
-webkit-border-radius
         header #information {
             display: block;
             position: absolute;
       ...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-box-shadow
-webkit-box-shadow
   (text-shadow)
-webkit-box-shadow
        (text-shadow)
- Simple shadow effects
- Very similar to layer effects in Photoshop
- Properties...
-webkit-box-shadow
       (text-shadow)
text-shadow: color x_offset y_offset
    blur_radius;
-webkit-box-shadow: x_offset...
text-shadow
   header h1 {
       display: block;
       position: relative;
       top: 9px;
       margin: 0;
       pad...
text-shadow
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-gradient
-webkit-gradient
- Not actually a rule — A “CSS Property Function”
- Used anywhere a url() function can be used
- ‘Experim...
-webkit-gradient
-webkit-gradient
-webkit-gradient(type,
    start_point, end_point,
    stops
);
-webkit-gradient
-webkit-gradient(type,
    start_point, end_point,
    stops
);


-webkit-gradient(type,
    inner_center...
-webkit-gradient
-webkit-gradient(linear,
    start_point, end_point,
    color-stop(position, color)
);


-webkit-gradien...
-webkit-gradient
    background: -webkit-gradient(linear,
        left top, left bottom,
        color-stop(0.00, #B8B8B7)...
-webkit-gradient
    background: -webkit-gradient(linear,
        left top, left bottom,
        color-stop(0.00, #B8B8B7)...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-mask
-webkit-mask
- Alpha-level based masks
-webkit-mask
- Alpha-level based masks
- Knock out portions of a box with a pattern (image,
  gradient, etc.)
-webkit-mask
- Alpha-level based masks
- Knock out portions of a box with a pattern (image,
  gradient, etc.)
- Works in a...
-webkit-mask
- Alpha-level based masks
- Knock out portions of a box with a pattern (image,
  gradient, etc.)
- Works in a...
-webkit-mask
- Alpha-level based masks
- Knock out portions of a box with a pattern (image,
  gradient, etc.)
- Works in a...
-webkit-mask
- Alpha-level based masks
- Knock out portions of a box with a pattern (image,
  gradient, etc.)
- Works in a...
-webkit-mask
-webkit-mask
- Layers alpha channel masks on to objects
-webkit-mask
- Layers alpha channel masks on to objects
- Can clip complex shapes based on a grayscale
  image (even -webk...
-webkit-mask
- Layers alpha channel masks on to objects
- Can clip complex shapes based on a grayscale
  image (even -webk...
-webkit-mask
  -webkit-mask: attachment, clip, origin,
  image, repeat, composite, box-image;

-attachment: Allows the mas...
-webkit-mask
 border: 1px solid #C0C8CC;
 border-left: 2px solid #C0C8CC;

 -webkit-border-top-right-radius: 6px;
        ...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-transition
-webkit-transition
- Basic CSS transition
-webkit-transition
- Basic CSS transition
- Specified by property
-webkit-transition
- Basic CSS transition
- Specified by property
- Similar (but simplified) timing functions to a
  tween...
-webkit-transition
-webkit-transition: property duration
    timing_function delay;
-webkit-transition
-webkit-transition: property duration
    timing_function delay;

-webkit-transition-property: property...
-webkit-transition
-webkit-transition
       #toDoInfo {
           position: absolute;
           left: 10px;
           top: -320px;
      ...
-webkit-transition
-webkit-transition


  linear
-webkit-transition


  linear     ease
-webkit-transition


        linear   ease




ease-in-out
-webkit-transition


        linear              ease




ease-in-out      ease-out
-webkit-transition


        linear              ease




ease-in-out      ease-out     ease-in
-webkit-transition
-webkit-transition
- cubic-bezier() CSS Property function can create
  custom “tweens”
-webkit-transition
- cubic-bezier() CSS Property function can create
  custom “tweens”
-webkit-transition
- cubic-bezier() CSS Property function can create
  custom “tweens”


-webkit-transition-timing-functio...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-transform
-webkit-transform
- Allows 3D and Flat transformations of objects
-webkit-transform
- Allows 3D and Flat transformations of objects
- Simple interface
-webkit-transform
- Allows 3D and Flat transformations of objects
- Simple interface
- Customizable (matrix) transformatio...
-webkit-transform
-webkit-transform: function(param);
-webkit-transform
 -webkit-transform: function(param);

  matrix          scale         translate
 matrix3d       scale3d ...
-webkit-transform
 -webkit-transform: function(param);

  matrix          scale         translate
 matrix3d       scale3d ...
-webkit-border-radius
 -webkit-box-shadow
   -webkit-gradient
    -webkit-mask
  -webkit-transition
  -webkit-transform
  ...
-webkit-animation
-webkit-animation
- Explicit animation handled directly by CSS
-webkit-animation
- Explicit animation handled directly by CSS
- Repeated effects, keyframes
-webkit-animation
- Explicit animation handled directly by CSS
- Repeated effects, keyframes
- Uses an apple extension blo...
-webkit-animation
- Explicit animation handled directly by CSS
- Repeated effects, keyframes
- Uses an apple extension blo...
-webkit-animation
- Explicit animation handled directly by CSS
- Repeated effects, keyframes
- Uses an apple extension blo...
-webkit-animation
Simple animation setup:
@-webkit-keyframes bounce {
    from {
        left: 0px;
    }
    to {
       ...
-webkit-animation
Simple animation setup:       Simple animation Trigger:
@-webkit-keyframes bounce {   div#bouncer {
    ...
Complex Animation Setup: Complex Animation Trigger:
@-webkit-keyframes pulseAndMove {   div#pulser {
    0% {             ...
...and everything else
...and everything else
- Just a taste
...and everything else
- Just a taste
- Apple is adding a lot more fine-grained control to CSS
...and everything else
- Just a taste
- Apple is adding a lot more fine-grained control to CSS

-webkit-background        ...
Tools
Tools
- CSS3 Gradient Builder
  http://gradients.glrzad.com (Damian built it!)
Tools
- CSS3 Gradient Builder
  http://gradients.glrzad.com (Damian built it!)
- Emulators:
  - iPhone — Native, easy to u...
Resources
Resources
- Safari CSS Reference Guide
  http://developer.apple.com/mac/library/
  documentation/AppleApplications/Referen...
Resources
- Safari CSS Reference Guide
  http://developer.apple.com/mac/library/
  documentation/AppleApplications/Referen...
Resources
- Safari CSS Reference Guide
  http://developer.apple.com/mac/library/
  documentation/AppleApplications/Referen...
JavaScript?
JavaScript?
- A lot of new touch events
JavaScript?
- A lot of new touch events
- HTML / JS Client Side Storage
JavaScript?
- A lot of new touch events
- HTML / JS Client Side Storage
- GeoLocation API
JavaScript?
- A lot of new touch events
- HTML / JS Client Side Storage
- GeoLocation API


         NYC JS Meetup
       ...
Thanks...
- Damian Galarza, Associate Developer
  Magnani Caruso Dutton


- Victor Vasquez, Associate Designer
  Magnani C...
Me: http://michaeltsmith.net
     Code: http://github.com/michaeltsmith
Slides: http://www.slideshare.net/michaeltsmith
  ...
Upcoming SlideShare
Loading in...5
×

Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

10,400

Published on

Michael Smith, senior developer at Magnani Caruso Dutton, will give a tutorial on the latest and greatest CSS techniques for building native-like applications on the iPhone and Palm Pre (and other WebKit based browsers) with minimal images and strongly reusable code.

Discussion will include current and future browser support, implementation issues and best practices. We will quickly touch on new JavaScript and HTML 5 features (new events and client side storage) to give a well-rounded example. Example code and demonstrations will be used throughout the talk.

Published in: Technology
1 Comment
25 Likes
Statistics
Notes
  • Thanks for posting these!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,400
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
471
Comments
1
Likes
25
Embeds 0
No embeds

No notes for slide
  • Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

    1. 1. Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications Michael T. Smith Senior Developer, Magnani Caruso Dutton September 16, 2009
    2. 2. Who I Am?
    3. 3. Who I Am? - Senior Developer, Magnani Caruso Dutton
    4. 4. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012
    5. 5. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012 - Full Time Web Developer
    6. 6. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012 - Full Time Web Developer - Part Time Cocoa Developer
    7. 7. iPhone, Pre, Android?
    8. 8. iPhone, Pre, Android? - iPhone, iPod touch?
    9. 9. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold
    10. 10. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre?
    11. 11. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?)
    12. 12. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android?
    13. 13. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?)
    14. 14. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?)
    15. 15. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?) ...but...
    16. 16. WebKit
    17. 17. WebKit - WebKit browser engine across all three platforms
    18. 18. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all
    19. 19. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences
    20. 20. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement
    21. 21. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work
    22. 22. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work - Others won’t
    23. 23. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work - Others won’t - The user doesn’t miss out
    24. 24. Webkit Background
    25. 25. Webkit Background - Actively developed, open source browser engine
    26. 26. Webkit Background - Actively developed, open source browser engine - Dave Hyatt (http://surfingsafari.com), Safari & Webkit Architect
    27. 27. Webkit Background - Actively developed, open source browser engine - Dave Hyatt (http://surfingsafari.com), Safari & Webkit Architect - Began implementing CSS extensions that are working drafts for the W3C
    28. 28. Let’s begin...
    29. 29. “Web Application” Basics
    30. 30. “Web Application” Basics - Two forms:
    31. 31. “Web Application” Basics - Two forms: - Web Application
    32. 32. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK
    33. 33. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK - Web-based App
    34. 34. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK - Web-based App - going to flickr.com and getting a customized view
    35. 35. “Web Application” Basics Web-based App Web App
    36. 36. “Web Application” Basics
    37. 37. “Web Application” Basics - Form is determined by user and developer
    38. 38. “Web Application” Basics - Form is determined by user and developer - User must choose to “Save to Home Screen”
    39. 39. “Web Application” Basics - Form is determined by user and developer - User must choose to “Save to Home Screen” - Developer uses HTML meta tags to customize the application for the iPhone
    40. 40. HTML
    41. 41. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
    42. 42. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
    43. 43. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
    44. 44. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png">
    45. 45. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
    46. 46. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">
    47. 47. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default
    48. 48. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default black
    49. 49. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default black black-translucent
    50. 50. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no">
    51. 51. HTML <meta name="viewport" content ="width = [200 to 10,000 || device-width]"> <meta name="viewport" content ="height = [223 to 10,000 || device-height]"> <meta name="viewport" content ="minimum-scale = [0.01 to 10.0]"> <meta name="viewport" content ="maximum-scale = [0.01 to 10.0]"> <meta name="viewport" content ="initial-scale = [minimum-scale to maximum-scale]"> <meta name="viewport" content ="user-scalable = [yes||no]"> All options can be combined via commas
    52. 52. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-capable" content="yes">
    53. 53. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no">
    54. 54. ...which brings us to the CSS...
    55. 55. WebKit CSS Support
    56. 56. WebKit CSS Support - WebKit’s CSS support is spectacular.
    57. 57. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification
    58. 58. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification
    59. 59. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification - (most written using -webkit-rule notation)
    60. 60. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification - (most written using -webkit-rule notation) - 200+ rules
    61. 61. border opacity counter-reset -webkit-appearance border-bottom position list-style -webkit-nbsp-mode border-bottom-color right list-style-image -webkit-rtl-ordering border-bottom-style top list-style-position -webkit-user-drag border-bottom-width unicode-bidi list-style-type -webkit-user-modify border-color vertical-align orphans -webkit-user-select border-left width page-break-after border-collapse border-left-color z-index page-break-before border-spacing border-left-style zoom page-break-inside caption-side border-left-width clip widows empty-cells border-right overflow background table-layout border-right-color overflow-x background-attachment -webkit-border-horizontal- border-right-style overflow-y background-color spacing border-right-width resize background-image -webkit-border-vertical-spacing border-style visibility background-position -webkit-column-break-after border-top -webkit-animation background-position-x -webkit-column-break-before border-top-color -webkit-animation-delay background-position-y -webkit-column-break-inside border-top-style -webkit-animation-direction background-repeat -webkit-column-count border-top-width -webkit-animation-duration color -webkit-column-gap border-width -webkit-animation-iteration- -webkit-background-clip -webkit-column-rule margin-bottom count -webkit-background-composite -webkit-column-rule-color margin-left -webkit-animation-name -webkit-background-origin -webkit-column-rule-style margin-right -webkit-animation-play-state -webkit-background-size -webkit-column-rule-width margin-top -webkit-animation-timing- font -webkit-column-width padding-bottom function font-family -webkit-columns padding-left -webkit-backface-visibility font-size cursor padding-right -webkit-box-reflect font-style outline padding-top -webkit-mask font-variant outline-color -webkit-border-bottom-left- -webkit-mask-attachment font-weight outline-offset radius -webkit-mask-box-image src outline-style -webkit-border-bottom-right- -webkit-mask-clip unicode-range outline-width radius -webkit-mask-composite letter-spacing pointer-events -webkit-border-image -webkit-mask-image text-align -webkit-box-align -webkit-border-radius -webkit-mask-origin text-decoration -webkit-box-direction -webkit-border-top-left-radius -webkit-mask-position text-indent -webkit-box-flex -webkit-border-top-right-radius -webkit-mask-position-x text-overflow -webkit-box-flex-group -webkit-box-sizing -webkit-mask-position-y text-shadow -webkit-box-lines -webkit-box-shadow -webkit-mask-repeat text-transform -webkit-box-ordinal-group -webkit-margin-bottom-collapse -webkit-mask-size white-space -webkit-box-orient -webkit-margin-collapse -webkit-perspective word-break -webkit-box-pack -webkit-margin-start -webkit-perspective-origin word-spacing -webkit-touch-callout -webkit-margin-top-collapse -webkit-transform word-wrap -webkit-dashboard-region -webkit-padding-start -webkit-transform-origin -webkit-marquee -webkit-tap-highlight-color bottom -webkit-transform-origin-x -webkit-marquee-direction clear -webkit-transform-origin-y -webkit-marquee-increment direction -webkit-transform-origin-z -webkit-marquee-repetition display -webkit-transform-style -webkit-marquee-speed float -webkit-transition -webkit-marquee-style height -webkit-transition-delay -webkit-text-fill-color left -webkit-transition-duration -webkit-text-security line-height -webkit-transition-property -webkit-text-size-adjust max-height -webkit-transition-timing- -webkit-text-stroke max-width function -webkit-text-stroke-color min-height content -webkit-text-stroke-width min-width counter-increment -webkit-line-break
    62. 62. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    63. 63. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    64. 64. -webkit-border-radius
    65. 65. -webkit-border-radius - Rounds the corners of a box
    66. 66. -webkit-border-radius
    67. 67. -webkit-border-radius -webkit-border-radius: radius; -webkit-border-radius: horizontal_radius vertical_radius;
    68. 68. -webkit-border-radius -webkit-border-radius: radius; -webkit-border-radius: horizontal_radius vertical_radius; -webkit-border-bottom-left-radius: radius; -webkit-border-bottom-right-radius: radius; -webkit-border-top-left-radius: radius; -webkit-border-top-right-radius: radius;
    69. 69. -webkit-border-radius
    70. 70. -webkit-border-radius
    71. 71. -webkit-border-radius header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px; }
    72. 72. -webkit-border-radius header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px; }
    73. 73. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    74. 74. -webkit-box-shadow
    75. 75. -webkit-box-shadow (text-shadow)
    76. 76. -webkit-box-shadow (text-shadow) - Simple shadow effects - Very similar to layer effects in Photoshop - Properties are arranged differently
    77. 77. -webkit-box-shadow (text-shadow) text-shadow: color x_offset y_offset blur_radius; -webkit-box-shadow: x_offset y_offset blur_radius color; text-shadow: #000000 0 -1px 0; -webkit-box-shadow: -1px 0 0 #000000;
    78. 78. text-shadow header h1 { display: block; position: relative; top: 9px; margin: 0; padding: 0; font-size: 18px; color: #FFFFFF; text-shadow: #000000 0 -1px 0; text-align: center; }
    79. 79. text-shadow
    80. 80. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    81. 81. -webkit-gradient
    82. 82. -webkit-gradient - Not actually a rule — A “CSS Property Function” - Used anywhere a url() function can be used - ‘Experimental CSS 3’
    83. 83. -webkit-gradient
    84. 84. -webkit-gradient -webkit-gradient(type, start_point, end_point, stops );
    85. 85. -webkit-gradient -webkit-gradient(type, start_point, end_point, stops ); -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, stops );
    86. 86. -webkit-gradient -webkit-gradient(linear, start_point, end_point, color-stop(position, color) ); -webkit-gradient(radius, inner_center, inner_radius, outer_center, outer_radius, color-stop(position, color) );
    87. 87. -webkit-gradient background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565) );
    88. 88. -webkit-gradient background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565) );
    89. 89. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    90. 90. -webkit-mask
    91. 91. -webkit-mask - Alpha-level based masks
    92. 92. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.)
    93. 93. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context:
    94. 94. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask
    95. 95. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask - border
    96. 96. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask - border - background
    97. 97. -webkit-mask
    98. 98. -webkit-mask - Layers alpha channel masks on to objects
    99. 99. -webkit-mask - Layers alpha channel masks on to objects - Can clip complex shapes based on a grayscale image (even -webkit-gradient!)
    100. 100. -webkit-mask - Layers alpha channel masks on to objects - Can clip complex shapes based on a grayscale image (even -webkit-gradient!) - A pain in the butt to use.
    101. 101. -webkit-mask -webkit-mask: attachment, clip, origin, image, repeat, composite, box-image; -attachment: Allows the mask to scroll with the page -clip: Extends mask into border -origin: Mask’s anchor position -image: The mask image -repeat: Sets the mask’s ability to repeat -composite: Extends mask into padding -box-image: Sets a mask for a border box
    102. 102. -webkit-mask border: 1px solid #C0C8CC; border-left: 2px solid #C0C8CC; -webkit-border-top-right-radius: 6px; t -webkit-border-bottom-right-radius: 6px; -webkit-mask: no-repeat url(images/mask-btn-left.png); background-color: #B6BDC1; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.48, #b5bcc0), color-stop(0.49, #c8d0d4), color-stop(0.50, #c0c8cc), color-stop(0.61, #d4dbdd), color-stop(1.00, #f4fcfe) );
    103. 103. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    104. 104. -webkit-transition
    105. 105. -webkit-transition - Basic CSS transition
    106. 106. -webkit-transition - Basic CSS transition - Specified by property
    107. 107. -webkit-transition - Basic CSS transition - Specified by property - Similar (but simplified) timing functions to a tweening library
    108. 108. -webkit-transition -webkit-transition: property duration timing_function delay;
    109. 109. -webkit-transition -webkit-transition: property duration timing_function delay; -webkit-transition-property: property; -webkit-transition-duration: duration; -webkit-transition-timing- function: timing_function; -webkit-transition-delay: delay;
    110. 110. -webkit-transition
    111. 111. -webkit-transition #toDoInfo { position: absolute; left: 10px; top: -320px; z-index: 75; display: block; width: 300px; height: 320px; background: #B8B8B7; -webkit-border-radius: 10px; -webkit-transition: top .25s linear; } #toDoInfo.visible { top: 36px; }
    112. 112. -webkit-transition
    113. 113. -webkit-transition linear
    114. 114. -webkit-transition linear ease
    115. 115. -webkit-transition linear ease ease-in-out
    116. 116. -webkit-transition linear ease ease-in-out ease-out
    117. 117. -webkit-transition linear ease ease-in-out ease-out ease-in
    118. 118. -webkit-transition
    119. 119. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens”
    120. 120. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens”
    121. 121. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens” -webkit-transition-timing-function: cubic-bezier(p0x, p0y, p1x, p1y);
    122. 122. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    123. 123. -webkit-transform
    124. 124. -webkit-transform - Allows 3D and Flat transformations of objects
    125. 125. -webkit-transform - Allows 3D and Flat transformations of objects - Simple interface
    126. 126. -webkit-transform - Allows 3D and Flat transformations of objects - Simple interface - Customizable (matrix) transformations
    127. 127. -webkit-transform -webkit-transform: function(param);
    128. 128. -webkit-transform -webkit-transform: function(param); matrix scale translate matrix3d scale3d translate3d scaleX translateX perspective scaleY translateY scaleZ translateZ rotate skewX rotate3d skewY rotateX rotateY rotateZ
    129. 129. -webkit-transform -webkit-transform: function(param); matrix scale translate matrix3d scale3d translate3d scaleX translateX perspective scaleY translateY scaleZ translateZ rotate skewX rotate3d skewY rotateX rotateY rotateZ Example
    130. 130. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
    131. 131. -webkit-animation
    132. 132. -webkit-animation - Explicit animation handled directly by CSS
    133. 133. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes
    134. 134. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation
    135. 135. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation - “Normal” CSS to turn animation on
    136. 136. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation - “Normal” CSS to turn animation on Example
    137. 137. -webkit-animation Simple animation setup: @-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; } }
    138. 138. -webkit-animation Simple animation setup: Simple animation Trigger: @-webkit-keyframes bounce { div#bouncer { from { position: absolute; left: 0px; -webkit-animation-name: bounce; } -webkit-animation-duration: 4s; to { -webkit-animation-iteration-count: 10; left: 200px; -webkit-animation-direction: alternate; } } }
    139. 139. Complex Animation Setup: Complex Animation Trigger: @-webkit-keyframes pulseAndMove { div#pulser { 0% { position: absolute; background: #0F0; -webkit-animation-name: pulseAndMove; left: 0px; top: 0px; -webkit-animation-duration: 4s; } -webkit-animation-iteration-count: 10; 25% { -webkit-animation-direction: alternate; background: #F00; } left: 20px; top: 20px; } 50% { Example background: #00F; } 75% { background: #0FF; left: 50px; top: 50px; } 100% { background: #F0F; } }
    140. 140. ...and everything else
    141. 141. ...and everything else - Just a taste
    142. 142. ...and everything else - Just a taste - Apple is adding a lot more fine-grained control to CSS
    143. 143. ...and everything else - Just a taste - Apple is adding a lot more fine-grained control to CSS -webkit-background -webkit-box -webkit-marquee -webkit-tap -webkit-text -webkit-touch -webkit-column
    144. 144. Tools
    145. 145. Tools - CSS3 Gradient Builder http://gradients.glrzad.com (Damian built it!)
    146. 146. Tools - CSS3 Gradient Builder http://gradients.glrzad.com (Damian built it!) - Emulators: - iPhone — Native, easy to use - Android — Eclipse based, not easy to use - Palm Pre — VirtualBox image, easy to use, takes some time to install
    147. 147. Resources
    148. 148. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html
    149. 149. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html - Safari Web Content Guide http://developer.apple.com/safari/library/ documentation/AppleApplications/Reference/ SafariWebContent/Introduction/Introduction.html
    150. 150. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html - Safari Web Content Guide http://developer.apple.com/safari/library/ documentation/AppleApplications/Reference/ SafariWebContent/Introduction/Introduction.html - Surfin’ Safari http://webkit.org/blog/
    151. 151. JavaScript?
    152. 152. JavaScript? - A lot of new touch events
    153. 153. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage
    154. 154. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage - GeoLocation API
    155. 155. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage - GeoLocation API NYC JS Meetup 7pm, October 6, 2009 Rebar, Dumbo
    156. 156. Thanks... - Damian Galarza, Associate Developer Magnani Caruso Dutton - Victor Vasquez, Associate Designer Magnani Caruso Dutton
    157. 157. Me: http://michaeltsmith.net Code: http://github.com/michaeltsmith Slides: http://www.slideshare.net/michaeltsmith michael@michaeltsmith.net Thank you, very much.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×