Created
March 5, 2012 07:50
-
-
Save bullock/1977346 to your computer and use it in GitHub Desktop.
CSS3 Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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