仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1066|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发Css不朽的典范―3D笔墨殊效

[复制链接]
若天明 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:18:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
效果:
3DText

以下是一个用了blur滤镜而另外一个没用的叠加效果
Ttop.cnTtop.cn
GlassText

这个是两个都用了alpha滤镜的效果
Ttop.cnTtop.cn
InnerShadow

这个是先用了一段红色的笔墨,再加了mask()滤镜,再用了shadow()滤镜,最初到场chroma()滤镜构成后一段字体,放在前一段笔墨的绝对left:-200px地位上构成的。
Ttop.cnTtop.cn
OutlineText

用mask,glowandchroma三个滤镜团结感化
Ttop.cn
与Marquee的完善分离

www.Ttop.cnwww.Ttop.cn
源代码:
<styletype="text/CSS">
<!--
.sample
font-style:italic;font-family:arialblack;font-size:40px;font-weight:bold;cursor:hand;

-->
</style>
<title>Css不朽的典范―3D笔墨殊效</title>
<div>
<h2>3DText</h2>
<p>以下是一个用了blur滤镜而另外一个没用的叠加效果</p>
<ponClick="alert(this.innerHTML)"><spanclass="sample"
style="width:200px;height:70;color:black;filter:Blur(Add=0,Direction=135,Strength=10);"
>Ttop.cn</span><spanclass="sample"
style="position:relative;left:-201;top:-15;width:200;color:#2984ff;">
Ttop.cn</span></p>
<h2>GlassText</h2>
<p>这个是两个都用了alpha滤镜的效果</p>
<ponClick="alert(this.innerHTML)"><spanclass="sample"
style="width:200px;height:70;color:lightskyblue;filter:Alpha(Opacity=60)Blur(Add=0,Direction=135,Strength=20);"
>Ttop.cn</span><spanclass="sample"
style="position:relative;left:-201;top:-15;width:200;color:lightskyblue;filter:Alpha(Opacity=60);"
>Ttop.cn</span></p>
<h2>InnerShadow</h2>
<p>这个是先用了一段红色的笔墨,再加了mask()滤镜,再用了shadow()滤镜,最初到场chroma()滤镜构成后一段字体,放在前一段笔墨的绝对left:
-200px地位上构成的。</p>
<ponClick="alert(this.innerHTML)"><spanclass="sample"
style="width:200px;height:70;color:white;"
>Ttop.cn</span><spanclass="sample"
style="width:200px;height:70;position:relative;left:-200;filter:mask(color=red)shadow(direction=135)chroma(color=red);"
>Ttop.cn</span></p>
<h2>OutlineText</h2>
<p>用mask,glowandchroma三个滤镜团结感化</p>
<ponClick="alert(this.innerHTML)"><spanclass="sample"style="width:200px;height:70;filter:mask(color=red)glow(color=black,strength=1)chroma(color=red);">Ttop.cn</span></p>
<h2>与Marquee的完善分离</h2>
<ponClick="alert(this.innerHTML)"><spanclass="sample"
style="width:320px;height:70;color:black;filter:Blur(Add=0,Direction=135,Strength=10);"
><marqueewidth:300height:70scrollamount="1"behavior="alternate"class="sample">www.Ttop.cn</marquee></span>
<spanclass="sample"
style="position:relative;left:-320;top:-15;width:320;color:#2984ff;">
<marqueewidth:320height:70scrollamount="1"behavior="alternate"class="sample">www.Ttop.cn</marquee></span></p>
</div>

在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
爱飞 该用户已被删除
沙发
发表于 2015-1-18 06:03:47 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
柔情似水 该用户已被删除
板凳
发表于 2015-1-21 22:01:03 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
山那边是海 该用户已被删除
地板
发表于 2015-1-30 22:51:50 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
因胸联盟 该用户已被删除
5#
发表于 2015-2-6 16:44:32 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
兰色精灵 该用户已被删除
6#
发表于 2015-2-17 11:09:30 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
透明 该用户已被删除
7#
发表于 2015-3-5 19:34:20 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
蒙在股里 该用户已被删除
8#
发表于 2015-3-12 13:46:38 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
若天明 该用户已被删除
9#
 楼主| 发表于 2015-3-19 22:56:41 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-21 02:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表