CSS3: The Future is Now at DrupalCon San Francisco
Upcoming SlideShare
Loading in...5
×
 

CSS3: The Future is Now at DrupalCon San Francisco

on

  • 1,259 views

The next generation of CSS is here, and it's being used on thousands of sites. Learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget ...

The next generation of CSS is here, and it's being used on thousands of sites. Learn about the new styles, and how to use them today. Rounded corners, gradients, translucent color, shadows — forget making images, do it with CSS.

Statistics

Views

Total Views
1,259
Views on SlideShare
1,236
Embed Views
23

Actions

Likes
2
Downloads
4
Comments
0

3 Embeds 23

http://jensimmons.com 21
http://localhost:8888 1
http://www.jensimmons.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS3: The Future is Now at DrupalCon San Francisco CSS3: The Future is Now at DrupalCon San Francisco Presentation Transcript

  • CSS3:Now The Future is DrupalCon San Francisco April 2010
  • 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
  • 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 View slide
  • You can! with just css today View slide
  • but what 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”
  • compliant internet browser* explorer drop shadow none rounded corners square corners gradient solid color translucency opaqueness new font old font * 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
  • http://modernizr.com
  • enough about ie what about everybody else? safari chrome opera firefox
  • browser makers are implementing stuff that not everyone has agreed to. and it’s ok.
  • { -moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ border-radius: 12px; /* 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
  • Border-radius http://border-radius.com
  • box-shadow http://westciv.com/tools/boxshadows
  • text-shadow http://css3generator.com
  • multicolumn layout http://css3generator.com
  • gradients http://gradients.glrzad.com http://westciv.com/tools/gradients http://westciv.com/tools/radialgradients
  • rgba and hsla http://css3generator.com
  • transformations http://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-face http://fontsquirrel.com http://typekit.com
  • resources
  • Dan cederholm Handcrafted 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
  • http://css3.info
  • http://google.com
  • have fun :) welcome to the future