CSS3: The Future is Now // DrupalCon San Francisco

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

Transcript

1. CSS3: The Future is Now DrupalCon San Francisco April 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
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
4. with just css You can! today
5. but what about the evil one?
6. ie
7. well, you can ignore internet explorer let it stay in 200X
8. do websites need to look exactly the same in every browser? http:// dowebsitesneedtolookexactlythesameineverybrowser. com
11. “progressive enhancement”
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
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
14. http://modernizr.com
15. enough about ie what about everybody else? safari chrome opera firefox
16. browser makers are implementing stuff that not everyone has agreed to. and it’s ok.
17. border-radius: 12px; -webkit-border-radius: 12px; /* Saf3+, Chrome */ -moz-border-radius: 12px; /* FF1+ */ { } /* Opera 10.5, IE 9 */
18. div.block { -moz-border-radius: 12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; }
19. browser makers are implementing stuff in bits and pieces over time. and it’s ok.
20. the Css working group (where css is born) is creating the spec over time in “modules”
21. http://www.w3.org/Style/ CSS/current-work
22. let’s get to it
23. Border-radius http://border-radius.com
24. box-shadow http://westciv.com/tools/boxshadows
25. text-shadow http://css3generator.com
26. multicolumn layout http://css3generator.com
27. gradients http://gradients.glrzad.com http://westciv.com/tools/gradients http://westciv.com/tools/radialgradients
28. rgba and hsla http://css3generator.com
29. transformations http://westciv.com/tools/transforms
30. CSS animations one cool example: http://anthonycalzadilla.com/css3-ATAT (only works in webkit) -webkit-transform: translate(x,y) rotate(x)
31. font-face http://fontsquirrel.com http://typekit.com
32. resources
33. Dan cederholm Handcrafted css
34. tools http://css3generator.com http://border-radius.com http://westciv.com/tools http://gradients.glrzad.com
35. http://www.w3.org/Style/ CSS/current-work
36. http://css3.info
37. http://google.com
38. have fun :) welcome to the future