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.

1. CSS3 & ADVANCED DESIGN

2. Paul Trani
@paultrani ptrani@adobe.com
• 15 years design experience
• 4 year old at heart

3. Designer or Developer?

5. Examples
• Letter Heads
• Cursor Monster
• www.awwwards.com

6. Bene ts of CSS3

7. Reduced Development and Maintenance Time
• Less images, Flash, JavaScript
• Streamlined markup

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

9. Better Search Engine Placement
• Google uses speed as ranking factor
• Real text instead of image or Flash text

10. Increased Usability
• Optimized styles based on device capabilities
• Real text

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

15. Creative CSS3

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

17. Color
• RGBa (255, 255, 255, 0.5);
• HSLa (360, 100%, 50%, 0.5);

18. border-radius
border-radius: 10px;

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

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

21. text-shadow

22. @ font-face

23. Media Queries

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

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

26. Transforms

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

28. What’s Next

29. Adobe Edge

30.  CSS Regions
 CSS Shaders

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

32. Hey. We’re hiring. 