1
/**//* 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
8
.gradient
9
{
}{
10
FILTER:Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);
11
BACKGROUND: skyblue;
12
}
强人用js写的渐变控制:(个人没有验证过是否有用)
1
背景一:
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
40
<body onLoad="fadeIn(16)">
41
42
43
44
45
46
背景二:
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、先选择要控制的文字,被选择了的文字以反白显示,如下:
![1.gif (549 字节)]()
然后在其上击鼠标右键,单击“字体属性”后弹出如下图:
![2.gif (7123 字节)]()
单击左下脚”样式(S)……“后出现如下图:
![3.gif (3243 字节)]()
单击”颜色“,选择前景色和背景色;
![4.gif (4458 字节)]()
单击”字体“选择主字体和大小
![5.gif (4660 字节)]()
然后按”确定“就搞定了。
也许很多人对CSS的一般用途熟悉,但是可能只有少数人知道CSS里面竟然还有象PHOTOSHOP里一样的滤镜。是不是有点惊讶。^_^ 不要着急,请跟着我去揭开其中的奥秘!