CSS3: The Future is Now at DrupalCon San Francisco

1,171 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,171
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS3: The Future is Now at DrupalCon San Francisco

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

×