markdown [CSS cheatsheet] #css

Posted 2021-05-05

/* 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 */
 box-shadow: 0px 0px 5px 1px #444; 

 /* Box Shadow - Inset */
 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 */
border-radius-topleft: 8px;
border-radius-topright: 7px;
border-radius-bottomright: 3px;
border-radius-bottomleft: 2px;
border-radius: 8px 7px 3px 2px;

/* 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);
 background: -moz-linear-gradient(top, rgba(214,62,87,1) 0%, rgba(112,22,26,1) 100%);
 background: -webkit-linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%);
 background: -ms-linear-gradient(top, rgba(214,62,87,1) 0%,rgba(112,22,26,1) 100%);