Use CSS3 with IE filters to achieve gradient and projection effects

The implementation of linear gradients in CSS3 and IE filters

For a perfectionist, using a picture for a gradient is a painful thing, as painful as having a booger. So for ordinary gradients, can be used to solve the CSS will not use the picture.
CSS3 provides us with a linear-gradient method to set the gradient directly on the background.

CSS code copy content to clipboard

1. <! Doctype>
2. <style>
3. div {
4. Width:100px;height:100px;text-align:center;
5. font:16px/100px ' Microsoft Ya-black '; color: #FFF;
6. /* Below is the linear gradient of the CSS3 * *
7. Background:-webkit-linear-gradient (Top, #FD0, #C30);
8. Background:-moz-linear-gradient (Top, #FD0, #C30);
9. Background:-o-linear-gradient (Top, #FD0, #C30);
10. }
11. </style>
12. <div> Cobalt Carbonate </div>

But CSS3 is also a very painful thing, he needs a browser prefix. This thing has to be written in three lines. This method usually uses three parameters (more parameters can also be used to tune more colors, this later). The first parameter is the direction of the gradient, top is from up to down, as for left, right, bottom the effect is easy to pull out from the first I will not wordy. CSS3 also supports a specific angle of the gradient, the first parameter can be in degrees such as 45deg is a bevel gradient, but this thing on IE is difficult to implement, here is not much to say. The second third parameter is the color of the gradient, which can be seen from the code. CSS3 colors can be rgba to make transparent, such as 50% transparent red: Rgba (255,0,0,0.5), note that the value of the transparent channel is between 0 and 1.
Next to say that pit Dad's ie,ie needs to be achieved through the gradient, for IE9 that half-baked CSS3 I have vomit trough powerless, honest with the filter better.

CSS code copy content to clipboard

1. <! Doctype>
2. <style>
3. div {
4. Width:100px;height:100px;text-align:center;
5. font:16px/100px ' Microsoft Ya-black '; color: #FFF;
6. /* The following is the linear gradient of IE
7. Filter:progid:DXImageTransform.Microsoft.Gradient (
8. Startcolorstr= #FFDD00, endcolorstr= #CC3300
9. );
10. }
11. </style>
12. <div> Cobalt Carbonate </div>

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

CSS code copy content to clipboard

1. div {
2. Filter:progid:DXImageTransform.Microsoft.Gradient (
3. Startcolorstr= #FFDD00, endcolorstr= #CC3300, gradienttype=1
4. );
5. }

Since both filters and CSS3 are compatible implementations, a full compatibility is the combination of the above methods.

CSS code copy content to clipboard

1. <! Doctype>
2. <style>
3. div {
4. Width:100px;height:100px;text-align:center;
5. font:16px/100px ' Microsoft Ya-black '; color: #FFF;
6. /* Fully compatible linear gradient */
7. Background:-webkit-linear-gradient (Top, #FD0, #C30);
8. Background:-moz-linear-gradient (Top, #FD0, #C30);
9. Background:-o-linear-gradient (Top, #FD0, #C30);
10. Filter:progid:DXImageTransform.Microsoft.Gradient (
11. Startcolorstr= #FFDD00, endcolorstr= #CC3300
12. );
13. }
14. </style>
15. <div> Cobalt Carbonate </div>

The implementation of element projection effect in CSS3 and IE filters
According to the convention, first talk about the projection effect of CSS3.

CSS code copy content to clipboard

1. <! Doctype>
2. <style>
3. div {
4. Width:100px;height:100px;text-align:center;
5. font:14px/100px Microsoft James Black;
6. border:1px solid #CCC;
7. /*CSS3 Projection Effect * *
8. box-shadow:0px 0px 10px #CCC;
9. }
10. </style>
11. <div> Cobalt Carbonate </div>

This box-shadow does not need to add browser compatible header, I like this CS3 most! IE9 Although also support CSS3, but that pit dad goods bug too much, I do not like to use IE9 CSS3. In the case of this projection effect, IE9 is not valid for using a projection for the table element with collapse set. In short, IE is a variety of bugs, but the reverse is to be compatible to the IE6, ignoring the IE9 of these half-baked CSS3 good.
On IE to achieve the projection effect is very troublesome, although IE has shadow filter, but that thing and linear gradient no difference, can not achieve the CSS3 effect. I will not demonstrate, want to know what the effect of that thing is what you try it. IE's a lot of filters only blur this filter can achieve a similar effect, but if the blur directly used in the element will make the content also blurred, so we want to create a new element to it blur, and then put this new element into the original elements of the background as a backdrop. This involves a bunch of coordinate calculations, and if the centered element uses a projection effect, it involves the displacement calculation of the element when the browser resizes. So IE to achieve it is best to use JS write. I have written the comments in detail, so look at this code should be able to understand.

CSS code copy content to clipboard

2. <! Doctype>
4. <style>
6. . Shadow {
8. Width:100px;height:100px;text-align:center;
10. font:14px/100px Microsoft James Black;
12. border:1px solid #CCC;
14. Background: #FFF;
16. position:relative;
18. }
20. . shadow-ie {
22. Display:block;
24. Position:absolute;background: #CCC;
26. Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=5);
28. }
30. </style>
32. <div class= "Shadow" > Cobalt carbonate </div>
34. <script>
36. Judge IE
38. var isie=/msie/i.test (navigator.useragent);
40. if (Isie) {
42. Get all the elements, you can actually use document.all, but it's customary to write
44. var all=document.getelementsbytagname ("*"), s=[],i=0;
46. Put the class-shadow element into the array of s
48. while (o=all[i++]) if (o.classname== "Shadow") S.push (o);
50. Traversing s Array
52. For (i in s) {
54. To create an element, I used to use U, in fact, anything can be
56. var o=s[i],u=document.createelement ("U");
58. Set the parent element to relative positioning
60. O.parentnode.style.position= "relative";
62. For IE6, 7 to add a haslayout, or the coordinate calculation will be wrong
64. O.parentnode.style.zoom=1;
66. Put the created element above the shadow element
68. It must be above, because the elements below will block the above elements.
70. O.parentnode.insertbefore (U,o);
72. Apply a style to the created element
74. U.classname= "Shadow-ie";
76. Set the width and height to the element you created
78. u.style.width=o.offsetwidth+ "px";
80. u.style.height=o.offsetheight+ "px";
82. };
84. Triggered when the window changes size
86. Window.resize=function () {
88. Traversing s Array
90. For (i in s) {
92. The elements we created above move to the desired location
94. var o=s[i],p=o.previoussibling;
96. p.style.top=o.offsettop-5+ "px",
98. p.style.left=o.offsetleft-5+ "px";
100. };
102. };
104. This event is triggered once, so that the inside code executes once at load time
106. Window.resize ();
108. };
110. </script>

Do not see a pile of JS is afraid, in fact, there are no comments to delete a few lines, if you write in jquery less. This code is just handy to write, if you really want to use the throw in the global scope, should let domready to call it. This reduces the probability of conflicting variables. There are also events I write directly to the DOM, of course, if necessary, you can use attachevent to bind to avoid conflicts, with jquery can not consider this. In short, the code is only a reference, the real use of the time please enjoy the ravages of it ~ ~