CSS3 gives websites dynamic and interactive capabilities for mobile phones and tablets. CSS3 adds fine-grained design controls and brings the web closer to reality. Examples of CSS3 benefits include reduced development time, streamlined markup, improved page performance, and better search engine placement. Browser support for CSS3 is improving through progressive enhancement. CSS3 features like RGBa & HSLa colors, gradients, rounded corners, box shadows, fonts, and media queries allow for creative designs.

1. cSS3 for Advanced Design Paul Trani, Adobe Evangelist

4. Examples www.awwwards.com Letter Heads Cursor Monster Fish Burst Game

6. Benefits of CSS3

7. Reduced development and maintenance time Less images, Flash, JavaScript Streamlined markup

8. Increased page performance Smaller file sizes Fewer HTTP requests “Reducing the number of HTTP requests…is the most important guideline for improving performance for first time visitors.” Yahoo! Exceptional Performance Team

9. Better search engine placement Google uses speed as ranking factor Real text instead of image or Flash text

10. Increased usability Real text Optimized styles based on device capabilities

12. Browser support

13. Progressive Enhancement Deliver the best possible experience to the widest possible audience. Should be as fully featured and functional as possible.

14. http://www.w3.org/TR/CSS/ www.w3.org/Style/CSS/current-work

15. Use the parts of CSS3 that: have generally stable syntax have good support don't 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

16. Creative CSS3

17. RGBa & HSLa Gradients Rounded Corners Box Shadow Multiple Backgrounds @font-face Media Queries Visual Effects and Animation

18. COLOR RGBa (255, 255, 255, 0.5); HSLa(360, 100%, 50%, 0.5);

19. Gradients Can be used in every place you can use an image background: linear-gradient(white, black); Prefixes: -webkit- Chrome and Webkit -moz- Firefox 3.6+ -o- Opera 11.1 (linear only) -ms- IE 10

20. border-radiusborder-radius: 10px;

21. box-shadowbox-shadow (horizontal offset,vertical offset, optional blur distance, optional distance, optional color, optional inset)

22. text-shadow

23. @ font-face

24. Media queries

25. CSS Media Queries for Mobile min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio

26. CSS Media Queries <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

27. TRANSFORMS

28. Transforms – You can transform anything!opacity: 0.5;-webkit-transition-property: opacity;-webkit-transition-duration: 1s;-webkit-transition-timing-function: ease; opacity:1; http://lab.simurai.com/css/tilt-shift

29. What’s next

30. Adobe Edge http://lab.simurai.com/css/tilt-shift

31. Thank you

32. 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