Skip to content

Instantly share code, notes, and snippets.

@dferrandizmont
Created December 16, 2018 10:42
Show Gist options
  • Save dferrandizmont/6dce35fa2b8ea9d85a90397898d845a4 to your computer and use it in GitHub Desktop.
Save dferrandizmont/6dce35fa2b8ea9d85a90397898d845a4 to your computer and use it in GitHub Desktop.
[CSS cheatsheet] #css

/* 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%);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment