box-shadow:

-moz-box-shadow: 3px 3px 3px #000;-webkit-box-shadow: 3px 3px 3px #000;

none color/rgb()

15px 15px15pxinset #012345;

“+”- shadow on the right“-” - shadow on the left

“+”-shadow above“-”-shadow below

0 - shadow sharp>0 - shadow more blurred

horizontal offset vertical offset blur radius color

opacity 13s ease-in-out 11s;

-webkit-transition:-moz-transition:-o-transition:

opacity 3s ease 1s; opacity 3s ease 1s; opacity 3s ease 1s;

cubic-bezier(x1, y1, x2, y2), linear, ease, ease-in, ease-out, ease-in-out

any CSS property that has a color, length or position component can be given a transition : background-color, background-position, border-color, border-spacing, font-size, letter-spacing, margin-bottom, text-shadow... etc

transition:

transition-delaydurationtiming-functionproperty

outline: #012345 solid 12px;

width

(thin, medium, thick)/ number

style

none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit

color

color/rgb()

none, circle, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, inherit

inside

imagetype position

list-style: disc outside url(arrow.png);

land-of-web.com

font:caption; allow the styled element to inherit the typographic properties present in controls and other objects of the user’s system

icon/menu/message-box/small-caption/status-bar

CSS ShortHand Propertyby land-of-web.com

Cheat Sheet

font: italic small-caps bold 14px/16px verdana,sans-serif;

line-height

optional

if any omitted entire line is ignored

familysize

normal/bolder/lighter/100-900 (400=normal,700=bold)

style weightvariant

optional

em/%normal/oblique normal

background: #123456 url(images/image.png) repeat top left fixed, -moz-linear-gradient(top, #ccc, #000);

-webkit-gradient(linear,left top,left bottom, from(#ccc), to(#000))

scroll

X Y (top/bottom/center) (left/right/center)

repeat-x repeat-y no-repeatcolor #hex rgb()

border-radius: 10px/15px;

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

horizontal radii vertical radii

top-lefttop–right bottom–right bottom–left

top-left bottom-righttop-left bottom-right

top-right bottom-left top-right bottom-left

border-radius: 4px 3px 6px / 2px 4px;

-moz-border-radius:

-webkit-border-radius:

border-radius:

top–lefttop–right bottom–rightbottom–left

10px 20px 30px 40px

10px 20px 30px 40px10px 20px 30px 40px

border: solid dotted dashed ridge;

border: 10px 11px 12px 13px;

border: red green blue yellow;

top right bottom left

border: 10px;

top right bottom leftbottomright & left

border: 10px 15px 20px;

top

border: 10px 20px;

right & lefttop & bottom

dotted dashed double groove ridge inset outset

#hex rgb()number unit

border: 4px solid black;

margin:10px 15px 20px;

padding:10px 15px 20px;

top right&leftbottom

margin:10px 20px;padding:10px 20px;

top&bottom right&left

margin: 10px 15px 20px 25px;

padding: 10px 15px 20px 25px;

top rightbottom left