Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webkit CSS3 Development

4,651 views

Published on

This was may present at Silicon Valley Code Camp 09 for showing how much Webkit goes beyond ordinary HTML and CSS. The download material will be available at: http://my/personal/rbiggs/Blog/default.aspx

Published in: Technology, Education

Webkit CSS3 Development

  1. 1. Developing for Webkit <ul><li>Making Web Development Fun Again </li></ul>
  2. 2. CSS3 Shadows <ul><li>Text Shadow </li></ul><ul><ul><li>-webkit-text-shadow </li></ul></ul><ul><ul><li>-webkit-text-stroke </li></ul></ul><ul><ul><li>-webkit-text-fill-color </li></ul></ul><ul><li>Box Shadow </li></ul><ul><ul><li>-webkit-box-shadow </li></ul></ul>
  3. 3. CSS3 border <ul><li>Border Radius </li></ul><ul><ul><li>-webkit-border-radius </li></ul></ul><ul><li>Border Image </li></ul><ul><ul><li>-webkit-border-image </li></ul></ul>
  4. 4. appearance property <ul><li>Appearance Property provides quick look of standard Webkit controls. </li></ul><ul><li>Elements using appearance properties are not customizable. </li></ul>
  5. 5. Css3 gradients <ul><li>Webkit gradient creates a canvas background image on the element </li></ul><ul><li>background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333)); </li></ul>
  6. 6. css3 reflect <ul><li>Water/glass style reflection </li></ul><ul><li>Can use a CSS gradient or png with alpha channel as a mask </li></ul><ul><li>-webkit-box-reflect: direction offset mask-box-image; </li></ul>
  7. 7. css3 transforms <ul><li>Transition: -webkit-transition: left 2s linear </li></ul><ul><li>Scale: -webkit-transform: scale(1.5); </li></ul><ul><li>Rotate: -webkit-transform:rotate(180deg) </li></ul><ul><li>Skew: -webkit-transform: skew(5deg, 5deg); </li></ul>
  8. 8. css3 animation <ul><li>CSS-based keyframes </li></ul><ul><li>@-webkit-keyframes bounce { </li></ul><ul><li>from { </li></ul><ul><li>left: 0px; </li></ul><ul><li>} </li></ul><ul><li>to { </li></ul><ul><li> left: 200px; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  9. 9. Examples of webkit using css3 3D transforms using css3 3D transforms <ul><li>http://webkit.org/blog-files/3d-transforms/morphing-cubes.html </li></ul><ul><li>http://www.satine.org/research/webkit/snowleopard/snowstack.html </li></ul><ul><li>http://www.fofronline.com/experiments/cube-3d/ </li></ul><ul><li>http://girliemac.com/sandbox/flickr_3d.html </li></ul>
  10. 10. We’re hiring! <ul><li>Bee Tan, Hiring Manager </li></ul><ul><li>510 307-8225 </li></ul>Grab A Card

×