CSS3: The Future is Now // Drupal Design Camp Boston

The next generation of CSS is here, and it's being used on thousands of sites. Come learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.

I cover the state of cross-browser support and tips for implementing graceful fallbacks. I talk about the future and where CSS3 is going. And I provide resources on where to learn more.

Transcript

1. drupal Design camp boston June 2010 http://extras.jensimmons.com/ designcamp2010/css3.pdf CSS3: The Future is Now Sunday, June 20, 2010
2. Jen Simmons Lullabot Trainer Lead Front-End Developer and architect at workhabit twitter: jensimmons irc/d.o: jensimmons http://extras.jensimmons.com/drupalconsf2010/css3.pdf Sunday, June 20, 2010
3. wouldn’t you like to make rounded corners put multiple background images on one thing make drop shadows put shadows on text have image-based borders on boxes layout your content in multiple columns use translucent colors create gradients and reflections use more fonts on the web animate stuff Sunday, June 20, 2010
4. with just css You can! today Sunday, June 20, 2010
5. but what about the evil one? Sunday, June 20, 2010
6. ie Sunday, June 20, 2010
7. well, you can ignore internet explorer let it stay in 200X Sunday, June 20, 2010
8. do websites need to look exactly the same in every browser? http:// dowebsitesneedtolookexactlythesameineverybrowser. com Sunday, June 20, 2010
9. Sunday, June 20, 2010
10. Sunday, June 20, 2010
11. “progressive enhancement” Sunday, June 20, 2010
12. compliant browser* drop shadow rounded corners gradient translucency new font none square corners solid color opaqueness old font internet explorer * safari & chrome, firefox, opera Sunday, June 20, 2010
13. workaround ie with filter hacks filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#444444', EndColorStr='#999999'); / * IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ http://css3please.com Sunday, June 20, 2010
14. http://modernizr.com Sunday, June 20, 2010
15. http://code.google.com/chrome/chromeframe Sunday, June 20, 2010
16. enough about ie what about everybody else? safari chrome opera firefox Sunday, June 20, 2010
17. browser makers are implementing stuff that not everyone has agreed to. and it’s ok. Sunday, June 20, 2010
18. border-radius: 12px; -webkit-border-radius: 12px; /* Saf3+, Chrome */ -moz-border-radius: 12px; /* FF1+ */ { } /* Opera 10.5, IE 9 */ Sunday, June 20, 2010
19. div.block { -moz-border-radius: 12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; } Sunday, June 20, 2010
20. browser makers are implementing stuff in bits and pieces over time. and it’s ok. Sunday, June 20, 2010
21. the Css working group (where css is born) is creating the spec over time in “modules” Sunday, June 20, 2010
22. http://www.w3.org/Style/ CSS/current-work Sunday, June 20, 2010
23. let’s get to it Sunday, June 20, 2010
24. Border-radius http://border-radius.com Sunday, June 20, 2010
25. box-shadow http://westciv.com/tools/boxshadows Sunday, June 20, 2010
26. text-shadow http://css3generator.com Sunday, June 20, 2010
27. http://lab.simurai.com/css/iloveblur Sunday, June 20, 2010
28. http://desandro.com/articles/the-new-lens-flare Sunday, June 20, 2010
29. multicolumn layout http://css3generator.com Sunday, June 20, 2010
30. gradients http://gradients.glrzad.com http://westciv.com/tools/gradients http://westciv.com/tools/radialgradients Sunday, June 20, 2010
31. rgba and hsla http://css3generator.com Sunday, June 20, 2010
32. transformations http://westciv.com/tools/transforms Sunday, June 20, 2010
33. CSS animations one cool example: http://anthonycalzadilla.com/css3-ATAT (only works in webkit) -webkit-transform: translate(x,y) rotate(x) Sunday, June 20, 2010
34. font-face http://fontsquirrel.com http://typekit.com Sunday, June 20, 2010
35. http://typefolly.com http://drupal.org/project/google_fonts Sunday, June 20, 2010
36. resources Sunday, June 20, 2010
37. tools http://css3generator.com http://border-radius.com http://westciv.com/tools http://gradients.glrzad.com Sunday, June 20, 2010
38. Dan cederholm Handcrafted css Sunday, June 20, 2010
39. andy clarke hardboiled web design Sunday, June 20, 2010
40. http://www.w3.org/Style/ CSS/current-work Sunday, June 20, 2010
41. http://css3.info Sunday, June 20, 2010
42. http://google.com Sunday, June 20, 2010
43. http://extras.jensimmons.com/ designcamp2010/css3.pdf find me on twitter, irc, drupal.org, and irl: jensimmons have fun :) welcome to the future Sunday, June 20, 2010