CSS3: The Future is Now
DrupalCon San FranciscoApril 2010
Jen SimmonsLullabot Trainer
Lead Front-End Developer and architect at workhabit
twitter: jensimmonsirc/d.o: jensimmons
http://extras.jensimmons.com/drupalconsf2010/css3.pdf
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
with just css
You can!
today
butwhat about the
evil one?
ie
well,you can ignore
internet explorer
let it stay in 200X
do websites need to look exactly the same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.
com
“progressive enhancement”
compliantbrowser*
drop shadow
rounded corners
gradient
translucency
new font
none
square corners
solid color
opaqueness
old font
internetexplorer
* safari & chrome, firefox, opera
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
enough about iewhat about
everybody else?
safari
chrome
opera
firefox
browser makers are implementing stuff that not everyone
has agreed to.
and it’s ok.
border-radius: 12px;
-webkit-border-radius: 12px; /* Saf3+, Chrome */
-moz-border-radius: 12px; /* FF1+ */
{
}
/* Opera 10.5, IE 9 */
div.block {-moz-border-radius: 12px;-webkit-border-radius: 12px;-khtml-border-radius: 12px;border-radius: 12px;}
browser makers are implementing stuff in bits and pieces
over time.
and it’s ok.
the Css working group (where css is born)
is creating the spec over time
in
“modules”
http://www.w3.org/Style/CSS/current-work
let’s get to it
box-shadowhttp://westciv.com/tools/boxshadows
gradientshttp://gradients.glrzad.com
http://westciv.com/tools/gradientshttp://westciv.com/tools/radialgradients
transformationshttp://westciv.com/tools/transforms
CSS animations
one cool example:http://anthonycalzadilla.com/css3-ATAT
(only works in webkit)
-webkit-transform: translate(x,y) rotate(x)
font-facehttp://fontsquirrel.com
http://typekit.com
resources
Dan cederholmHandcrafted css
tools
http://css3generator.com
http://border-radius.com
http://westciv.com/tools
http://gradients.glrzad.com
http://www.w3.org/Style/CSS/current-work
have fun :)welcome to the future
