Download - Css2
![Page 1: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/1.jpg)
Advanced Styling
With CSS
Wednesday, February 27, 13
![Page 2: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/2.jpg)
Agenda
Media Queries
CSS3 New Features
CSS3 Transitions and Animations
Twitter Bootstrap
Wednesday, February 27, 13
![Page 3: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/3.jpg)
Responsive Layouts
Wednesday, February 27, 13
![Page 4: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/4.jpg)
The Goal
Same website, Different devices
Best user experience for each device
Wednesday, February 27, 13
![Page 5: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/5.jpg)
Desktop - Mobile
Wednesday, February 27, 13
![Page 6: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/6.jpg)
Responsive Tools
Media Queries
Modernizr
pxtoem.com
Web Developer Extension: http://chrispederick.com/work/web-developer/
Wednesday, February 27, 13
![Page 7: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/7.jpg)
Media Queries
Mobile devices vary in size and capabilities
CSS Media Queries allow us to use different css properties based on the device
Wednesday, February 27, 13
![Page 8: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/8.jpg)
Media Queries
The medium density device is delivered a 320x480 image
The high density device is delivered a 480x800 image
Wednesday, February 27, 13
![Page 9: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/9.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); }}
Wednesday, February 27, 13
![Page 10: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/10.jpg)
And it’s not just mobile...
Wednesday, February 27, 13
![Page 11: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/11.jpg)
Media Queries
Pixel density
Dimensions
Orientation
Wednesday, February 27, 13
![Page 12: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/12.jpg)
Demo Queries
@media (min-device-width:300px) { body { background: blue; }}
Blue Body Background for larger screens
Wednesday, February 27, 13
![Page 13: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/13.jpg)
Demo Queries
Blue Body Background for smaller screens
@media (max-width:800px) { body { background: blue; }}
Wednesday, February 27, 13
![Page 14: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/14.jpg)
Demo Queries
More info on landscape
@media (orientation:landscape) { body { background: blue; }}
Wednesday, February 27, 13
![Page 15: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/15.jpg)
Media Queries
html5 mobile boilerplate provides a ready made empty css file with all of the above
http://html5boilerplate.com/mobile/
Wednesday, February 27, 13
![Page 16: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/16.jpg)
Other Tools
Modernizr
pxtoem.com
http://lab.maltewassermann.com/viewport-resizer/
Web Developer Extension: http://chrispederick.com/work/web-developer/
Wednesday, February 27, 13
![Page 17: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/17.jpg)
Media Queries Lab
Write a web page that shows a different image for large or small screen
Update to change image on orientation change
Wednesday, February 27, 13
![Page 18: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/18.jpg)
Q & A
Media Queries
CSS3 New Features
CSS3 Transitions and Animations
Twitter Bootstrap
Wednesday, February 27, 13
![Page 19: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/19.jpg)
CSS3 New Features
Rounded Corners
Shadows
Gradients
Form Types
Flexbox Model
Wednesday, February 27, 13
![Page 20: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/20.jpg)
Rounded Corners
use -prefix-border-radius to get the effect
No need to use background images
Sample use:-webkit-border-radius: 8px;
Wednesday, February 27, 13
![Page 21: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/21.jpg)
Shadowsuse -prefix-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);
Wednesday, February 27, 13
![Page 22: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/22.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/
Wednesday, February 27, 13
![Page 23: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/23.jpg)
Input Types
input type=”tel”
numeric keypad
Wednesday, February 27, 13
![Page 24: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/24.jpg)
Input Types
input type=”number”
numbers/special chars keyboard
Wednesday, February 27, 13
![Page 25: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/25.jpg)
Input Types
input type=”url”
opens url keypad
Wednesday, February 27, 13
![Page 26: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/26.jpg)
Input Types
input type=”email”
email keypad (note the @)
email validation on supported browsers
Wednesday, February 27, 13
![Page 27: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/27.jpg)
Input Types
input type=”color”
Modal color picker
Wednesday, February 27, 13
![Page 28: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/28.jpg)
Input Types
input type=”date”
Modal date picker
Wednesday, February 27, 13
![Page 29: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/29.jpg)
Input Types
input type=”time”
Modal time picker
Wednesday, February 27, 13
![Page 30: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/30.jpg)
The New Flex-Box
Use the new flex-box to easily describe column width
Wednesday, February 27, 13
![Page 31: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/31.jpg)
Q & A
Media Queries
CSS3 New Features
CSS3 Transitions and Animations
Twitter Bootstrap
Wednesday, February 27, 13
![Page 32: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/32.jpg)
CSS Transition
Controls the transition between element states
Allows animating transitions
Uses 3D acceleration
Wednesday, February 27, 13
![Page 33: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/33.jpg)
Demo - Transitions
Each state is represented by a CSS class
Clicking the button changes element state
Wednesday, February 27, 13
![Page 34: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/34.jpg)
-webkit-transition
transition-property
transition-duration
transition-timing-function
transition-delay
Wednesday, February 27, 13
![Page 35: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/35.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
Wednesday, February 27, 13
![Page 36: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/36.jpg)
transition-duration
How long the property animation should take
Use time in seconds or ms (can be < 1s)
Wednesday, February 27, 13
![Page 37: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/37.jpg)
transition-timing-functionDetermines the timing function for the animation
Live demo at: http://www.the-art-of-web.com/css/timing-function/
Wednesday, February 27, 13
![Page 38: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/38.jpg)
transition delay
Delay between value change and animation start
Can be used to coordinate multiple animating objects
Wednesday, February 27, 13
![Page 39: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/39.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
Wednesday, February 27, 13
![Page 40: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/40.jpg)
Transition Effects
Mobile apps usually have some native animations for changing screens
On the web, we can implement these using css transformations
Wednesday, February 27, 13
![Page 41: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/41.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
Wednesday, February 27, 13
![Page 42: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/42.jpg)
CSS Transformations-webkit-transform: rotate(25deg) translate(80px,150px);
Wednesday, February 27, 13
![Page 43: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/43.jpg)
CSS TransformationsAvailable Transformations:
translate
scale
rotate
skew
Wednesday, February 27, 13
![Page 44: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/44.jpg)
Keyframe Animations
Use keyframe animations when:
Need more control
Repeated Animations
Wednesday, February 27, 13
![Page 45: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/45.jpg)
Keyframe Animations
Define animation
Glue it to an element
Wednesday, February 27, 13
![Page 46: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/46.jpg)
Keyframe Animations
Define An Animation With:
@-webkit-keyframes rounder { 0% { border-radius: 0; } 100% { border-radius: 100px; }}
Wednesday, February 27, 13
![Page 47: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/47.jpg)
Keyframe Animations
Glue it to an element
div { width: 200px; height: 200px; background: blue; -webkit-animation: rounder 2s infinite;}
Wednesday, February 27, 13
![Page 48: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/48.jpg)
Keyframes Lab
Write a spinner keyframe animation
Wednesday, February 27, 13
![Page 49: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/49.jpg)
Q & A
Wednesday, February 27, 13
![Page 50: Css2](https://reader038.vdocuments.site/reader038/viewer/2022102922/548e3037b47959af5a8b4697/html5/thumbnails/50.jpg)
Thank You
Ynon Perek
ynonperek.com
Wednesday, February 27, 13