css3: the future is now at drupal design camp boston
DESCRIPTION
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.TRANSCRIPT
![Page 1: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/1.jpg)
drupal Design camp boston June 2010
http://extras.jensimmons.com/designcamp2010/css3.pdf
CSS3: The Future is Now
Sunday, June 20, 2010
![Page 2: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/2.jpg)
Jen SimmonsLullabot Trainer
Lead Front-End Developer and architect at workhabit
twitter: jensimmonsirc/d.o: jensimmons
http://extras.jensimmons.com/drupalconsf2010/css3.pdf
Sunday, June 20, 2010
![Page 3: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/3.jpg)
wouldn’t you like tomake 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
Sunday, June 20, 2010
![Page 4: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/4.jpg)
with just css
You can!
today
Sunday, June 20, 2010
![Page 5: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/5.jpg)
butwhat about the
evil one?
Sunday, June 20, 2010
![Page 6: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/6.jpg)
ieSunday, June 20, 2010
![Page 7: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/7.jpg)
well,you can ignore
internet explorer
let it stay in 200X
Sunday, June 20, 2010
![Page 8: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/8.jpg)
do websites need to look exactly the same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.
com
Sunday, June 20, 2010
![Page 9: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/9.jpg)
Sunday, June 20, 2010
![Page 10: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/10.jpg)
Sunday, June 20, 2010
![Page 11: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/11.jpg)
“progressive enhancement”
Sunday, June 20, 2010
![Page 12: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/12.jpg)
compliantbrowser*
drop shadow
rounded corners
gradient
translucency
new font
none
square corners
solid color
opaqueness
old font
internetexplorer
* safari & chrome, firefox, opera
Sunday, June 20, 2010
![Page 13: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/13.jpg)
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
Sunday, June 20, 2010
![Page 15: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/15.jpg)
http://code.google.com/chrome/chromeframe
Sunday, June 20, 2010
![Page 16: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/16.jpg)
enough about iewhat about
everybody else?
safari
chrome
opera
firefox
Sunday, June 20, 2010
![Page 17: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/17.jpg)
browser makers are implementing stuff that not everyone
has agreed to.
and it’s ok.Sunday, June 20, 2010
![Page 18: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/18.jpg)
border-radius: 12px;
-webkit-border-radius: 12px; /* Saf3+, Chrome */
-moz-border-radius: 12px; /* FF1+ */
{
}
/* Opera 10.5, IE 9 */
Sunday, June 20, 2010
![Page 19: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/19.jpg)
div.block {-moz-border-radius: 12px;-webkit-border-radius: 12px;-khtml-border-radius: 12px;border-radius: 12px;}
Sunday, June 20, 2010
![Page 20: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/20.jpg)
browser makers are implementing stuff in bits and pieces
over time.
and it’s ok.Sunday, June 20, 2010
![Page 21: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/21.jpg)
the Css working group (where css is born)
is creating the spec over time
in
“modules”Sunday, June 20, 2010
![Page 22: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/22.jpg)
http://www.w3.org/Style/CSS/current-work
Sunday, June 20, 2010
![Page 23: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/23.jpg)
let’s get to it
Sunday, June 20, 2010
![Page 24: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/24.jpg)
Border-radiushttp://border-radius.com
Sunday, June 20, 2010
![Page 25: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/25.jpg)
box-shadowhttp://westciv.com/tools/boxshadows
Sunday, June 20, 2010
![Page 26: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/26.jpg)
text-shadowhttp://css3generator.com
Sunday, June 20, 2010
![Page 27: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/27.jpg)
http://lab.simurai.com/css/iloveblur
Sunday, June 20, 2010
![Page 28: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/28.jpg)
http://desandro.com/articles/the-new-lens-flare
Sunday, June 20, 2010
![Page 29: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/29.jpg)
multicolumn layouthttp://css3generator.com
Sunday, June 20, 2010
![Page 30: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/30.jpg)
gradientshttp://gradients.glrzad.com
http://westciv.com/tools/gradientshttp://westciv.com/tools/radialgradients
Sunday, June 20, 2010
![Page 31: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/31.jpg)
rgba and hslahttp://css3generator.com
Sunday, June 20, 2010
![Page 32: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/32.jpg)
transformationshttp://westciv.com/tools/transforms
Sunday, June 20, 2010
![Page 33: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/33.jpg)
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
![Page 34: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/34.jpg)
font-facehttp://fontsquirrel.com
http://typekit.com
Sunday, June 20, 2010
![Page 35: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/35.jpg)
http://typefolly.comhttp://drupal.org/project/google_fonts
Sunday, June 20, 2010
![Page 36: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/36.jpg)
resources
Sunday, June 20, 2010
![Page 37: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/37.jpg)
tools
http://css3generator.com
http://border-radius.com
http://westciv.com/tools
http://gradients.glrzad.com
Sunday, June 20, 2010
![Page 38: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/38.jpg)
Dan cederholmHandcrafted css
Sunday, June 20, 2010
![Page 39: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/39.jpg)
andy clarkehardboiled web design
Sunday, June 20, 2010
![Page 40: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/40.jpg)
http://www.w3.org/Style/CSS/current-work
Sunday, June 20, 2010
![Page 43: CSS3: The Future is Now at Drupal Design Camp Boston](https://reader038.vdocument.in/reader038/viewer/2022103014/54b820ff4a795940358b45ad/html5/thumbnails/43.jpg)
http://extras.jensimmons.com/designcamp2010/css3.pdf
find me on twitter, irc, drupal.org, and irl: jensimmons
have fun :)welcome to the future
Sunday, June 20, 2010