背景渐变及滤镜总结(总结见下篇)

/* filter:Microsoft format gradientType:1:up down;2:left right*/
2

.jianbian
3

{
4

filter:progid:DXImageTransform.Microsoft.Gradient
5

(startColorStr='#FFFFFF', endColorStr='#3568CC', gradientType='0');
6

}
7

.gradient
9

{
10

FILTER:Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);
11

BACKGROUND: skyblue；
12

}

强人用js写的渐变控制：（个人没有验证过是否有用）

背景一:
2

<SCRIPT LANGUAGE="JavaScript">
3

var Color= new Array(9);
4

Color[1] = "ff";
5

Color[2] = "ee";
6

Color[3] = "dd";
7

Color[4] = "cc";
8

Color[5] = "bb";
9

Color[6] = "aa";
10

Color[7] = "99";
11

Color[8] = "88";
12

Color[9] = "77";
13

Color[10] = "66";
14

Color[11] = "55";
15

Color[12] = "44";
16

Color[13] = "33";
17

Color[14] = "22";
18

Color[15] = "11";
19

Color[16] = "00";
20

function fadeIn(where) {
21

if (where >= 1) {
22

document.bgColor="#" + Color[where] +"0000";
23

where -= 1;
24

setTimeout("fadeIn("+where+")", 15);
25

} else {
26

setTimeout('fadeOut(1)', 15);
27

}
28

}
29

function fadeOut(where) {
30

if (where <=16) {
31

document.bgColor="#" + Color[where] +"0000";
32

where += 1;
33

setTimeout("fadeOut("+where+")", 15)
34

} else {
35

setTimeout("fadeIn(16)", 15);
36

}
37

}
38

</SCRIPT>
39

<body onLoad="fadeIn(16)">
41

背景二:
47

<!-- Begin
48

var Clrs = new Array(9);
49

Clrs[0] = 'ff0000';
50

Clrs[1] = '00ff00';
51

Clrs[2] = '000aff';
52

Clrs[3] = 'ff00ff';
53

Clrs[4] = 'ffa500';
54

Clrs[5] = 'ffff00';
55

Clrs[6] = '00ff00';
56

Clrs[7] = 'ffffff';
57

Clrs[8] = 'fffff0';
58

var sClrs = new Array(5);
59

sClrs[0] = 'ffa500';
60

sClrs[1] = '55ff66';
61

sClrs[2] = 'AC9DFC';
62

sClrs[3] = 'fff000';
63

sClrs[4] = 'fffff0';
64

var yBase;
65

var xBase;
66

var step;
67

var currStep = 0;
68

var Xpos = 1;
69

var Ypos = 1;
70

var initialStarColor = 'ffa000';
71

var Mtop = 250;
72

var Mleft = 250;
73

function Fireworks() {
74

if (document.all) {
75

yBase = window.document.body.offsetHeight / 3;
76

xBase = window.document.body.offsetWidth / 8;
77

}
78

else if (document.layers) {
79

yBase = window.innerHeight / 3;
80

xBase = window.innerWidth / 8;
81

}
82

if (document.all) {
83

step = 5;
84

for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
85

for (ai = 0; ai < Clrs.length; ai++) {
86

var c = Math.round(Math.random()*[ai]);
87

}
88

if (currStep < 90)
89

starsDiv.all[i].style.background=initialStarColor;
90

if (currStep > 90)
91

starsDiv.all[i].style.background=Clrs[c];
92

starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
93

starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
94

}
95

}
96

else if (document.layers) {
97

step = 5;
98

for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers!
99

var templayer = "a"+j;
100

for (ai = 0; ai < Clrs.length; ai++) {
101

var c = Math.round(Math.random()*[ai]);
102

}
103

if (currStep < 90)
104

document.layers[templayer].bgColor=initialStarColor;
105

if (currStep > 90)
106

document.layers[templayer].bgColor=Clrs[c];
107

document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
108

document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
109

}
110

}
111

currStep+= step;
112

T=setTimeout("Fireworks()",5);
113

if (currStep == 220) {
114

currStep = -10;
115

for (n = 0; n < sClrs.length; n++) {
116

var k = Math.round(Math.random()*n);
117

}
118

initialStarColor = sClrs[k];
119

if (document.all) {
120

Dtop = window.document.body.clientHeight - 250;
121

Dleft = xBase * 3.5;
122

Mtop = Math.round(Math.random()*Dtop);
123

Mleft = Math.round(Math.random()*Dleft);
124

document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
125

document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
126

}
127

else if (document.layers) {
128

Dleft = window.innerWidth - 100;
129

Dtop = window.innerHeight - 100;
130

Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
131

Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
132

document.layers[templayer].top = Mtop;
133

document.layers[templayer].left = Mleft;
134

}
135

if ((Mtop < 20) || (Mleft < 20)) {
136

Mtop += 90;
137

Mleft += 90;
138

}
139

}
140

}
141

Fireworks();
142

// End -->
143

</script>

精通 CSS 滤镜（一）

动力熊猫

http://powerpanda.126.com/

CSS（Cascading Style Sheets) 中文翻译为层叠样式表单，简称样式单。它是近几年才发展起来的新技术，1998年5月12日，Cascading Style Sheets,level 2 成为了W3C 的新标准。同时,”W3C CoreStyles "和CSS2 Validation Service" 以及“CSS Test Suite" 宣布成立。它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志（TAG）里，也可以在外部附加文档作为外加文档。此时，一个样式表单可以作用于多个页面---甚至整个站点，因此具有更好的易用性和扩展性。我个人认为CSS好比是HTML语言的PLUSIN（插件），插件的功能大家应该知道，就是壮大原有的功能。你可以精确的控制主页里的每一个元素，比如一个字，用CSS你可以给它控制它的前景色、背景色、背景图片、在页面的精确位置，四周加入边框等。可以说CSS的功能是无比的强大。W3C 也极力向世界推广这一先进技术。
如下列：前景色为兰色，背景色为银色。

前景色为兰色，背景色为银色

如果你使用frontpage 98 的话，过程很简单，具体如下：

1、先选择要控制的文字，被选择了的文字以反白显示，如下：

然后在其上击鼠标右键，单击“字体属性”后弹出如下图：

2.gif (7123 字节)
单击左下脚”样式(S)……“后出现如下图：

3.gif (3243 字节)
单击”颜色“，选择前景色和背景色；

4.gif (4458 字节)
单击”字体“选择主字体和大小

5.gif (4660 字节)

然后按”确定“就搞定了。

也许很多人对CSS的一般用途熟悉，但是可能只有少数人知道CSS里面竟然还有象PHOTOSHOP里一样的滤镜。是不是有点惊讶。^_^ 不要着急，请跟着我去揭开其中的奥秘！