CSS3 Properties Snippet List

/* RGBA Color Specification */
background-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.3);
 
/* Box Shadow Attributes */
/* (Inset or No, Horiz. (px), Vert. (px), Blur Radius, Spread, Shadow Color) */
 
/* Box Shadow - Standard */
-webkit-box-shadow: 0px 0px 5px 1px #444;
-moz-box-shadow: 0px 0px 5px 1px #444;
box-shadow: 0px 0px 5px 1px #444;
 
/* Box Shadow - Inset */
-webkit-box-shadow: inset 0px 0px 5px 1px #444;
-moz-box-shadow: inset 0px 0px 5px 1px #444;
box-shadow: inset 0px 0px 5px 1px #444;
 
/* Text Shadow */
/* Attributes: Horiz. [px], Vertical Length. [px], Blur Radius. [px], Shadow Color */
text-shadow: 2px 2px 2px #ffffff;
filter: dropshadow(color=#ffffff, offx=2, offy=2);
 
/* Multiple Columns */
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
 
/* Box Resizing */
resize: both; /* horizontal, vertical or both */
overflow: auto;
min-width: 50px; /* suggest a mid-width & min-height */
min-height 50px;
 
/* Border Radius - Different Radius for each corner */
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 8px 7px 3px 2px;
border-radius: 8px 7px 3px 2px;
 
/* Border Radius - Equal Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
 
/* Box Sizing - Border Box Option */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
 
/* Box Sizing - Content Box Option */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
 
/* Outline - (Thickness, Style, Color) */
outline: 2px solid #cf4747;
outline-offset: 10px; /*Delete if you don't want an offset*/
 
/* Transitions - (Property, Duration, Function) */
#myID {
-webkit-transition: weight s ease;
-moz-transition: weight s ease;
-o-transition: weight s ease;
transition: weight s ease;
}
 
/* Transforms - (Scale, Rotate, Translate, Skew) */
-moz-transform: scale(1) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(6deg) translate(0px, 0px) skew(0deg, 0deg);
 
/* Gradients - generated by http://www.colorzilla.com/gradient-editor/ */
background: rgb(214,62,87); /* Old browsers */
background: -moz-linear-gradient(top, rgba(214,62,87,1) 0%, rgba(112,22,26,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,62,87,1)), color-stop(100%,rgba(112,22,26,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d63e57', endColorstr='#70161a',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%); /* W3C */