主题:  看这个效果怎么作

无色光芒

职务:普通成员
等级:3
金币:1.0
发贴:1071
注册:2001/10/1 21:15:56
#12003/6/17 15:34:56

图片如下:


这个效果用CSS怎么写?



7877767

职务:普通成员
等级:2
金币:1.0
发贴:528
注册:2002/2/19 0:11:31
#22003/6/17 16:08:39
这不是图片吗?
把下面代码存为htm格式自己看:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>阴影文字的做法!</title>
<style type="text/css">
<!--
td {
    font-size: 12px;
    text-decoration: none;
    filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1);
    color: #707070;
}
.br {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #707070;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #707070;
}
-->
</style>
</head>

<body bgcolor="#D5D5D0">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#D5D5D0" class="br">
<tr>
<td align="center">这样写,呵呵:)论坛里很多回答呀,下次先搜索搜索</td>
</tr>
</table>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0" bgcolor="#D5D5D0" class="br">
<tr>
<td><style type="text/css">

<!--

td {

font-size: 12px;

text-decoration: none;

filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1);

color: #868686;

}

-->

</style>



就是这段啦:

filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1);color: #868686;
</td>
</tr>
</table>
</body>
</html>

编辑历史:[此帖最近一次被 allinhands 编辑过(编辑时间:2004-04-10 21:44:13)]


{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
注册:2002/7/25 21:24:11
#32003/6/17 19:43:47
www.5d.cn/bbs/NewsDetail.asp?id=822216

圆角窗口~ 阴影效果~

至于渐变…… 试试这个?

<table width="100%" cellpadding=0 cellspacing=0>
<tr height=2><td bgcolor="#FFFFFF"></td></tr>
<tr height=2><td bgcolor="#EEEEFF"></td></tr>
<tr height=2><td bgcolor="#DDDDFF"></td></tr>
<tr height=2><td bgcolor="#CCCCFF"></td></tr>
<tr height=2><td bgcolor="#BBBBFF"></td></tr>
<tr height=2><td bgcolor="#AAAAFF"></td></tr>
<tr height=2><td bgcolor="#9999FF"></td></tr>
<tr height=2><td bgcolor="#8888FF"></td></tr>
<tr height=2><td bgcolor="#7777FF"></td></tr>
<tr height=2><td bgcolor="#6666FF"></td></tr>
<tr height=2><td bgcolor="#5555FF"></td></tr>
<tr height=2><td bgcolor="#4444FF"></td></tr>
<tr height=2><td bgcolor="#3333FF"></td></tr>
</table>


受那个圆角窗口的启发写出来的~~ 

编辑历史:[此帖最近一次被 allinhands 编辑过(编辑时间:2004-04-10 21:44:33)]


缺缺

职务:管理员
等级:8
金币:41.0
发贴:9620
注册:2004/1/14 19:14:47
#42003/6/17 21:17:15
渐变:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

编辑历史:[此帖最近一次被 allinhands 编辑过(编辑时间:2004-04-10 21:45:12)]


{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
注册:2002/7/25 21:24:11
#52003/6/17 21:53:07
 差距……



7877767

职务:普通成员
等级:2
金币:1.0
发贴:528
注册:2002/2/19 0:11:31
#62003/6/18 9:00:39
哇,您们这样做表格要是用多了代码好多啊?不太实用...



爱多媒体爱生活

职务:普通成员
等级:2
金币:1.0
发贴:303
注册:2003/2/20 14:25:56
#72003/6/18 12:43:31
是想做按钮??



一粒沙

职务:普通成员
等级:1
金币:1.0
发贴:154
注册:2003/6/4 16:34:31
#82003/6/18 12:57:09
PS秒秒钟不就搞定了吗!



Palomino

职务:普通成员
等级:3
金币:2.0
发贴:1001
注册:2002/10/4 5:31:54
#92003/6/18 13:31:32
人家是在讨论CSS中滤镜的用法,用PS当然可以简单搞定



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
注册:2002/7/25 21:24:11
#102003/6/18 15:02:26
无色光芒在上个帖子中说
引用:

图片如下:


这个效果用CSS怎么写?


呵呵,就是较真讨论CSS 呢~



Palomino

职务:普通成员
等级:3
金币:2.0
发贴:1001
注册:2002/10/4 5:31:54
#112003/6/18 16:41:01
比较了一下,行者的办法其实是定义了每一个TD的背景颜色,但是偶觉得行者的办法有点不妥(仿佛听到行者磨刀的声音) 看起来不自然渐变会出现条状色带~~就像用Photoshop优化图片的时候压缩过头一样。呵呵,至于利用CSS就不一样了,感觉和Photoshop里面的渐变填充效果一样。
精品,偶收藏先



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
注册:2002/7/25 21:24:11
#122003/6/18 21:35:27
呵呵,大家讨论嘛~~

其实我的方法也能实现完美过渡的……

不过要200多行代码……

从#FFFFFF一个一个推到#0000FF去~~

hoho~~ 为了一个效果,平添7、80k代码……



缺缺

职务:管理员
等级:8
金币:41.0
发贴:9620
注册:2004/1/14 19:14:47
#132003/6/18 22:14:45
行者在上个帖子中说
引用:


不过要200多行代码……

从#FFFFFF一个一个推到#0000FF去~~




200多行要有多高的按钮啊~



Palomino

职务:普通成员
等级:3
金币:2.0
发贴:1001
注册:2002/10/4 5:31:54
#142003/6/18 23:00:18
哈哈,这个例子中,底部颜色我取到的值是B0E0F8,顶部是FFFFFF
如果用行者的办法~~~~~困难哦



我佛山人

职务:版主
等级:4
金币:16.0
发贴:2269
注册:2002/8/7 15:09:27
#152003/6/18 23:03:08
-_-!!!!

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

编辑历史:[此帖最近一次被 allinhands 编辑过(编辑时间:2004-04-10 21:46:11)]