Advanced CSS and CSS3 can add richness to your site’s experience layer by enhancing interactivity. While the CSS3 specification as a whole is still in flux, but you can still use many CSS3 properties today. Regardless of the project, anyone can inject flexible techniques that enrich the interactions built into websites.

1. Denise R. Jacobs Voices That Matter Web Design Conference 2010 San Francisco It’s Business Time: Givin’ User Experience Love With CSS3

2. #css3ux<3

3. The passionate love affair with CSS3 only grows stronger over time http://www.flickr.com/photos/victoriapeckham/2091704802/

5. As with many seemingly perfect romances, there are issues… http://www.flickr.com/photos/cybervin/266632074/

6. Relationship Status: It’s Complicated

7. Still a working draft

8. Validation (or lack thereof)

9. Uneven browser support http://www.evotech.net/blog/2009/02/css-browser-support/

11. Oh my!

12. “Do websites need to look exactly the same in every browser?” http://www.flickr.com/photos/quinnanya/4080820343/ /

13. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

14. “Do websites need to be experienced exactly the same in every browser?”

15. http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

16. The Age of Emotional & Experience Design

18. Good looks + http://www.flickr.com/photos/spierzchala/66232046/

19. Delight + http://www.flickr.com/photos/cristeenq/2360466038/

20. Compatibility = http://www.flickr.com/photos/trektrack/134157546/

21. A strong positive user experience http://www.flickr.com/photos/meggers/2378288736/

22. The question… http://www.flickr.com/photos/exquisitur/2549355743/

23. The website “trifle” Markup Style Experience

24. Levels of importance Visual Rewards Motion Interactions Feedback Branding Usability Accessibility Layout Nice to Have Important Critical

27. While we spend much of our time looking towards a brighter future… 2011

28. Despite our most fervent wishes otherwise… http://www.flickr.com/photos/1k3r/1371314660/

29. Many users are still using older browsers…

30. … that just aren’t very supportive http://www.flickr.com/photos/johnsnape/4258191545/

31. Either by force http://www.flickr.com/photos/porcupiny/783990790//

32. Or by choice http://www.flickr.com/photos/mwichary/2240608755//

33. Catering to these users http://www.flickr.com/photos/pointshoot/3375778761/

34. Usually isn’t very fun

35. So, which is better, Graceful Degradation or Progressive Enhancement? http://www.flickr.com/photos/tom1231/273579455/

36. * Please * http://www.flickr.com/photos/gideon/6582069/

37. Sites need be usable and look good to as many people as possible. That’s the true goal. http://www.flickr.com/photos/shirinwiniger/3680885289/

39. Some Techniques http://www.flickr.com/photos/thisparticulargreg/514817208/ [3]

45. While derision towards the IEs is justified http://www.flickr.com/photos/hookdesignalter/4273565489/ (& http://www.robotjohnny.com/)

46. You can still show a little Love . http://www.flickr.com/photos/brunkfordbraun/391876102/

47. Let’s make the CSS3

48. The Seduction Suite http://www.flickr.com/photos/criminalintent/3282026121/

50. CSS3 Specifications

51. Browser Compatibility Charts http://www.findmebyip.com/litmus

52. Cross- Browser Testers

53. Four Useful Tips http://www.flickr.com/photos/nostri-imago/3216359107/ [4]

63. “Not tonight, dear…” http://www.flickr.com/photos/jbguess/4269420290/

64. Let’s Get It On

65. A Dozen Roses: 12 CSS3 Properties http://www.flickr.com/photos/southpaw2305/3705409282/

66. NOTE: None of the IEs support CSS3. http://www.flickr.com/photos/johnsnape/4258191545/ … as in “not any”. Right. ‘Nuff said. 6 7 8

68. @font-face http://sickdesigner.com/ 1.

74. gradient 2. http://www.denisejacobs.com/cdgexamples/chapter8/

77. gradient http://www.westciv.com/tools/gradients/

78. border-image 3. http://www.zurb.com/playground/awesome-overlays

81. text-shadow 1. http://www.bountybev.com/home.html

85. border-radius 2. http://www.denisejacobs.com/cdgexamples/chapter10/

90. box-shadow 3. http://badassideas.com/work/

94. opacity 4. http://rustinjessen.com/weblog/833

98. rgba 5. http://aarronwalter.com/designer/

102. multiple backgrounds 6. http://www.stunningcss3.com

105. transform (2d) 1. http://www.stunningcss3.com

110. transition 2. http://designlovr.com/examples/dynamic_stack_of_index_cards/ * 3.6: no, 4.02 yes

112. animation 3. http://www.css3exp.com/moon/

113. “ Can I use CSS3 now?”

114. Making Plans for the Future http://www.flickr.com/photos/unfrenziedspace/4551505664/

115. Don’t be afraid to commit to using CSS3 http://www.flickr.com/photos/eschipul/2371505523/

116. Feel the love: Put in some hands-on quality time http://www.flickr.com/photos/erikogan/3481255/

120. We all want to fall (or stay) in love http://www.flickr.com/photos/8322821@N04/500108112/

121. …and spread love http://www.flickr.com/photos/eelssej_/413385838/

122. Today >> Tomorrow >> http://www.flickr.com/photos/trektrack/134157546/ http://www.flickr.com/photos/meggers/2378288736/

123. Not everyone will be able to access your added experience layer from CSS3 http://www.flickr.com/photos/icanchangethisright/3687782204/

124. And those who do… http://www.flickr.com/photos/jamiecampbell/446301597/

125. Will love you for it http://www.flickr.com/photos/erikogan/3481255/

126. CSSDetectiveGuide.com twitter.com/cssdetective Book Love 1

127. InterActWithWebStandards.com twitter.com/waspinteract Book Love 2

130. Closed . http://www.flickr.com/photos/crazyeddie/2916193420/

131. denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs

132. http://www.flickr.com/photos/27620885@N02/2609974180/