Your SlideShare is downloading. ×
Webkit CSS3 Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Webkit CSS3 Development

4,234
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: …

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,234
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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