TBCave.com

Tap Colors

-webkit-tap-highlight-color: color;

COLOR: RGB color flash on tap

Image Reflection

-webkit-box-reflect: direction offset mask-box-image;

DIRECTION: above, below, left or right
OFFSET: Distance between object and beginning of reflextion in px.
MASK-BOX-IMAGE: Image used to mask the reflection

Rounded Corners

-webkit-border-radius: px;

-webkit-border-radius: 5px;

-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;

You can also specify top / bottom, right / left
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;

Rotate

-webkit-transform: rotate(DEG);

-webkit-transform: rotate(-5deg);

ROTATE: Degrees as positive or negative

Skew

-webkit-transform: skew(X,Y);

Line1
Line2
-webkit-transform: skew(5deg,5deg)
Line4
Line5

Line1
Line2
-webkit-transform: skew(5deg,10deg)
Line4
Line5

SKEW: Degrees of the X skew, Degrees of the Y skew

Scale

-webkit-transform: scale(X,Y);

X X X X X X

Scale takes degrees as positive or negative for X then Y

NOTES: There are actually six Xs to the left of the image in order to move it over to the right. This seemed pretty straightforward to me as a way to do a cheap zoom until I wondered what would happen with a div using a negative number as an image will flip with negative numbers (like image reflection).

Just a regular H3 inside a div

-webkit-transform: scale(-1,-1);

Now is that cool or what? It's just two identical divs one right after the other, but applying the scale transform with -1 on the 2nd one. The effect is broken if you put a line break between them, but you still get a div with inverted text.

Translate

-webkit-transform: translate(px,px);

Translate takes px as positive and negative of X then Y

Image Shadows

-webkit-box-shadow: hoff voff blur color;

HOFF: Horizontal offset
VOFF: Vertical offset
BLUR: Blur offset
COLOR: RGB color of shadow

Marquee

-webkit-marquee: direction increment repetition style speed;

TBCave.com - It's about whatever.

DIRECTION: left /backwards or right / forwards
INCREMENT: small / medium / large or in px
REPETITION: How many times to repeat
STYLE: alternate, none, scroll or slide
SPEED: slow / normal / fast

Text Outline

-webkit-text-stroke: width color;