CSS3 & ADVANCED DESIGN
Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart
Designer or Developer?
Examples•  Letter Heads•  Cursor Monster•  www.awwwards.com
Bene ts of CSS3
Reduced Development and Maintenance Time•  Less images, Flash, JavaScript•  Streamlined markup
Increased Page Performance•  Smaller le sizes•  Fewer HTTP requests“Reducing the number of HTTP requests…is the most impor...
Better Search Engine Placement•  Google uses speed as ranking factor•  Real text instead of image or Flash text
Increased Usability•  Optimized styles based on device capabilities•  Real text
Browser Support
Progressive Enhancement•  Deliver the best possible experience to the widest possible   audience.•  Should be as fully fea...
Use the parts of CSS3 that:•    Have generally stable syntax•    Have good support•    Dont harm non-supporting browsers b...
Creative CSS3
•    RGBa & HSLa{    •    Gradients    •    Rounded Corners    •    Box Shadow    •    Multiple Backgrounds    •    @font-...
Color•  RGBa (255, 255, 255, 0.5);•  HSLa (360, 100%, 50%, 0.5);
border-radiusborder-radius: 10px;
Gradients•  Can be used in every place you can use an image•  background: linear-gradient(white, black);•  Pre xes:   –   ...
box-shadowbox-shadow (horizontal offset,     vertical offset,    optional blur distance,    optional distance,    optional...
text-shadow
@ font-face
Media Queries
CSS Media Queries for Mobile•    min-width•    max-width•    device-width•    min-device-width•    max-device-width•    or...
CSS Media Queries<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />
Transforms
Transforms – Transform Anything!opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-...
What’s Next
Adobe Edge
  CSS Regions	  CSS Shaders
Thank You•    Slides	  posted	  at	  www.paultrani.com	  	  •    Flexible	  Web	  Design	  www.flexiblewebbook.com	  •    S...
Hey. We’re hiring. 
CSS3 and Advanced Design
CSS3 and Advanced Design
Upcoming SlideShare
Loading in …5
×

CSS3 and Advanced Design

4,772 views

Published on

Talk given at DevCon 5 in Santa Clara:
The power of the web has arrived for mobile phones and tablets. CSS3 gives web sites a dynamic, interactive capability and greater useability. CSS3 adds fine grained controls for designers looking to bring the web closer to reality.

Published in: Technology

CSS3 and Advanced Design

  1. 1. CSS3 & ADVANCED DESIGN
  2. 2. Paul Trani@paultrani ptrani@adobe.com•  15 years design experience•  4 year old at heart
  3. 3. Designer or Developer?
  4. 4. Examples•  Letter Heads•  Cursor Monster•  www.awwwards.com
  5. 5. Bene ts of CSS3
  6. 6. Reduced Development and Maintenance Time•  Less images, Flash, JavaScript•  Streamlined markup
  7. 7. Increased Page Performance•  Smaller le sizes•  Fewer HTTP requests“Reducing the number of HTTP requests…is the most important guideline for improving performance for rst time visitors.” Yahoo! Exceptional Performance Team
  8. 8. Better Search Engine Placement•  Google uses speed as ranking factor•  Real text instead of image or Flash text
  9. 9. Increased Usability•  Optimized styles based on device capabilities•  Real text
  10. 10. Browser Support
  11. 11. Progressive Enhancement•  Deliver the best possible experience to the widest possible audience.•  Should be as fully featured and functional as possible.
  12. 12. Use the parts of CSS3 that:•  Have generally stable syntax•  Have good support•  Dont harm non-supporting browsers by their lack•  http://caniuse.com“Subtle CSS3 effects should be employed as a reward for users who run a modern browser.” Front-End Development Guidelines, Yahoo
  13. 13. Creative CSS3
  14. 14. •  RGBa & HSLa{ •  Gradients •  Rounded Corners •  Box Shadow •  Multiple Backgrounds •  @font-face •  Media Queries •  Visual Effects and Animation
  15. 15. Color•  RGBa (255, 255, 255, 0.5);•  HSLa (360, 100%, 50%, 0.5);
  16. 16. border-radiusborder-radius: 10px;
  17. 17. Gradients•  Can be used in every place you can use an image•  background: linear-gradient(white, black);•  Pre xes: –  -webkit- Chrome and Webkit –  -moz- Firefox 3.6+ –  -o- Opera 11.1 (linear only) –  -ms- IE 10
  18. 18. box-shadowbox-shadow (horizontal offset, vertical offset, optional blur distance, optional distance, optional color, optional inset)
  19. 19. text-shadow
  20. 20. @ font-face
  21. 21. Media Queries
  22. 22. CSS Media Queries for Mobile•  min-width•  max-width•  device-width•  min-device-width•  max-device-width•  orientation•  -webkit-min-device-pixel-ratio
  23. 23. CSS Media Queries<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 480px)"href="mobile.css" />
  24. 24. Transforms
  25. 25. Transforms – Transform Anything!opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease;opacity: 1;h"p://lab.simurai.com/css/1lt-­‐shi4    
  26. 26. What’s Next
  27. 27. Adobe Edge
  28. 28.   CSS Regions   CSS Shaders
  29. 29. Thank You•  Slides  posted  at  www.paultrani.com    •  Flexible  Web  Design  www.flexiblewebbook.com  •  Stunning  CSS3    www.stunningcss3.com    •  www.w3.org/Style/CSS/current-­‐work  •  www.caniuse.com    
  30. 30. Hey. We’re hiring. 

×