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
drupal Design camp boston June 2010
http://extras.jensimmons.com/designcamp2010/css3.pdf
CSS3: The Future is Now
Sunday, June 20, 2010
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
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
with just css
You can!
today
Sunday, June 20, 2010
butwhat about the
evil one?
Sunday, June 20, 2010
ieSunday, June 20, 2010
well,you can ignore
internet explorer
let it stay in 200X
Sunday, June 20, 2010
do websites need to look exactly the same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.
com
Sunday, June 20, 2010
Sunday, June 20, 2010
Sunday, June 20, 2010
“progressive enhancement”
Sunday, June 20, 2010
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
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
http://code.google.com/chrome/chromeframe
Sunday, June 20, 2010
enough about iewhat about
everybody else?
safari
chrome
opera
firefox
Sunday, June 20, 2010
browser makers are implementing stuff that not everyone
has agreed to.
and it’s ok.Sunday, June 20, 2010
border-radius: 12px;
-webkit-border-radius: 12px; /* Saf3+, Chrome */
-moz-border-radius: 12px; /* FF1+ */
{
}
/* Opera 10.5, IE 9 */
Sunday, June 20, 2010
div.block {-moz-border-radius: 12px;-webkit-border-radius: 12px;-khtml-border-radius: 12px;border-radius: 12px;}
Sunday, June 20, 2010
browser makers are implementing stuff in bits and pieces
over time.
and it’s ok.Sunday, June 20, 2010
the Css working group (where css is born)
is creating the spec over time
in
“modules”Sunday, June 20, 2010
http://www.w3.org/Style/CSS/current-work
Sunday, June 20, 2010
let’s get to it
Sunday, June 20, 2010
Border-radiushttp://border-radius.com
Sunday, June 20, 2010
box-shadowhttp://westciv.com/tools/boxshadows
Sunday, June 20, 2010
text-shadowhttp://css3generator.com
Sunday, June 20, 2010
http://lab.simurai.com/css/iloveblur
Sunday, June 20, 2010
http://desandro.com/articles/the-new-lens-flare
Sunday, June 20, 2010
multicolumn layouthttp://css3generator.com
Sunday, June 20, 2010
gradientshttp://gradients.glrzad.com
http://westciv.com/tools/gradientshttp://westciv.com/tools/radialgradients
Sunday, June 20, 2010
rgba and hslahttp://css3generator.com
Sunday, June 20, 2010
transformationshttp://westciv.com/tools/transforms
Sunday, June 20, 2010
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
font-facehttp://fontsquirrel.com
http://typekit.com
Sunday, June 20, 2010
http://typefolly.comhttp://drupal.org/project/google_fonts
Sunday, June 20, 2010
resources
Sunday, June 20, 2010
tools
http://css3generator.com
http://border-radius.com
http://westciv.com/tools
http://gradients.glrzad.com
Sunday, June 20, 2010
Dan cederholmHandcrafted css
Sunday, June 20, 2010
andy clarkehardboiled web design
Sunday, June 20, 2010
http://www.w3.org/Style/CSS/current-work
Sunday, June 20, 2010
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