Advanced Search

CSS3 Solutions for Internet Explorer

/ Published in: PHP
Save to your folder(s)
CSS3 Solutions for Internet Explorer

more info:
http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Opacity / Transparency
  2.  
  3. THE SYNTAX
  4.  
  5. #myElement {
  6.  
  7.     opacity: .4; /* other browsers  and IE9+ */
  8.     filter: alpha(opacity=40); /* IE6+ */
  9.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
  10.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
  11. }
  12.  
  13. Rounded Corners (border-radius)
  14.  
  15. THE SYNTAX
  16.  
  17. .box-radius {
  18. 	border-radius: 15px;
  19. 	behavior: url(border-radius.htc);
  20. }
  21.  
  22. Box Shadow
  23.  
  24. THE SYNTAX
  25. .box-shadow {
  26. 	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
  27. 	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
  28. 	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
  29. }
  30.  
  31. Text Shado
  32.  
  33. THE SYNTAX
  34.  
  35. .text-shadow {
  36. 	text-shadow: #aaa 1px 1px 1px;
  37. }
  38.  
  39. // include jQuery library in your page
  40. // include link to plugin in your page
  41.  
  42. $(document).ready(function(){
  43. 	$(".text-shadow").textShadow();
  44. });
  45.  
  46. Gradients
  47.  
  48. THE SYNTAX
  49.  
  50. #gradient {
  51. 	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
  52. 	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
  53. 	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
  54. 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
  55. }
  56.  
  57. Transparent Background Colors (RGBA)
  58.  
  59. THE SYNTAX
  60.  
  61. #rgba p {
  62. 	background: rgba(98, 135, 167, .4);
  63. }
  64. #rgba p {
  65. 	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
  66. }
  67.  
  68. Multiple Backgrounds
  69.  
  70. THE SYNTAX
  71.  
  72. #multi-bg {
  73. 	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
  74. }
  75.  
  76. #multi-bg {
  77. 	background: transparent url(images/bg-image-1.gif) top left repeat;
  78. 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
  79. 	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
  80. }
  81.  
  82. Element Rotation (CSS Tranformations)\
  83. ´
  84. the sintax
  85.  
  86. #rotate {
  87. 	-webkit-transform: rotate(180deg);
  88. 	-moz-transform: rotate(180deg);
  89. }
  90.  
  91. #rotate {
  92. 	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  93. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.