4. CSS3 | OH THE WONDER
C S S 3 IS J U S T . . . . SO NEW
should I really use it?
YES.
WORDCAMP PHOENIX
5. CSS3 | OH THE WONDER
WHE N TO U S E C S S 3
• interaction
• enhancement
• subtle movement / animation
WORDCAMP PHOENIX
6. CSS3 | OH THE WONDER
WHE N TO N OT U S E C S S 3
• usability / accessibility
• layout dependency
• branding
US E I T, BU T D ON ’ T B E C OME DE P ENDE NT
WORDCAMP PHOENIX
7. CSS3 | OH THE WONDER
DoWebsitesNeedToBeExperiencedExactlyeSameInEveryBrowser.com
WORDCAMP PHOENIX
8. CSS3 | OH THE WONDER
ereIsNoPageFold.com
WORDCAMP PHOENIX
9. CSS3 | OH THE WONDER
lostworldsfairs.com/atlantis
WORDCAMP PHOENIX
10. CSS3 | OH THE WONDER
lostworldsfairs.com/atlantis
WORDCAMP PHOENIX
11. CSS3 | OH THE WONDER
S OME BAS I C C SS 3
border-radius box-shadow
1+ 3+ 3+ 10.5+ 9beta 3.5+ 3+ 3+ 10.5+ 9beta
text-shadow opacity
3.1+ 2+ 1.1+ 9.5+ 3+ 3+ 3.2+ 10+ 9beta
14. CSS3 | OH THE WONDER
Twenty Ten - menu drop-down shadow
WORDCAMP PHOENIX
15. CSS3 | OH THE WONDER
Twenty Ten - menu drop-down shadow
WORDCAMP PHOENIX
16. CSS3 | OH THE WONDER
FALLBACK
css3pie.com
WORDCAMP PHOENIX
17. CSS3 | OH THE WONDER
FALLBACK
modernizr.com
WORDCAMP PHOENIX
18. CSS3 | OH THE WONDER
RESOURCES
CSS3 for Web Designer by Dan Cederholm
css3.com
alistapart.com/articles/taking-advantage-of-html5-
and-css3-with-modernizr
alistapart.com/articles/understanding-css3-
transitions
WORDCAMP PHOENIX
52. MEDIA QUERIES
CSS3-MEDIAQUERIES.JS
code.google.com/p/css3-mediaqueries-js
css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and
Safari 2 transparently parse, test and apply CSS3 Media Queries
WORDCAMP PHOENIX
53. CSS GRIDS | BE RESPONSIVE!
lamentgroup.com/lab/responsive_images_experimenting
_with_context_aware_image_sizing
54. MEDIA QUERIES
HTML5
Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera
WORDCAMP PHOENIX
55. RESOURCES ON MEDIA QUERIES
github.com/ lamentgroup/Responsive-Images
w3.org/TR/css3-mediaqueries
smashingmagazine.com/2010/07/19/how-to-use-css3-
media-queries-to-create-a-mobile-version-of-your-
website
css-tricks.com/css-media-queries
alistapart.com/articles/ uidgrids/
WORDCAMP PHOENIX
56. CSS GRIDS | BE RESPONSIVE!
RESPONSIVE WEB DESIGN
must see articles/resources
WORDCAMP PHOENIX
57. CSS GRIDS | BE RESPONSIVE!
alistapart.com/articles/responsive-web-design
58. CSS GRIDS | BE RESPONSIVE!
books.alistapart.com/products/responsive-web-design
59. CSS GRIDS | BE RESPONSIVE!
smashingmagazine.com/2011/01/12/guidelines-for-
responsive-web-design
60. CSS GRIDS | BE RESPONSIVE!
unstoppablerobotninja.com/entry/ uid-images/