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
- Modern CSS3-based techniques available in WebKit
* 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
Topics:
* Layout: CSS-support for easy layouts
* Element transforms w/o reflows
* Animation with transitions and keyframes
* “Micro-styling”
* Scripting transforms and animations
Topics:
* Layout: CSS-support for easy layouts
* Element transforms w/o reflows
* Animation with transitions and keyframes
* “Micro-styling”
* Scripting transforms and animations
Topics:
* Layout: CSS-support for easy layouts
* Element transforms w/o reflows
* Animation with transitions and keyframes
* “Micro-styling”
* Scripting transforms and animations
Topics:
* Layout: CSS-support for easy layouts
* Element transforms w/o reflows
* Animation with transitions and keyframes
* “Micro-styling”
* Scripting transforms and animations
Topics:
* Layout: CSS-support for easy layouts
* Element transforms w/o reflows
* Animation with transitions and keyframes
* “Micro-styling”
* Scripting transforms and animations
Flexible Box Layout:
* Direction of document flow: Parent box lays out child boxes horizontally/vertically
* Boxes can stretch along the axis individually
* Similar to “display: table”, 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
Flexible Box Layout:
* Direction of document flow: Parent box lays out child boxes horizontally/vertically
* Boxes can stretch along the axis individually
* Similar to “display: table”, 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
Flexible Box Layout:
* Direction of document flow: Parent box lays out child boxes horizontally/vertically
* Boxes can stretch along the axis individually
* Similar to “display: table”, 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
Flexible Box Layout:
* Direction of document flow: Parent box lays out child boxes horizontally/vertically
* Boxes can stretch along the axis individually
* Similar to “display: table”, 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
Flexible Box Layout:
* Direction of document flow: Parent box lays out child boxes horizontally/vertically
* Boxes can stretch along the axis individually
* Similar to “display: table”, 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
Example from TouchScroll: Simple header and footer layout – 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
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
* Simple markup
* Even simpler styling
Another example from TouchScroll: flexible tab bar – tabs resize horizontally like table cells
* Show in Browser
Again: simple markup and styling
Again: simple markup and styling
Again: simple markup and styling
Again: simple markup and styling
Again: simple markup and styling
Again: simple markup and styling
* It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
* alignment orthogonal to the display-axis
* It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
* alignment orthogonal to the display-axis
* It’s possible to display elements independently from source order (box-direction, box-ordinal-group)
* alignment orthogonal to the display-axis
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Types of transforms:
* All transforms exist for 2d and 3d (since when?)
* Rotations, skews, translations, scalings
* Matrix support (2x2, 4x4)
* Don’t affect other elements in the document flow
* Again, W3C drafts
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Yellow: 3d transform module
Animations hw-accelerated on the iPhone
3d transforms in Android 2.0 – bad performance, no perspective
Show demos on iPhone: poster circle, morphing power cube
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* border images: image as border, dividing it into nine fields
* gradients: use everywhere instead of an image
*
* All three techniques combined: border-image, gradient, mask
* Advantage: better maintainability, fast changes
* All three techniques combined: border-image, gradient, mask
* Advantage: better maintainability, fast changes
* All three techniques combined: border-image, gradient, mask
* Advantage: better maintainability, fast changes
* Transitions: smooth change between two states, easy to script
* Animations: Keyframe-based, explicit starting state, repeatable
* Transitions: smooth change between two states, easy to script
* Animations: Keyframe-based, explicit starting state, repeatable
* 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
* 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
* 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
* 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
* 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
* 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
* 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
* 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
* Easing functions represented by a cubic bezier curve
* Normalized coordinate system [0, 1]
* Two explicit control points within the coordinate system
* Easing functions represented by a cubic bezier curve
* Normalized coordinate system [0, 1]
* Two explicit control points within the coordinate system
* Easing functions represented by a cubic bezier curve
* Normalized coordinate system [0, 1]
* Two explicit control points within the coordinate system
* Easing functions represented by a cubic bezier curve
* Normalized coordinate system [0, 1]
* Two explicit control points within the coordinate system
* In/x-axis: Time
* Many different curves
* cubic function depends on variable “t”
* solving for x or y involves complex numbers
* In/x-axis: Time
* Many different curves
* cubic function depends on variable “t”
* solving for x or y involves complex numbers
* In/x-axis: Time
* Many different curves
* cubic function depends on variable “t”
* solving for x or y involves complex numbers
* In/x-axis: Time
* Many different curves
* cubic function depends on variable “t”
* solving for x or y involves complex numbers
* In/x-axis: Time
* Many different curves
* cubic function depends on variable “t”
* solving for x or y involves complex numbers
* construction in dependency of “t”
* all bubbling
* on iPhone 3G, webkitTransitionEnd fires late
* all bubbling
* on iPhone 3G, webkitTransitionEnd fires late
* all bubbling
* on iPhone 3G, webkitTransitionEnd fires late
* all bubbling
* on iPhone 3G, webkitTransitionEnd fires late
* WebKitCSSMatrix represents a 4x4/16x16 transform matrix
* Methods to translate, scale, rotate
* Methods multiply, inverse
* toString() returns CSS compatible matrix function definition
* WebKitCSSMatrix represents a 4x4/16x16 transform matrix
* Methods to translate, scale, rotate
* Methods multiply, inverse
* toString() returns CSS compatible matrix function definition
* WebKitCSSMatrix represents a 4x4/16x16 transform matrix
* Methods to translate, scale, rotate
* Methods multiply, inverse
* toString() returns CSS compatible matrix function definition
* WebKitCSSMatrix represents a 4x4/16x16 transform matrix
* Methods to translate, scale, rotate
* Methods multiply, inverse
* toString() returns CSS compatible matrix function definition
* 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’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
* 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’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
* 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’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
* 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’t use webkitTransitionEnd for chaining – fires late on iPhone 3G
* Two constructors in global scope
* Useful for dynamic animation construction?
* Two constructors in global scope
* Useful for dynamic animation construction?
