==================
HSLA colors
==================
Code:
.element {
    background: hsl(207, 38%, 47%);
}

.element2 {
    background: hsla(207, 38%, 47%, .8);
}
==================
RGBA colors
==================
Code:
.element {
    background: rgba(98, 135, 167, .5);
}
==================
Text Shadow
==================
Code:
.element {
    text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
}
==================
Translate
==================
Code:
.element {
    -webkit-transform: translate(25px, 50px);
    -moz-transform: translate(25px, 50px);
    -o-transform: translate(25px, 50px);
    -ms-transform: translate(25px, 50px);
    transform: translate(25px, 50px);
}
==================
Border Radius
==================
Code:
.element {
    -webkit-border-radius: 10px 11px 12px 13px;
    -moz-border-radius: 10px 11px 12px 13px;
    border-radius: 10px 11px 12px 13px;
}

.element2 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
==================
Multiple Backgrounds
==================
Code:
.element {
    background: url(images/example.png) center center no-repeat,
                url(images/example-2.png) top left repeat;
}
==================
Change Transform Origin, such as for Rotate
==================
Code:
.element {
    -webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;
    transform-origin: 20px 20px;
}
==================
Rotate
==================
Code:
.element {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
==================
Opacity
==================
Code:
.element {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
    filter: alpha(opacity=40); /* for IE6-IE8 */
    opacity: .4;
}
==================
Skew
==================
Code:
.element {
    -webkit-transform: skew(45deg, 30deg);
    -moz-transform: skew(45deg, 30deg);
    -o-transform: skew(45deg, 30deg);
    -ms-transform: skew(45deg, 30deg);
    transform: skew(45deg, 30deg);
}
==================
Scale
==================
Code:
.element {
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -o-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
}
==================
Font Face
==================
Code:
@font-face {
    font-family: 'Font Name';
    src: url('../fonts/fontname-webfont.eot');
    src: url('../fonts/fontname-webfont.eot?iefix') format('eot'),
         url('../fonts/fontname-webfont.woff') format('woff'),
         url('../fonts/fontname-webfont.ttf') format('truetype'),
         url('../fonts/fontname-webfont.svg#webfontjSpbZQRv') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Font Name', 'fallback font', serif;
}
==================
Box Shadow
==================
Code:
.element {
    -webkit-box-shadow: #000 5px 5px 10px 3px inset;
    -moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
    box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
}
==================
Transitions
==================
Code:
.element {
    background-color: red;
    -webkit-transition: background-color linear .8s;
    -moz-transition: background-color linear .8s;
    -o-transition: background-color linear .8s;
    transition: background-color linear .8s;
}

.element:hover {
    background-color: blue;
}
==================
Basic Selectors
==================
Code:
* (universal selector), 
> (child selector), 
:first-child, 
:link, 
:visited, 
:active, 
:hover, 
:focus, 
:lang(), 
+ (adjacent sibling selector), 
[attr], 
[attr="val"], 
[attr~="val"], 
[attr|="bar"], 
.foo (class selector), 
#foo (id selector)
==================
Advanced Selectors
==================
Code:
[foo^="bar"], 
[foo$="bar"], 
[foo*="bar"], 
:root, 
:nth-child(), 
:nth-last-child(), 
nth-of-type, 
nth-last-of-type(), 
:last-child, 
:first-of-type, 
:last-of-type, 
:only-child, 
:only-of-type, 
:empty, 
:target, 
:enabled, 
:disabled, 
:checked, 
:not(), 
~ (general sibling)
==================
Counters
==================
Code:
body {
    counter-reset: chapter;      /* Create a chapter counter */
}
h1 {
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h1:before {
    content: "Chapter " counter(chapter) ". ";
}
h2 {
    counter-increment: section;
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}
Code:
body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
h3:before {
  counter-increment: section;               /* Increment the section counter*/
  content: "Section" counter(section) ": "; /* Display the counter */
}
Code:
ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section,".") " ";    /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
                                         /* if you need to support < IE8 then
                                            make sure there is no space after 
                                            the ','
}
Code:
body {
    counter-reset: chapter;      /* Create a chapter counter */
}
h1 {
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
h1:before {
    content: "Chapter " counter(chapter) ". ";
}
h2 {
    counter-increment: section;
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}
==================
::before and ::after
==================

==================
inline-block
==================

==================
min/max-width/height
==================

==================
outline
==================
The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.
https://developer.mozilla.org/en-US/...eb/CSS/outline

==================
position:fixed
==================
Method of keeping an element in a fixed location regardless of scroll position

==================
Table display
==================
Method of displaying elements as tables, rows, and cells

==================
Media Queries
==================

==================
word-wrap (word-break)
==================
Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the word-wrap property.

==================
Text-overflow
==================
Append ellipsis when text overflows its containing element

==================
rem (root em)
==================
Type of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units.