Skip to content

Instantly share code, notes, and snippets.

@bullock
Created March 5, 2012 07:50
Show Gist options
  • Save bullock/1977346 to your computer and use it in GitHub Desktop.
Save bullock/1977346 to your computer and use it in GitHub Desktop.
CSS3 Generator
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*--------------------------------------Radius--------------------*/
/*border-radius:[Top Left] [Top right] [Bottom Right] [Bottom Left]*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 9px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 6px 8px 9px 5px;
border-radius: 6px 8px 9px 5px;
/*--------------------------------------Shadow--------------------*/
/*-webkit-box-shadow: [inset/no] [Horizontal Length] [Vertical Length] [Blur Radius] [Spread] [Hex/rgb];*/
-webkit-box-shadow: inset 3px 4px 4px -1px #000;
-moz-box-shadow: inset 3px 4px 4px -1px #000;
box-shadow: inset 3px 4px 4px -1px #000;
/*--------------------------------------Text Shadow--------------------*/
/*text-shadow:[Horizontal Length] [Vertical Length] [Blur Radius] [Shadow Color];*/
text-shadow: 2px 4px 5px #a41bd1;
filter: dropshadow(color=#a41bd1, offx=2, offy=4);
/*--------------------------------------Box Resize--------------------*/
resize: horizontal;/*[horizontal/vertical/both]*/
overflow: auto;
min-width: 50px; /*suggest a mid-width & min-height*/
min-height 50px;
/*-----------------opacity------------------------------------*/
filter:alpha(opacity=95);/*IE */
-moz-opacity:0.95;/*FireFox*/
-khtml-opacity: 0.95;
opacity: 0.95;/*Chrome, Opera, Safari*/
/*--------------------------------------Outline--------------------*/
/*outline:[Outline Thickness] [Outline Style:inherit/dotted/solid/groove/ridge/inset/outset/double/auto] [Outline Color];*/
outline: 1px dashed #852476;
outline-offset: 10px; /*Delete if you don't want an offset*/
/*--------------------------------------Box-Sizing--------------------*/
/*Sizing Option:[content-box/border-box]*/
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*--------------------------------------Transform--------------------*/
/*transform:[Scale(0.1-2)] [Rotate] [Translate(X,Y)] [Skew(X,Y)];*/
-moz-transform: scale(1.1) rotate(-180deg) translate(2px, 2px) skew(3deg, 0deg);
-webkit-transform: scale(1.1) rotate(-180deg) translate(2px, 2px) skew(3deg, 0deg);
-o-transform: scale(1.1) rotate(-180deg) translate(2px, 2px) skew(3deg, 0deg);
-ms-transform: scale(1.1) rotate(-180deg) translate(2px, 2px) skew(3deg, 0deg);
transform: scale(1.1) rotate(-180deg) translate(2px, 2px) skew(3deg, 0deg);
/*--------------------------------------------Gradient---------------------*/
/*http://www.colorzilla.com/gradient-editor/*/
background: #faa51a; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(-45deg, #faa51a 10%, #f47a20 35%, #faa51a 76%, #f47a20 92%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(10%,#faa51a), color-stop(35%,#f47a20), color-stop(76%,#faa51a), color-stop(92%,#f47a20)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #faa51a 10%,#f47a20 35%,#faa51a 76%,#f47a20 92%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #faa51a 10%,#f47a20 35%,#faa51a 76%,#f47a20 92%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #faa51a 10%,#f47a20 35%,#faa51a 76%,#f47a20 92%); /* IE10+ */
background: linear-gradient(-45deg, #faa51a 10%,#f47a20 35%,#faa51a 76%,#f47a20 92%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faa51a', endColorstr='#f47a20',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
/*--------------------------------------------Transition---------------------*/
/*transition:[Property:background/color/height/weight/outline] [Duration:(num)s/ms] [Function:ease/linear/ease-in/esae-out/ease-in-out];
*/#myID {
-webkit-transition: height 30ms ease-out;
-moz-transition: height 30ms ease-out;
-o-transition: height 30ms ease-out;
transition: height 30ms ease-out;
}
/*-------------------------------------RGBA---------------------*/
background-color: rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.3);
/*-------------------------------------Multiple Columns---------------------*/
-moz-column-count: 20;
-moz-column-gap: 2px;
-webkit-column-count: 20;
-webkit-column-gap: 2px;
column-count: 20;
column-gap: 2px;
/*-------------------------------------CSS3 Selectors---------------------*/
/*http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment