The next generation of CSS is here, and it's being used on thousands of sites. Come learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.
I cover the state of cross-browser support and tips for implementing graceful fallbacks. I talk about the future and where CSS3 is going. And I provide resources on where to learn more.
Gen AI in Business - Global Trends Report 2024.pdf
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
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
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
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