webkit css3 development

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