User Interface Cheatsheet
Box Shadow
The CSS box-shadow properties and values are listed below.
box-shadow:
none /* default, no shadow */
h-offset /* required, horizontal offset of the shadow, positive moves the shadow right, negative moves the shadow left */
v-offset /* required, vertical offset of the shadow, positive moves the shadow below, negative moves the shadow above */
blur /* optional, blur radius, the higher the number, the more blurred the shadow */
spread /* optional, spread radius, positive value increases the shadow size, negative value decreases the shadow size */
color /* optional, shadow color, default value is text color */
inset /* optional, changes shadow to inner shadow */
initial /* sets this to default value */
inherit /* inherits this property from its parent element */
Border Radius
The CSS border-radius properties and values are listed below.
border-radius:
<length> /* defines shape of corners, default is 0 */
% /* defines shape of corners in % */
initial /* sets this property to default value */
inherit /* inherits this property from its parent element */
Colors
The CSS color properties and values are listed below.
- colors
color /* specifies the text color */
background-color /* specifies the background color */
initial /* sets property to default value */
inherit /* inherits this property from its parent element */
Fonts
The CSS font properties and values are listed below.
- fonts
font-style /* specifies font style, "normal" is default */
font-variant /* specifies font variant, "normal" is default */
font-weight /* specifies font weight, "normal" is default */
font-size/line-height /* specifies font size and line height, "normal" is default */
font-family /* specifies font family, default depends on browser */
caption /* uses the font used by captioned controls (like buttons, drop-downs, etc.) */
icon /* uses font used by icon labels */
menu /* uses font used by drop-down menus */
message-box /* uses font used by dialog boxes */
small-caption /* smaller version of caption text */
status-bar /* uses font used by the status bar */
initial /* sets property to its default value */
inherit /* inherits this property from its parent element */
Lists
The CSS list properties and values are listed below.
- lists
list-style /* sets all list properties in one declaration */
list-style-image /* specifies image as list-item marker */
list-style-position /* specifies position of the list-item markers */
list-style-type /* specifies type of list-item marker */
Background
The CSS background properties and values are listed below.
- background
background /* shorthand property for setting all the background properties in one declaration */
background-clip /* specifies the painting area of the background */
background-color /* specifies the background color */
background-image /* specifies one or more background images for an element */
background-origin /* specifies where the background image(s) is/are positioned */
background-size /* specifies the size of the background image(s) */