Webkit CSS3 Development

4,498 views
4,391 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
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,498
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

×