Snippets of helpful css to speed up dev

CSS Snippets

/*sprite bg*/
background:url('../images/background/_sprite.png') no-repeat 0px 0px;

/*border radius - each side*/
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

/*border radius - equal sides*/
-webkit-border-radius: 5px;
border-radius: 5px;

/* box sixing - include borders/padding */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

/*text replace*/
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

/*clear a lists styling*/
list-style:none;
margin:0;
padding:0;

/*text shadow*/
text-shadow: 0px 1px 1px #4C4C4E;

/*box shadow*/
-webkit-box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);

/*cross browser min-height*/
Cross browser min-height
min-height: 500px; 
height:auto !important; 
height: 500px; 

/*cross browser inline-block*/
zoom: 1;
*display: inline;

/*image replace*/
display:block;
text-indent:-9999px;
background:url('../images/background/_sprite.png') no-repeat 0px 0px;

/*ie7/8 rgba replacement - First two characters are a hex value of between 0 to 255 rest are the colour
see http://www.telerik.com/support/kb/aspnet-ajax/chart/setting-hexadecimal-value-for-color-transparency-of-radchart-elements.aspx*/
E5 - 90%
CC - 80%
BF - 75%
B2 - 70%
7F - 50%
66 - 40%

background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99061B5D,endColorstr=#99061B5D);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99061B5D,endColorstr=#99061B5D);
zoom:1;

/* Cross browser opacity */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

/* Hide element */
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

/* Clear fix */
.group:after 
{
  content: "";
  display: table;
  clear: both;
}

/* CSS Animations */
-webkit-animation: socialspeech 6s 2s 1 ease-in forwards;
-moz-animation: socialspeech 6s 2s 1 ease-in forwards;
-o-animation: socialspeech 6s 2s 1 ease-in forwards;
animation: socialspeech 6s 2s 1 ease-in forwards;

keyframe-name duration-of-animation delay-before-start animation-method fill-mode

@-webkit-keyframes lightbulb { 20% { opacity: 0;} 80% { opacity: 1;} }
@-moz-keyframes lightbulb { 20% { opacity: 0;} 80% { opacity: 1;} }
@-o-keyframes lightbulb { 20% { opacity: 0;} 80% { opacity: 1;} }
@keyframes lightbulb { 20% { opacity: 0;} 80% { opacity: 1;} }