CSS3: The Future is Now at DrupalCon San Francisco
-
Upload
jen-simmons -
Category
Technology
-
view
1.281 -
download
2
description
Transcript of CSS3: The Future is Now at DrupalCon San Francisco
![Page 1: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/1.jpg)
CSS3: The Future is Now
DrupalCon San FranciscoApril 2010
![Page 2: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/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
![Page 3: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/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
![Page 4: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/4.jpg)
with just css
You can!
today
![Page 5: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/5.jpg)
butwhat about the
evil one?
![Page 6: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/6.jpg)
ie
![Page 7: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/7.jpg)
well,you can ignore
internet explorer
let it stay in 200X
![Page 8: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/8.jpg)
do websites need to look exactly the same in every
browser?
http://dowebsitesneedtolookexactlythesameineverybrowser.
com
![Page 9: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/9.jpg)
![Page 10: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/10.jpg)
![Page 11: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/11.jpg)
“progressive enhancement”
![Page 12: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/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
![Page 13: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/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
![Page 15: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/15.jpg)
enough about iewhat about
everybody else?
safari
chrome
opera
firefox
![Page 16: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/16.jpg)
browser makers are implementing stuff that not everyone
has agreed to.
and it’s ok.
![Page 17: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/17.jpg)
border-radius: 12px;
-webkit-border-radius: 12px; /* Saf3+, Chrome */
-moz-border-radius: 12px; /* FF1+ */
{
}
/* Opera 10.5, IE 9 */
![Page 18: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/18.jpg)
div.block {-moz-border-radius: 12px;-webkit-border-radius: 12px;-khtml-border-radius: 12px;border-radius: 12px;}
![Page 19: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/19.jpg)
browser makers are implementing stuff in bits and pieces
over time.
and it’s ok.
![Page 20: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/20.jpg)
the Css working group (where css is born)
is creating the spec over time
in
“modules”
![Page 21: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/21.jpg)
http://www.w3.org/Style/CSS/current-work
![Page 22: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/22.jpg)
let’s get to it
![Page 24: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/24.jpg)
box-shadowhttp://westciv.com/tools/boxshadows
![Page 27: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/27.jpg)
gradientshttp://gradients.glrzad.com
http://westciv.com/tools/gradientshttp://westciv.com/tools/radialgradients
![Page 29: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/29.jpg)
transformationshttp://westciv.com/tools/transforms
![Page 30: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/30.jpg)
CSS animations
one cool example:http://anthonycalzadilla.com/css3-ATAT
(only works in webkit)
-webkit-transform: translate(x,y) rotate(x)
![Page 31: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/31.jpg)
font-facehttp://fontsquirrel.com
http://typekit.com
![Page 32: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/32.jpg)
resources
![Page 33: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/33.jpg)
Dan cederholmHandcrafted css
![Page 34: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/34.jpg)
tools
http://css3generator.com
http://border-radius.com
http://westciv.com/tools
http://gradients.glrzad.com
![Page 35: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/35.jpg)
http://www.w3.org/Style/CSS/current-work
![Page 38: CSS3: The Future is Now at DrupalCon San Francisco](https://reader033.fdocuments.net/reader033/viewer/2022061111/54545358b1af9f84228b4a39/html5/thumbnails/38.jpg)
have fun :)welcome to the future