CSS3: The Future is Now at Drupal Design Camp Boston
4 likes927 views
The document discusses the advancements in CSS3 and how they enable modern web design features such as rounded corners, multiple columns, and animations. It addresses concerns about browser compatibility, suggesting a focus on progressive enhancement and providing workarounds for Internet Explorer. Additionally, multiple resources and tools for CSS3 applications are shared, highlighting the evolution and future potential of web design.
CSS3: The Future is Now at Drupal Design Camp Boston
- 1. CSS3:Now The Future is drupal Design camp boston June 2010 http://extras.jensimmons.com/ designcamp2010/css3.pdf 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 layout your content in multiple columns put multiple background images on one thing use translucent colors make drop shadows create gradients and reflections put shadows on text use more fonts on the web have image-based borders on boxes animate stuff Sunday, June 20, 2010
- 4. You can! with just css today Sunday, June 20, 2010
- 5. but what about the evil one? Sunday, June 20, 2010
- 6. Sunday, June 20, 2010 ie
- 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 internet browser* explorer drop shadow none rounded corners square corners gradient solid color translucency opaqueness new font old font * 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
- 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. { -moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ border-radius: 12px; /* 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
- 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
- 43. have fun :) welcome to the future http://extras.jensimmons.com/ designcamp2010/css3.pdf find me on twitter, irc, drupal.org, and irl: jensimmons Sunday, June 20, 2010