CSS WEBKIT

create HBox and VBoxcreate HBox and VBox

display: -webkit-box;

-webkit-box-orient:horizontal | vertical;

-webkit-box-flex:1;

Box Sizing  standard  box vs. padding/border insidestandard  box vs. padding/border inside

-webkit-box-sizing: content-box | border-box;

Multiple Columns  newspaper-like columns of text

-webkit-columns: width count-webkit-column-width:    Width

-webkit-column-count:    Number

-webkit-column-gap:      Gutter width

-webkit-column-rule:     Vertical divider, style like border

RGBA  red, green, blue and alpha transparencyred, green, blue and alpha transparency

rgba(0-255, 0-255, 0-255, 0-1) color:rgba(255,255,255,0.8); White with 80% opacity

Border Radius  vendor prefix required for iOS <4.0vendor prefix required for iOS <4.0

-webkit-border-radius: 4px;

-webkit-border-top-left-radius: 4px; For single corners

Multiple Backgrounds  takes full background paramstakes full background params

background:url(image1) repeat, url(image2) no-repeat;

Marquee  create scrolling text across the screencreate scrolling text across the screen

-webkit-marquee: direction repetition style speed

overflow-x: -webkit-marquee;  Required

-webkit-marquee-direction:  left, right, reverse, etc.

-webkit-marquee-repetition:  Number orinfinite;

-webkit-marquee-style:  scroll | alternate | none;

-webkit-marquee-speed:  fast | normal | slow;

Shadows  box and text shadows use same syntaxbox and text shadows use same syntax

box-shadowortext-shadow: x-offsety-offset blur color text-shadow: 01px 5pxrgba(0,0,0,0.3);

Animations

-webkit-animation: name duration timing_function;

-webkit-animation-name:                                            Of @-webkit-keyframes

-webkit-animation-duration:       Time in seconds -webkit-animation-timing-function: ease-in, linear etc.

-webkit-animation-delay:                                  Time until start

-webkit-animation-iteration-count: Count or infinite

@-webkit-keyframes "colorShift"{ /* Give it a name */

    0%   { background-color: red;  }

    100%{ background-color: blue; }

}

/* Call the animation */

#myDiv { -webkit-animation: colorShift 10s linear; }

Transitions

-webkit-transition: opacity 1s linear;

-webkit-transition-property:    Property to change orall

-webkit-transition-duration:    Time in seconds -webkit-transition-timing-function:     linear, ease-in, ease-out, ease-in-out, etc.

Gradients  used in background-imageused in background-image

-webkit-gradient(

    type,                     Linear or radial     x-offset y-offset,        Starting position     x-offset y-offset,        Ending position     color-stop(0.0,color), As many stops as you     color-stop(1.0,color)         want from 0 to 1

)

background-image:-webkit-gradient(     linear,     0 0,

    0 100%,

    from(red), color-stop(0.5, green), to(blue)

)

Background Size

-webkit-background-size: length_x length_y

Text Size Adjust

-webkit-text-size-adjust: percentage | auto | none;

Text Overflow

text-overflow:ellipsis; overflow:hidden; 

Required white-space:nowrap; Required