How to use CSS3 with the IE filter to achieve gradient and projection effects

This article mainly introduces the use of CSS3 with the IE filter to achieve gradient and projection of the effect of some methods, although IE is about to exit the historical stage, but also for the Edge browser related development to accumulate experience, the need for friends can refer to the next

The implementation of linear gradient in CSS3 and IE filters
For perfectionists, using a picture for a gradient is a painful thing to do, like having a booger that doesn't pull out the same pain =. So for the normal gradient, you can use CSS to solve the not to use the image.
CSS3 provides us with a linear-gradient method that allows you to set gradients directly on the background.

<! doctype>   <style>   p {     width:100px;height:100px;text-align:center;     font:16px/100px ' Microsoft Jas Black '; color: #FFF;     /* Below is the linear gradient of CSS3 *  /background:-webkit-linear-gradient (top, #FD0, #C30);     Background:-moz-linear-gradient (Top, #FD0, #C30);     Background:-o-linear-gradient (Top, #FD0, #C30);   }   </style>   <p> Cobalt (ii) carbonate </p>

But CSS3 is also a very painful thing, he needs a browser prefix. Cause this thing to write three lines. This method usually uses three parameters (more colors can also be added with more parameters, this is later). The first parameter is the direction of the gradient, top is from top to bottom, as far as left, right, bottom effect is easy to pull out from top I will not wordy. CSS3 also supports a specific angle of the gradient, the first parameter can be used in degrees such as 45deg is the bevel gradient, but this thing is difficult to achieve on IE, there is not much to say. The second third parameter is the color of the gradient, which can be seen at a glance from the code. CSS3 colors can be used in RGBA to achieve transparency, such as 50% transparent red: Rgba (255,0,0,0.5), note that the transparent channel range is between 0 and 1.
Then say that the pit Father Ie,ie under need through the gradient to achieve, for IE9 that dabbler CSS3 I have spit trough weakness, honest filter better.

<! doctype>   <style>   p {     width:100px;height:100px;text-align:center;     font:16px/100px ' Microsoft Jas Black '; color: #FFF;     /* Following is the linear gradient of IE *  /filter:progid:DXImageTransform.Microsoft.Gradient (       startcolorstr= #FFDD00, endcolorstr=# CC3300  );   }   </style>   <p> Cobalt (ii) carbonate </p>

See, IE is also easy to implement such a simple gradient, although the code is a bit longer. It is important to note that the colors in the filter cannot be defined with simple #hhh, and must be written in full six-bit hexadecimal. If you need the same lightness, add two bits in front as transparency, such as 50% transparent red: #80FF0000. In the gradient direction, ie does not CSS3 so rich direction can be rotated, but the most basic vertical and horizontal can be achieved. The default is from the top down gradient, you can add gradienttype=1 let the gradient into left to right.

P {     filter:progid:DXImageTransform.Microsoft.Gradient (       startcolorstr= #FFDD00, endcolorstr= #CC3300, Gradienttype=1     );   }

Since both filters and CSS3 can be implemented in a compatible way, a full compatibility is the combination of the above methods.

<! doctype>   <style>   p {     width:100px;height:100px;text-align:center;     font:16px/100px ' Microsoft Jas Black '; color: #FFF;     /* Fully compatible linear gradient *  /background:-webkit-linear-gradient (top, #FD0, #C30);     Background:-moz-linear-gradient (Top, #FD0, #C30);     Background:-o-linear-gradient (Top, #FD0, #C30);     Filter:progid:DXImageTransform.Microsoft.Gradient (       startcolorstr= #FFDD00, endcolorstr= #CC3300  );   }   </style>   <p> Cobalt (ii) carbonate </p>

The implementation of element projection effect in CSS3 and IE filters
In accordance with the usual practice, first talk about the CSS3 projection effect.

<! doctype>   <style>   p {     width:100px;height:100px;text-align:center;     font:14px/100px Microsoft ya Black;     border:1px solid #CCC;     /*CSS3 Projection effect */  box-shadow:0px 0px 10px #CCC;   }   </style>   <p> Cobalt (ii) carbonate </p>

This box-shadow does not need to add browser-compatible head, I like this CS3! IE9 Although also support CSS3, but that pit daddy bug too much, I don't like to use IE9 CSS3. For this projection effect, IE9 is not valid for using a projection on a TABLE element that has a collapse set. In short, IE is a variety of bugs, but the anti is to be compatible to IE6, ignoring the IE9 of these dabbler CSS3 good.
In IE, to achieve the projection effect is still quite troublesome, although IE has shadow filter, but that thing and linear gradient no difference, can not reach the effect of CSS3. I'm not going to show you what the effect of that thing is, just try it yourself. ie a lot of filters only blur this filter can achieve a similar effect, but if the blur directly on the element will make the content also blurred, so we want to create a new element to it blur, let the new element placed in the bottom of the original element as the background. This involves a bunch of coordinate calculations, and if the center element uses a projection effect, it also involves the displacement calculation of the element when the browser resizes. So IE realize it is best to write with JS. I have already written the comments in detail, so look at this code should be able to understand.

<!     Doctype> <style> Shadow {width:100px;height:100px;text-align:center;     font:14px/100px Microsoft ya Black;     border:1px solid #CCC;     Background: #FFF;   position:relative;     }. shadow-ie {display:block;     Position:absolute;background: #CCC;   Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=5); } </style> <p class= "Shadow" > Cobalt carbonate </p> <script>//judging IE var isie=/msie/i.test (navigator.us   Eragent);     if (Isie) {//Get all elements, can actually use document.all, but used to write Var all=document.getelementsbytagname ("*"), s=[],i=0;     Put all the elements of Class shadow into the S array while (o=all[i++]) if (o.classname== "Shadow") S.push (o);       Traversing the S array for (I in s) {//Create an element, I used to use U, in fact, with what can be var o=s[i],u=document.createelement ("U");       Set the parent element to relative positioning o.parentnode.style.position= "relative";       To IE6, 7 to add a haslayout, otherwise coordinate calculation will error o.parentnode.style.zoom=1; Put the created element above the shadow element//must be above, because the element below will block the above element O.parentnode.insertbefore (U, O);       Apply a style to the created element u.classname= "Shadow-ie";       Set the width and height to the created element u.style.width=o.offsetwidth+ "px";     u.style.height=o.offsetheight+ "px";     }; Trigger Window.resize=function () {//Traverse S array when window changes size for (i in s) {//The element we created above moves to the desired position var o=s[i         ],p=o.previoussibling;       p.style.top=o.offsettop-5+ "px", p.style.left=o.offsetleft-5+ "px";     };     };   The event is triggered once, allowing the code inside to execute once window.resize () at load time;   }; </script>

Do not see a bunch of JS is afraid, in fact, remove the comment is not a few lines, if you write with jquery less. This code is just a handy write, if you really want to use the do not throw in the global scope, should let domready to call it. This can reduce the probability of variable collisions. There are events I write directly to the DOM, of course, if there is a need to use attachevent to bind to avoid conflicts, you can use jquery without considering this. In short, the code is only a reference, really in the use of the time please enjoy the ravages of it ~

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!