CSS3 for Older Browsers

CSS3 PIE

border-radius

.box {
	border-radius: 10px;
	behavior: url(PIE.htc);
}
				

box-shadow + RGBA Colors

.box {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .75);
	behavior: url(PIE.htc);
}
				

background gradient

.box {
	background: -webkit-linear-gradient(top, #0072bc, #00bff3); /* Safari, Chrome */
		background: -moz-linear-gradient(top, #0072bc, #00bff3);  /* Firefox */
		background: -o-linear-gradient(top, #0072bc, #00bff3);  /* Opera */
		background: -ms-linear-gradient(top, #0072bc, #00bff3);  /* IE10 */
		
	-pie-background: linear-gradient(#0072bc, #00bff3);  /* IE6+ */
	behavior: url(PIE.htc);
}
				

multiple backgrounds

.box {
	background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* Modern Browsers */
	
	-pie-background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
	behavior: url(PIE.htc);
}
				

Selectivizr

 
 
 
 
 
 

CSS3 Selectors

table tr:first-child {
	background: #252525;
}
				
table tr:nth-child(2n+1) {
	background: #ebebeb;
}
				

jQuery

Shadow This!

text-shadow

<script type="text/javascript" src="http://www.hintzmann.dk/testcenter/js/jquery/textshadow/jquery.textshadow.js"></script> <!-- jQuery Shadow Script -->
<script type="text/javascript">
	$(document).ready(function(){
	  $(".txt").textShadow();
	})
</script>
				
.txt {		
	text-shadow: 2px 2px 2px black;
}
				

IE Special Filters

background gradient !! AFFECT ONLY IE !!

.box {
	background: #FFFFFF;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6ÐIE9 */
}
				

transform

.box {
	/* Created with: http://www.useragentman.com/IETransformsTranslator/ */
	/* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";	   
   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9848077530122079,
            M12=-0.17364817766693127,
            M21=0.17364817766693127,
            M22=0.9848077530122079,
            SizingMethod='auto expand');
   margin-left: -14px; 
   margin-top: -21px;
}