Fun CSS Classes to have

/*Gradient Text in Webkit*/
.gradient {
font-size: 100px;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*Inset Text*/
.inset {
   -moz-box-shadow: inset 0 3px 5px rgba(6, 6, 6, 0.1);
   -webkit-box-shadow: inset 0 3px 5px rgba(6, 6, 6, 0.1);
   box-shadow: inset 0 3px 5px rgba(6, 6, 6, 0.1);
}

/*Rounded Corners*/
.smallRound {
	-webkit-border-radius: 3px;
	-webkit-background-clip: padding-box;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none; visibility:hidden; } 

/* Hide only visually, but have it available for screenreaders
   www.webaim.org/techniques/css/invisiblecontent/
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }