Advance CSS3

1. CSS3 FOR ADVANCED DESIGN
Paul Trani, Adobe Evangelist

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

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

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-radius
border-radius: 10px;

21. box-shadow
box-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. http://lab.simurai.com/css/tilt-shift
Adobe Edge

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