Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3: The Future is Now // DrupalCon San Francisco

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.


Jen Simmons

April 19, 2010

More Decks by Jen Simmons

Other Decks in Technology


  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

  8. do websites need to look exactly the same in every

    browser? http:// dowebsitesneedtolookexactlythesameineverybrowser. com
  9. None
  10. None
  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

  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