05 mobile css
TRANSCRIPT
![Page 1: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/1.jpg)
Design For The Smaller Screen
Monday, October 15, 12
![Page 2: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/2.jpg)
Agenda
Viewports
Media Queries
Mobile Layout
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
![Page 3: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/3.jpg)
Tapuz on the iPhone
page is “zoomed out” so everything will fit in.
Monday, October 15, 12
![Page 4: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/4.jpg)
Viewport
Most websites are optimized for 960px, but mobile devices usually have less.
How will you show “normal” web sites on mobile ?
Monday, October 15, 12
![Page 5: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/5.jpg)
Viewport
Determines how many pixels fit on the page
Mobile devices “do their best” to fit everything in the viewport - sometimes not optimal
This can be controlled with viewports
Monday, October 15, 12
![Page 6: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/6.jpg)
Same PageDifferent Viewport
Monday, October 15, 12
![Page 7: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/7.jpg)
Viewport
Device
World
Device
World
Viewport Viewport
Monday, October 15, 12
![Page 8: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/8.jpg)
Viewport
use viewport meta tag to prevent zooming
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1”>
Monday, October 15, 12
![Page 9: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/9.jpg)
Viewport Options
Directive Example Value Meaning
widthwidth=320width=device-width
logical viewport width, in pixels
heightheight=480height=device-height
logical viewport height, in pixels
Monday, October 15, 12
![Page 10: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/10.jpg)
Viewport Options
Directive Example Value Meaning
user-scalableuser-scalable=no user can zoom
in/out
initial-scale initial-scale=2.0 initial zoom factor
maximum-scaleminimum-scale
maximum-scale=2.5
min/max zoom factors
Monday, October 15, 12
![Page 11: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/11.jpg)
Viewport Quiz
What does the following mean ? What is the recommended value ?
initial-scale
width
user-scalable
Monday, October 15, 12
![Page 12: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/12.jpg)
Viewport Quiz
What does the following mean ? What is the recommended value ?
initial-scale: initial page zoom factor
width: width of the viewport. Use device-width
user-scalable: Allow user to scale content
Monday, October 15, 12
![Page 13: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/13.jpg)
Viewport When
Set a viewport when:
Writing a Fixed-Pixel Mobile Web App
Writing a responsive web app
Monday, October 15, 12
![Page 14: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/14.jpg)
Android DPI
Monday, October 15, 12
![Page 15: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/15.jpg)
The Problem
Same screen size
Different resolution
Monday, October 15, 12
![Page 16: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/16.jpg)
target-densitydpi= device-dpi
Monday, October 15, 12
![Page 17: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/17.jpg)
Android Dpi
Android devices support variable dpi devices
Use target-densitydpi to control automatic scaling due to dpi differences
Default value: 160 (medium density)
Monday, October 15, 12
![Page 18: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/18.jpg)
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
![Page 19: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/19.jpg)
Responsive Layouts
Monday, October 15, 12
![Page 20: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/20.jpg)
The Goal
Same website, Different devices
Best user experience for each device
Monday, October 15, 12
![Page 21: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/21.jpg)
Desktop - Mobile
Monday, October 15, 12
![Page 22: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/22.jpg)
Responsive Tools
Media Queries
Modernizr
pxtoem.com
Web Developer Extension: http://chrispederick.com/work/web-developer/
Monday, October 15, 12
![Page 23: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/23.jpg)
Media Queries
Mobile devices vary in size and capabilities
CSS Media Queries allow us to use different css properties based on the device
Monday, October 15, 12
![Page 24: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/24.jpg)
Media Queries
The medium density device is delivered a 320x480 image
The high density device is delivered a 480x800 image
Monday, October 15, 12
![Page 25: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/25.jpg)
Media Queries Example#header { background:url(medium-density-image.png);
}
@media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); }}
@media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); }}
Monday, October 15, 12
![Page 26: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/26.jpg)
Media Queries ExampleIt’s also possible to use completely different css files
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
Monday, October 15, 12
![Page 27: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/27.jpg)
Media Queries
Query device density
Query device dimensions
Query device orientation
Query iPad
Monday, October 15, 12
![Page 28: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/28.jpg)
Query Device Dimensions
Smartphones: portrait & landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 480px ) {
/* style goes here */
}
Monday, October 15, 12
![Page 29: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/29.jpg)
Query Device Dimensions
Smartphones: landscape
@media only screen and (min-width : 321px) {
/* style goes here */
}
Monday, October 15, 12
![Page 30: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/30.jpg)
Query Device Dimensions
Smartphones: portrait
@media only screen and (max-width : 320px) {
/* style goes here */
}
Monday, October 15, 12
![Page 31: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/31.jpg)
Query Device Dimensions
iPads: portraits & landscape@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) {
/* style goes here */
}
Monday, October 15, 12
![Page 32: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/32.jpg)
Query Device Dimensions
iPads: landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) and ( orientation : landscape ) {
/* style goes here */
}
Monday, October 15, 12
![Page 33: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/33.jpg)
Query Device Dimensions
iPads: portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px ) and ( orientation : portrait ) {
/* style goes here */
}
Monday, October 15, 12
![Page 34: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/34.jpg)
More Media Queries
Media Query Snippets:http://nmsdvid.com/snippets/#
Monday, October 15, 12
![Page 35: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/35.jpg)
Media Queries
html5 mobile boilerplate provides a ready made empty css file with all of the above
http://html5boilerplate.com/mobile/
Monday, October 15, 12
![Page 36: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/36.jpg)
Other Tools
Modernizr
pxtoem.com
Web Developer Extension: http://chrispederick.com/work/web-developer/
Monday, October 15, 12
![Page 37: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/37.jpg)
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
![Page 38: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/38.jpg)
Mobile Layout
newsgeek.co.il
mobile optimized
one column
only vertical scrolling
Monday, October 15, 12
![Page 39: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/39.jpg)
Mobile Layout
One column
Top navigation bar
Bottom navigation bar - tabs
Monday, October 15, 12
![Page 40: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/40.jpg)
Mobile Layout
A nav bar at the bottom
Dividing to pages saves bandwidth
Monday, October 15, 12
![Page 41: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/41.jpg)
Mobile Layout
Facebook keeps a top navigation bar
Note the single column flow
Monday, October 15, 12
![Page 42: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/42.jpg)
Mobile Layout
Yahoo mobile works with the same single column
Top navigation bar
horizontal scroller “twist”
Monday, October 15, 12
![Page 43: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/43.jpg)
Exercise
Implement a blog layout
Show a snippet from every post
Bonus: Have your blog look different on desktop and mobile
Monday, October 15, 12
![Page 44: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/44.jpg)
Top Navigation Bar
use floated list elements for the horizontal top menu
wrap them in a div for the bar
Monday, October 15, 12
![Page 45: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/45.jpg)
Keep In Mind
word-break: break-all;
-webkit-touch-callout: none;
Monday, October 15, 12
![Page 46: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/46.jpg)
Design Limitations
overflow: scroll ios5 and up, Android 4 and up
Consider overthrow or iScroll for polyfillsSee http://www.quirksmode.org/m/table.html for more info
Monday, October 15, 12
![Page 47: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/47.jpg)
Design Limitations
animated gif is not supported on Android devices
Consider spin.jsSee http://www.quirksmode.org/m/table.html for more info
Monday, October 15, 12
![Page 48: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/48.jpg)
Design Limitations
position: fixed is supported on:
iOS5 and up
Android 3.2 and up
See http://www.quirksmode.org/m/table.html for more info
Monday, October 15, 12
![Page 49: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/49.jpg)
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
![Page 50: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/50.jpg)
CSS Mobile Features
Rounded Corners
Shadows
Gradients
Monday, October 15, 12
![Page 51: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/51.jpg)
Rounded Corners
use -webkit-border-radius to get the effect
No need to use background images
Sample use:-webkit-border-radius: 8px;
Monday, October 15, 12
![Page 52: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/52.jpg)
Shadowsuse -webkit-box-shadow to get a shadow effect
rgba(0, 0, 0, 0.6) will work as the shadow color
Sample Use:-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6);
Monday, October 15, 12
![Page 53: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/53.jpg)
GradientsCSS 3.0 added support for gradients
use them instead of background images to save bandwidth
Online gradient generator:http://www.colorzilla.com/gradient-editor/
Monday, October 15, 12
![Page 54: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/54.jpg)
Small Screen Design
Use CSS instead of background images wherever possible
Keep navigation elements visible and large
Less is More
Monday, October 15, 12
![Page 55: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/55.jpg)
Exercise
Implement the photo gallery on the right
Note black/white gradient top bar
Monday, October 15, 12
![Page 56: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/56.jpg)
Q & A
Viewports
Media Queries
Mobile Layout Options
CSS Mobile-Related Features
CSS Techniques for Mobile Apps
Monday, October 15, 12
![Page 57: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/57.jpg)
CSS Common Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12
![Page 58: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/58.jpg)
Mobile Input Types
input type=”tel”
numeric keypad
Monday, October 15, 12
![Page 59: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/59.jpg)
Mobile Input Types
input type=”number”
numbers/special chars keyboard
Monday, October 15, 12
![Page 60: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/60.jpg)
Mobile Input Types
input type=”url”
opens url keypad
Monday, October 15, 12
![Page 61: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/61.jpg)
Mobile Input Types
input type=”email”
email keypad (note the @)
Monday, October 15, 12
![Page 62: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/62.jpg)
Apple Style Icons
Take any image and create an apple styled icon from it using css
This includes: light from top, round corners, shadows
Monday, October 15, 12
![Page 63: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/63.jpg)
Apple Style Icons
The markup <div class="icon">
<div></div>
Android
</div>
Monday, October 15, 12
![Page 64: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/64.jpg)
Apple Style Icons
Style - container div
.icon {
zoom: 5;
display: inline-block;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
color: #000;
font: bold 11px helvetica;
text-align: center;
margin: 8px;
}
Monday, October 15, 12
![Page 65: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/65.jpg)
Apple Style Icons.icon div {
-webkit-border-radius: 8px;
width: 57px; height: 57px;
margin: 0 auto 4px;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
-wbekit-box-sizing: border-box;
background-image: -webkit-gradient(radial,
50% -40, 37, 50% 0, 100,
from(rgba(255, 255, 255, 0.75)),
color-stop(30%, rgba(255, 255, 255, 0)),
color-stop(30%, rgba(0, 0, 0, 0.25)),
to(rgba(0, 0, 0, 0))),
url(icon.jpg);
-webkit-background-size: auto auto, 100% 100%;
}
Monday, October 15, 12
![Page 66: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/66.jpg)
Header Buttons
position: absolute
border radius
transparent background gradient
styled text
Monday, October 15, 12
![Page 67: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/67.jpg)
HTML Markup <body>
<div class="view">
<div class="header-wrapper">
<h1>Buttons Example</h1>
<a href="#" class="header-button">Edit</a>
<a href="#" class="header-button left">Back</a>
</div>
</div>
</body>
Monday, October 15, 12
![Page 68: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/68.jpg)
Header Style
Uses background: webkit-gradient to create the gradient dynamically
height 44 px
padding 10 px
full code in examples folder
Monday, October 15, 12
![Page 69: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/69.jpg)
Header Button Style
position: absolute to fix the position to the left or right
min-width: 44 px - finger size
border radius for the rounded corners
full code in examples folder
Monday, October 15, 12
![Page 70: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/70.jpg)
CSS Common Techniques
Mobile input types
Apple style icon
Header buttons
Transition Effects
Monday, October 15, 12
![Page 71: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/71.jpg)
CSS Transition
Controls the transition between element states
Allows animating transitions
Uses 3D acceleration
Monday, October 15, 12
![Page 72: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/72.jpg)
Demo - Transitions
Each state is represented by a CSS class
Clicking the button changes element state
Monday, October 15, 12
![Page 73: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/73.jpg)
-webkit-transition
transition-property
transition-duration
transition-timing-function
transition-delay
Monday, October 15, 12
![Page 74: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/74.jpg)
transition-property
Almost any property can be animated
Use all to catch everything
Full list at: https://developer.mozilla.org/en/css/css_transitions
Monday, October 15, 12
![Page 75: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/75.jpg)
transition-duration
How long the property animation should take
Use time in seconds or ms (can be < 1s)
Monday, October 15, 12
![Page 76: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/76.jpg)
transition-timing-functionDetermines the timing function for the animation
Live demo at: http://www.the-art-of-web.com/css/timing-function/
Monday, October 15, 12
![Page 77: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/77.jpg)
transition delay
Delay between value change and animation start
Can be used to coordinate multiple animating objects
Monday, October 15, 12
![Page 78: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/78.jpg)
ExerciseImplement a yahoo style “top news” section
Click next to animate to the next image
Click prev to animate to the previous image
Hint: 3 divs inside a container, and animate position
Monday, October 15, 12
![Page 79: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/79.jpg)
Transition Effects
Mobile apps usually have some native animations for changing screens
On the web, we can implement these using css transformations
Monday, October 15, 12
![Page 80: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/80.jpg)
Slide Effect
A slide effect is built of two child divs and a parent with overflow:hidden
Sliding is achieved by changing the translate-x of the child divs
Monday, October 15, 12
![Page 81: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/81.jpg)
Flip Effect
Two divs take the same position, one is rotated 180 deg on the y axis
webkit-backface-visibility causes its back to stay hidden
A click changes the rotation for both divs
Monday, October 15, 12
![Page 82: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/82.jpg)
Q & A
Monday, October 15, 12
![Page 83: 05 Mobile CSS](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554d1ff1b4c905ab268b484a/html5/thumbnails/83.jpg)
Thank You
Ynon Perek
ynonperek.com
Monday, October 15, 12