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.

1. CSS3:Now
The Future is
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 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. You can!
with just css
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 internet
browser* explorer
drop shadow none
rounded corners square corners
gradient solid color
translucency opaqueness
new font old font
* 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. {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* 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