Css2

1,695 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,695
On SlideShare
0
From Embeds
0
Number of Embeds
786
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css2

  1. 1. Advanced Styling With CSSWednesday, February 27, 13
  2. 2. Agenda Media Queries CSS3 New Features CSS3 Transitions and Animations Twitter BootstrapWednesday, February 27, 13
  3. 3. Responsive LayoutsWednesday, February 27, 13
  4. 4. The Goal Same website, Different devices Best user experience for each deviceWednesday, February 27, 13
  5. 5. Desktop - MobileWednesday, February 27, 13
  6. 6. Responsive Tools Media Queries Modernizr pxtoem.com Web Developer Extension: http:// chrispederick.com/work/web-developer/Wednesday, February 27, 13
  7. 7. Media Queries Mobile devices vary in size and capabilities CSS Media Queries allow us to use different css properties based on the deviceWednesday, February 27, 13
  8. 8. Media Queries The medium density device is delivered a 320x480 image The high density device is delivered a 480x800 imageWednesday, February 27, 13
  9. 9. 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
  10. 10. And it’s not just mobile...Wednesday, February 27, 13
  11. 11. Media Queries Pixel density Dimensions OrientationWednesday, February 27, 13
  12. 12. Demo Queries Blue Body Background for larger screens @media (min-device-width:300px) {         body { background: blue;  } }  Wednesday, February 27, 13
  13. 13. Demo Queries Blue Body Background for smaller screens @media (max-width:800px) {         body { background: blue;  } }Wednesday, February 27, 13
  14. 14. Demo Queries More info on landscape @media (orientation:landscape) {         body { background: blue;  } }Wednesday, February 27, 13
  15. 15. 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
  16. 16. Other Tools Modernizr pxtoem.com http://lab.maltewassermann.com/viewport-resizer/ Web Developer Extension: http:// chrispederick.com/work/web-developer/Wednesday, February 27, 13
  17. 17. Media Queries Lab Write a web page that shows a different image for large or small screen Update to change image on orientation changeWednesday, February 27, 13
  18. 18. Q&A Media Queries CSS3 New Features CSS3 Transitions and Animations Twitter BootstrapWednesday, February 27, 13
  19. 19. CSS3 New Features Rounded Corners Shadows Gradients Form Types Flexbox ModelWednesday, February 27, 13
  20. 20. 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
  21. 21. Shadows use -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
  22. 22. Gradients CSS 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
  23. 23. Input Types input type=”tel” numeric keypadWednesday, February 27, 13
  24. 24. Input Types input type=”number” numbers/special chars keyboardWednesday, February 27, 13
  25. 25. Input Types input type=”url” opens url keypadWednesday, February 27, 13
  26. 26. Input Types input type=”email” email keypad (note the @) email validation on supported browsersWednesday, February 27, 13
  27. 27. Input Types input type=”color” Modal color pickerWednesday, February 27, 13
  28. 28. Input Types input type=”date” Modal date pickerWednesday, February 27, 13
  29. 29. Input Types input type=”time” Modal time pickerWednesday, February 27, 13
  30. 30. The New Flex-Box Use the new flex-box to easily describe column widthWednesday, February 27, 13
  31. 31. Q&A Media Queries CSS3 New Features CSS3 Transitions and Animations Twitter BootstrapWednesday, February 27, 13
  32. 32. CSS Transition Controls the transition between element states Allows animating transitions Uses 3D accelerationWednesday, February 27, 13
  33. 33. Demo - Transitions Each state is represented by a CSS class Clicking the button changes element stateWednesday, February 27, 13
  34. 34. -webkit-transition transition-property transition-duration transition-timing- function transition-delayWednesday, February 27, 13
  35. 35. transition-property Almost any property can be animated Use all to catch everything Full list at: https://developer.mozilla.org/en/css/ css_transitionsWednesday, February 27, 13
  36. 36. transition-duration How long the property animation should take Use time in seconds or ms (can be < 1s)Wednesday, February 27, 13
  37. 37. transition-timing- function Determines the timing function for the animation Live demo at: http://www.the-art-of-web.com/css/ timing-function/Wednesday, February 27, 13
  38. 38. transition delay Delay between value change and animation start Can be used to coordinate multiple animating objectsWednesday, February 27, 13
  39. 39. Exercise Implement 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 positionWednesday, February 27, 13
  40. 40. Transition Effects Mobile apps usually have some native animations for changing screens On the web, we can implement these using css transformationsWednesday, February 27, 13
  41. 41. 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 divsWednesday, February 27, 13
  42. 42. CSS Transformations -webkit-transform: rotate(25deg) translate(80px,150px);Wednesday, February 27, 13
  43. 43. CSS Transformations Available Transformations: translate scale rotate skewWednesday, February 27, 13
  44. 44. Keyframe Animations Use keyframe animations when: Need more control Repeated AnimationsWednesday, February 27, 13
  45. 45. Keyframe Animations Define animation Glue it to an elementWednesday, February 27, 13
  46. 46. Keyframe Animations Define An Animation With: @-webkit-keyframes rounder {   0%    { border-radius: 0;     }   100%  { border-radius: 100px; } }Wednesday, February 27, 13
  47. 47. Keyframe Animations Glue it to an element div {   width: 200px;   height: 200px;   background: blue;   -webkit-animation: rounder 2s infinite; }Wednesday, February 27, 13
  48. 48. Keyframes Lab Write a spinner keyframe animationWednesday, February 27, 13
  49. 49. Q&AWednesday, February 27, 13
  50. 50. Thank You Ynon Perek ynonperek@yahoo.com ynonperek.comWednesday, February 27, 13

×