Embed Size (px)
DESCRIPTION
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
Citation preview
Developing for WebkitDeveloping for WebkitDeveloping for WebkitDeveloping for WebkitMaking Web Development Fun AgainMaking Web Development Fun Again
CSS3 ShadowsCSS3 Shadows
Text Shadow
-webkit-text-shadow
-webkit-text-stroke
-webkit-text-fill-color
Box Shadow
-webkit-box-shadow
Text Shadow
-webkit-text-shadow
-webkit-text-stroke
-webkit-text-fill-color
Box Shadow
-webkit-box-shadow
CSS3 borderCSS3 border
Border Radius
-webkit-border-radius
Border Image
-webkit-border-image
Border Radius
-webkit-border-radius
Border Image
-webkit-border-image
appearance propertyappearance property
Appearance Property provides quick look of standard Webkit controls.
Elements using appearance properties are not customizable.
Appearance Property provides quick look of standard Webkit controls.
Elements using appearance properties are not customizable.
Css3 gradientsCss3 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));
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));
css3 reflectcss3 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;
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;
css3 transformscss3 transforms
Transition: -webkit-transition: left 2s linear
Scale: -webkit-transform: scale(1.5);
Rotate: -webkit-transform:rotate(180deg)
Skew: -webkit-transform: skew(5deg, 5deg);
Transition: -webkit-transition: left 2s linear
Scale: -webkit-transform: scale(1.5);
Rotate: -webkit-transform:rotate(180deg)
Skew: -webkit-transform: skew(5deg, 5deg);
css3 animationcss3 animation
CSS-based keyframes
@-webkit-keyframes bounce {
from {left: 0px;
}to {
left: 200px;
}
}
CSS-based keyframes
@-webkit-keyframes bounce {
from {left: 0px;
}to {
left: 200px;
}
}
Examples of webkitusing css3 3D transformsExamples of webkitusing 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
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
We’re hiring!We’re hiring!
Bee Tan, Hiring Manager
510 307-8225
Bee Tan, Hiring Manager
510 307-8225
Grab A CardGrab A CardGrab A CardGrab A Card
