![-webkit-transform: …
rotate(30deg) rotateX/Y/Z rotate3d
skew(20deg [, 10deg]) skewX/Y
translate translateX/Y/Z translate3d
scale(1.2) scaleX/Y scale3d
matrix(1, 0, 0, 1, 0, 0) matrix3d
perspective(200)](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/85/Interface-Styling-Scripting-on-WebKit-Mobile-14-320.jpg)
![Transitions
Transition between to states of a property
delay, duration, timing function
#mybox {
! -webkit-transition-property: opacity[, -webkit-transform];
! -webkit-transition-delay: 0.1s[, 0];
! -webkit-transition-duration: 120ms [, 2s];
! -webkit-transition-timing-function: ease-out [, ease];
}
document.getElementById("mybox").style.opacity = "0";](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/85/Interface-Styling-Scripting-on-WebKit-Mobile-21-320.jpg)
![More?
Interfaces WebKitCSSKeyframesRule,
WebKitCSSKeyframeRule
document.styleSheets[i].cssRules[j]](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/85/Interface-Styling-Scripting-on-WebKit-Mobile-30-320.jpg)
![-webkit-transform: …
rotate(30deg) rotateX/Y/Z rotate3d
skew(20deg [, 10deg]) skewX/Y
translate translateX/Y/Z translate3d
scale(1.2) scaleX/Y scale3d
matrix(1, 0, 0, 1, 0, 0) matrix3d
perspective(200)](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/75/Interface-Styling-Scripting-on-WebKit-Mobile-14-2048.jpg)
![Transitions
Transition between to states of a property
delay, duration, timing function
#mybox {
! -webkit-transition-property: opacity[, -webkit-transform];
! -webkit-transition-delay: 0.1s[, 0];
! -webkit-transition-duration: 120ms [, 2s];
! -webkit-transition-timing-function: ease-out [, ease];
}
document.getElementById("mybox").style.opacity = "0";](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/75/Interface-Styling-Scripting-on-WebKit-Mobile-21-2048.jpg)
![More?
Interfaces WebKitCSSKeyframesRule,
WebKitCSSKeyframeRule
document.styleSheets[i].cssRules[j]](https://image.slidesharecdn.com/mobilebarcampdresden-100424074011-phpapp01/75/Interface-Styling-Scripting-on-WebKit-Mobile-30-2048.jpg)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Interface Styling & Scripting on WebKit Mobile
- 1. Making it smooth InterfaceStyling & Scripting for WebKit Mobile David Aurelio – uxebu Consulting Ltd. & Co. KG
- 2. We open themobile web.
- 3. Topics Layout Transforms Animation Styling JavaScript Support
- 4. TouchScroll JavaScript/CSS 3 Based Scrolling http://u.nu/8uvg8
- 5. Flexible Boxes st r e t c h Photo: http://www.flickr.com/photos/18773952@N00/416987309 – by mahalie – cc licensed
- 6. display: (-webkit-)box; horizontal/vertical boxpositioning flexible boxes swiss army knife for layout tasks In WebKit and Gecko for years W3C Draft: “Flexible Box Layout Module”
- 7. Layout w/Header &Footer
- 8. Layout w/Header &Footer <div class="screen"> ! <div class="head"><!-- Header bar --></div> ! <div class="contents"><!-- Screen contents --></div> ! <div class="footer"><!-- Footer / toolbar --></div> </div> .screen { ! display: -webkit-box; ! -webkit-box-orient: vertical; ! -webkit-box-pack: justify; } .contents { ! -webkit-box-flex: 1; }
- 9.
- 10. Horizontal Tab Bar <div class="tabs"> ! <a href="#about">About</a> ! <a href="#horiz">Horizontal</a> ! <a href="#twodim">2-Dimensional</a> </div> .tabs { ! display: -webkit-box; ! -webkit-box-pack: justify; } .tabs > a { ! width: 1px; ! -webkit-box-flex: 1; }
- 11. More in “display:box” display order vs. source order alignment multiple lines
- 12. CSS Transforms Photo: http://www.flickr.com/photos/jiazi/1061447777/– by jiazi – cc licensed
- 13. CSS 3 Transforms } Rotate Matrix Skew Translate Scale
- 14. -webkit-transform: … rotate(30deg) rotateX/Y/Zrotate3d skew(20deg [, 10deg]) skewX/Y translate translateX/Y/Z translate3d scale(1.2) scaleX/Y scale3d matrix(1, 0, 0, 1, 0, 0) matrix3d perspective(200)
- 15.
- 16. More Style Border Images Transparency Masks Gradients Photo: http://www.flickr.com/photos/senor_codo/234774166 – by Señor Codo – cc licensed Frame: http://www.flickr.com/photos/eriwst/2303608353/ – by erwist – cc licensed
- 17. More Style Border Images -webkit-border-image: url(…) 3 3 3 3 stretch Gradients -webkit-gradient( linear, 0 0, 0 100%, from(#d67809), color-stop(0.5, #b51818), to(#b51887)) Transparency Masks -webkit-mask-image: url(…) + = -webkit-mask-box-image: …
- 18.
- 19. Movement: CSS Animations Photo:http://www.flickr.com/photos/raindog/6359617/ – by raindog – cc licensed
- 20.
- 21. Transitions Transition between tostates of a property delay, duration, timing function #mybox { ! -webkit-transition-property: opacity[, -webkit-transform]; ! -webkit-transition-delay: 0.1s[, 0]; ! -webkit-transition-duration: 120ms [, 2s]; ! -webkit-transition-timing-function: ease-out [, ease]; } document.getElementById("mybox").style.opacity = "0";
- 22. Keyframe based animations Keyframesdefined seperately Encapsulate property state at keyframes @-webkit-keyframes 'diagonal-slide' { ! from { -webkit-transform: translate(0, 0); } ! 50% { -webkit-transform: translate(-50px, -50px); } ! to { -webkit-transform: translate(100px, 100px); } } div { ! -webkit-animation-name: 'diagonal-slide'; ! -webkit-animation-duration: 5s; ! -webkit-animation-iteration-count: 10; }
- 23. Timing Functions Cubic beziercurves From (0, 0) to (1, 1) Two explicit control points cubic-bezier(0.2, 0.6, 0.8, 0.6)
- 24. Cubic Bezier Curves y/out: progress → t→ x/in: elapsed time → http://www.w3.org/TR/css3-transitions/ – Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved.
- 25. Cubic Bezier Curves Graphicfrom http://de.wikipedia.org/wiki/Datei:Bezier_cubic_anim.gif – public domain
- 26. Script Support forCSS Photo: http://www.flickr.com/photos/86624586@N00/10187684/ – by kevinzim – cc licensed
- 27.
- 28. Scripting Transforms WebKitCSSMatrix Instanciate fromelement state var s = window.getComputedStyle(elm); var m = new WebKitCSSMatrix(s.webkitTransform); Transforming methods Broken on Android < v2.0
- 29. Scripting Bezier Curves Beziercalculation library github.com/davidaurelio/css-beziers approximate t for given x or y Subdivide bezier curves
- 30.
- 31.
- 32.
- 33.
Editor's Notes
- #2 - Modern CSS3-based techniques available in WebKit
- #3 * My name is David (Aurelio) from uxebu (munich/amsterdam), a mobile web company * We develop cross platform mobile apps with JavaScript, HTML/CSS for the interface * we use the web technologies to increase our app's reach * Common codebase, distinct interface styles
- #4 Topics: * Layout: CSS-support for easy layouts * Element transforms w/o reflows * Animation with transitions and keyframes * &#x201C;Micro-styling&#x201D; * Scripting transforms and animations
- #5 Topics: * Layout: CSS-support for easy layouts * Element transforms w/o reflows * Animation with transitions and keyframes * &#x201C;Micro-styling&#x201D; * Scripting transforms and animations
- #6 Topics: * Layout: CSS-support for easy layouts * Element transforms w/o reflows * Animation with transitions and keyframes * &#x201C;Micro-styling&#x201D; * Scripting transforms and animations
- #7 Topics: * Layout: CSS-support for easy layouts * Element transforms w/o reflows * Animation with transitions and keyframes * &#x201C;Micro-styling&#x201D; * Scripting transforms and animations
- #8 Topics: * Layout: CSS-support for easy layouts * Element transforms w/o reflows * Animation with transitions and keyframes * &#x201C;Micro-styling&#x201D; * Scripting transforms and animations
- #9 TouchScroll: A JS-based scrolling layer for WebKit Mobile/Touch * CSS: box layout, transitions, transforms, gradients * JS: transform matrix, bezier curves
- #10 First topic: layout with flexible boxes
- #11 Flexible Box Layout: * Direction of document flow: Parent box lays out child boxes horizontally/vertically * Boxes can stretch along the axis individually * Similar to &#x201C;display: table&#x201D;, without its disadvantages * Boxes stay in the document flow, no floats, no absolute positioned elements * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) * W3C Working Draft, no futureless technique
- #12 Flexible Box Layout: * Direction of document flow: Parent box lays out child boxes horizontally/vertically * Boxes can stretch along the axis individually * Similar to &#x201C;display: table&#x201D;, without its disadvantages * Boxes stay in the document flow, no floats, no absolute positioned elements * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) * W3C Working Draft, no futureless technique
- #13 Flexible Box Layout: * Direction of document flow: Parent box lays out child boxes horizontally/vertically * Boxes can stretch along the axis individually * Similar to &#x201C;display: table&#x201D;, without its disadvantages * Boxes stay in the document flow, no floats, no absolute positioned elements * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) * W3C Working Draft, no futureless technique
- #14 Flexible Box Layout: * Direction of document flow: Parent box lays out child boxes horizontally/vertically * Boxes can stretch along the axis individually * Similar to &#x201C;display: table&#x201D;, without its disadvantages * Boxes stay in the document flow, no floats, no absolute positioned elements * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) * W3C Working Draft, no futureless technique
- #15 Flexible Box Layout: * Direction of document flow: Parent box lays out child boxes horizontally/vertically * Boxes can stretch along the axis individually * Similar to &#x201C;display: table&#x201D;, without its disadvantages * Boxes stay in the document flow, no floats, no absolute positioned elements * Many different types of layout tasks can be accomplished: header/footer layout, equal height columns, tile views. * Implemented in WebKit and Gecko; works on older runtimes, too (Nokia 5800) * W3C Working Draft, no futureless technique
- #16 Example from TouchScroll: Simple header and footer layout &#x2013; everyday task for phone developers, but not realizable with CSS2: Viewport behavior of WebKit Mobile optimized for document displaying, not for applications. * Show flexibility in browser
- #17 * Simple markup * Even simpler styling
- #18 * Simple markup * Even simpler styling
- #19 * Simple markup * Even simpler styling
- #20 * Simple markup * Even simpler styling
- #21 * Simple markup * Even simpler styling
- #22 * Simple markup * Even simpler styling
- #23 * Simple markup * Even simpler styling
- #24 Another example from TouchScroll: flexible tab bar &#x2013; tabs resize horizontally like table cells * Show in Browser
- #25 Again: simple markup and styling
- #26 Again: simple markup and styling
- #27 Again: simple markup and styling
- #28 Again: simple markup and styling
- #29 Again: simple markup and styling
- #30 Again: simple markup and styling
- #31 * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) * alignment orthogonal to the display-axis
- #32 * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) * alignment orthogonal to the display-axis
- #33 * It&#x2019;s possible to display elements independently from source order (box-direction, box-ordinal-group) * alignment orthogonal to the display-axis
- #35 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #36 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #37 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #38 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #39 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #40 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #41 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #42 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #43 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #44 Types of transforms: * All transforms exist for 2d and 3d (since when?) * Rotations, skews, translations, scalings * Matrix support (2x2, 4x4) * Don&#x2019;t affect other elements in the document flow * Again, W3C drafts
- #45 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #46 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #47 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #48 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #49 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #50 Yellow: 3d transform module Animations hw-accelerated on the iPhone 3d transforms in Android 2.0 &#x2013; bad performance, no perspective
- #51 Show demos on iPhone: poster circle, morphing power cube
- #58 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #59 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #60 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #61 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #62 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #63 * border images: image as border, dividing it into nine fields * gradients: use everywhere instead of an image *
- #64 * All three techniques combined: border-image, gradient, mask * Advantage: better maintainability, fast changes
- #65 * All three techniques combined: border-image, gradient, mask * Advantage: better maintainability, fast changes
- #66 * All three techniques combined: border-image, gradient, mask * Advantage: better maintainability, fast changes
- #68 * Transitions: smooth change between two states, easy to script * Animations: Keyframe-based, explicit starting state, repeatable
- #69 * Transitions: smooth change between two states, easy to script * Animations: Keyframe-based, explicit starting state, repeatable
- #70 * Transitions between two states for one or more properties (comma-separated) * Transitions have a duration, and optionally delay and timing function * On iPhone: Hardware acceleration for opacity and transform
- #71 * Transitions between two states for one or more properties (comma-separated) * Transitions have a duration, and optionally delay and timing function * On iPhone: Hardware acceleration for opacity and transform
- #72 * Transitions between two states for one or more properties (comma-separated) * Transitions have a duration, and optionally delay and timing function * On iPhone: Hardware acceleration for opacity and transform
- #73 * Transitions between two states for one or more properties (comma-separated) * Transitions have a duration, and optionally delay and timing function * On iPhone: Hardware acceleration for opacity and transform
- #74 * Keyframes are defined seperately from in CSS * Each keyframe contains information about property states * Are added to a selector * Optional timing function for each keyframe
- #75 * Keyframes are defined seperately from in CSS * Each keyframe contains information about property states * Are added to a selector * Optional timing function for each keyframe
- #76 * Keyframes are defined seperately from in CSS * Each keyframe contains information about property states * Are added to a selector * Optional timing function for each keyframe
- #77 * Keyframes are defined seperately from in CSS * Each keyframe contains information about property states * Are added to a selector * Optional timing function for each keyframe
- #78 * Easing functions represented by a cubic bezier curve * Normalized coordinate system [0, 1] * Two explicit control points within the coordinate system
- #79 * Easing functions represented by a cubic bezier curve * Normalized coordinate system [0, 1] * Two explicit control points within the coordinate system
- #80 * Easing functions represented by a cubic bezier curve * Normalized coordinate system [0, 1] * Two explicit control points within the coordinate system
- #81 * Easing functions represented by a cubic bezier curve * Normalized coordinate system [0, 1] * Two explicit control points within the coordinate system
- #82 * In/x-axis: Time * Many different curves * cubic function depends on variable &#x201C;t&#x201D; * solving for x or y involves complex numbers
- #83 * In/x-axis: Time * Many different curves * cubic function depends on variable &#x201C;t&#x201D; * solving for x or y involves complex numbers
- #84 * In/x-axis: Time * Many different curves * cubic function depends on variable &#x201C;t&#x201D; * solving for x or y involves complex numbers
- #85 * In/x-axis: Time * Many different curves * cubic function depends on variable &#x201C;t&#x201D; * solving for x or y involves complex numbers
- #86 * In/x-axis: Time * Many different curves * cubic function depends on variable &#x201C;t&#x201D; * solving for x or y involves complex numbers
- #87 * construction in dependency of &#x201C;t&#x201D;
- #89 * all bubbling * on iPhone 3G, webkitTransitionEnd fires late
- #90 * all bubbling * on iPhone 3G, webkitTransitionEnd fires late
- #91 * all bubbling * on iPhone 3G, webkitTransitionEnd fires late
- #92 * all bubbling * on iPhone 3G, webkitTransitionEnd fires late
- #93 * WebKitCSSMatrix represents a 4x4/16x16 transform matrix * Methods to translate, scale, rotate * Methods multiply, inverse * toString() returns CSS compatible matrix function definition
- #94 * WebKitCSSMatrix represents a 4x4/16x16 transform matrix * Methods to translate, scale, rotate * Methods multiply, inverse * toString() returns CSS compatible matrix function definition
- #95 * WebKitCSSMatrix represents a 4x4/16x16 transform matrix * Methods to translate, scale, rotate * Methods multiply, inverse * toString() returns CSS compatible matrix function definition
- #96 * WebKitCSSMatrix represents a 4x4/16x16 transform matrix * Methods to translate, scale, rotate * Methods multiply, inverse * toString() returns CSS compatible matrix function definition
- #97 * Same algorithm as WebKit for t approximasation * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves * Smoothly chained animations * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G
- #98 * Same algorithm as WebKit for t approximasation * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves * Smoothly chained animations * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G
- #99 * Same algorithm as WebKit for t approximasation * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves * Smoothly chained animations * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G
- #100 * Same algorithm as WebKit for t approximasation * every cubic bezier curve may be divided at any given point, yielding two cubic bezier curves * Smoothly chained animations * Don&#x2019;t use webkitTransitionEnd for chaining &#x2013; fires late on iPhone 3G
- #101 * Two constructors in global scope * Useful for dynamic animation construction?
- #102 * Two constructors in global scope * Useful for dynamic animation construction?