css sheat sheet shorthand property
DESCRIPTION
CSS Guide For Sheat Sheet Shorthand PropertyTRANSCRIPT
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