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);
}
CSS3 Selectors
table tr:first-child {
background: #252525;
}
table tr:nth-child(2n+1) {
background: #ebebeb;
}
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;
}
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;
}