Border Radius– IE9 , FF3.6+ , Chrome Beta , Safari , Opera
/*Rounded Corners Look and Feel*/
.radius{
border-radius:10px; /*IE9*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
Dropshadow– IE9 (maybe), FF3.6+ , Chrome Beta , Safari
/*Webkit and Geko based shadow*/
.shadow{
box-shadow: 8px 8px 8px 4px #888; /*IE9*/
-webkit-box-shadow: 8px 8px 8px 5px #888;
-moz-box-shadow: 8px 8px 8px 4px #888;
}
Opacity / Alpha– IE9 , FF3.6+ , Chrome Beta , Safari , Opera
/*Opacity / Alpha*/
.alpha{
filter:alpha(opacity=80); /*IE6+*/
-moz-opacity:0.8;
-webkit-opacity: 0.8;
opacity: 0.8;
}
Placeholder for Forms– IE9 , Chrome Beta , Safari
<input placeholder="search this site">
Transform– Webkit, Opera, Geko
/*Transforms (Webkit, Opera, Geko)*/
.transform {
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
}
/*Transforms in 3D (Webkit)*/
.move {
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
}
.move:hover {
background-color: #fc3;
-webkit-transform: rotate(360deg) scale(2);
}
Font face– IE8 , FF3.6+ , Chrome Beta , Safari , Opera
@font-face {
font-family: 'interstate';
src: url('/fonts/interstate.otf');
}
Gradients– IE9 (maybe) , FF3.6+ , Chrome Beta , Safari , Opera
/*Gradients*/
.gradient{
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
TextStroke– IE9 (maybe) Chrome Beta , Safari
/*Text Stroke, Webkit Only*/
.stroke {
-webkit-text-stroke: 2.0px #000000;
-webkit-text-fill-color: #ff0000;
text-stroke: 2.0px #000000;
text-fill-color: #ff0000;
}