Here are some useful CSS3 cheat sheet for UI designer

CSS3 is more efficient and flexible to styling the page with animations, transitions, colors, etc... without the support of some plugins like flash, JavaScript, etc... (CSS3 Cheat Sheet)

Here is the cheat sheet of css3 below.

1. Selectors

El[att$="val"]    Match ending values
El[att*="val"]    Match substring values
El:not(s)            Element that is not 's'.
El:nth-child(n)   Element that is n-th child of its parent
El:target            Element that is target of referring URL

Note: div#bar is a target for http://foo/#bar

2. Flexible box model

display: -webkit-box;
-webkit-box-orient: horizontal | vertical;
-webkit-box-flex: 1;

3. Box Sizing standard

box vs. padding//border inside

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

4. 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

5. RGBA

red,, green,, blue and alpha transparency

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

6. Border Radius

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

7. Multiple Backgrounds

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

8. Marquee

Create 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 or infinite;
-webkit-marquee-style: scroll | alternate | none;
-webkit-marquee-speed: fast | normal | slow;

9. Shadows

box-shadow or text-shadow: x-offset y-offset blur color
text-shadow: 0 1px 5px rgba(0,0,0,0.3);

10. Animations

-webkit-animation: name duration timing_function;
-webkit-animation-name: Of @-webkit-keyframe
-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

Example:
@-webkit-keyframes "colorShift" { /* Give it a name */
0% { background-color: red; }
100% { background-color: blue; }
}
/* Call the animation */
#myDiv { -webkit-animation: colorShift 10s linear; }

11. Transitions

-webkit-transition: opacity 1s linear;
-webkit-transition-property: Property to change or all
-webkit-transition-duration: Time in seconds
-webkit-transition-timing-function: linear, ease-in, ease-out, ease-in-out, etc.

12. Gradients

-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
)
Example:
background-image: -webkit-gradient(
linear,
0 0,
0 100%,
from(red), color-stop(0.5, green), to(blue)
)

13. Background size

-webkit-background-size: length_x length_y

14. Text Size Adjust

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

15. Text Overflow

text-overflow: ellipsis;
overflow: hidden; Required
white-space: nowrap; Required

16. Font Face

@font-face {
font-family: 'MyFont';
src: url('MyFont.file'); }

Hope you find this useful!