打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
标题文字特效--阴影
在习之刚学习源代码时写过五篇系列博客:“用源代码美化博客标题”,颇受大家欢迎。那时是用microsoft特有的filter滤镜制作的特效文字,如阴影滤镜Shadow、模糊滤镜Blur等。但是这只适用于当时流行的IE6浏览器。时过境迁,现在IE6浏览器伴随WindowsXP操作系统已退出历史舞台,代之以IE9\10甚至更高版本的浏览器。而microsoft独有的filter滤镜在这些浏览器里不能简单显示效果。更何况非IE浏览器(如360、火狐、谷歌等)原本就是不支持这些滤镜的。因此采用这个方法制作的标题文字已经失效。
为此,习之用Flash来制作类似IE6里阴影滤镜Shadow那样的特效文字,也即用Flash所提供的投影滤镜(DropShadowFilter)制作“阴影”特效文字。本文的标题就用这个Flash做的。
下面介绍制作方法
由于“阴影”特效文字的Flash与上一篇介绍“镶边”特效文字的Flash原理相同,制作方法也类同,因此参数的相同部分只做简单列举,不再展开介绍。
源代码:
<p style="margin:0px;text-align:center"><embed width="600" height="50" src="//img4.oldkids.cn/upload/12000/u11139/2017/03/06/blog_20170306194805523643.swf" flashVars="textC=88ff88&dropC=000000&angle=45&dist=&title=博客标题文字特效--阴影&size=32&font=楷体&bold=1&spec=2" type="application/x-shockwave-flash" quality="high" wmode="transparent" /></p>
这是一段显示一个Flash的源代码。src里是阴影特效文字的Flash地址,在flashVars里是可以替换的一些参数,主要是标题文字(title)、文字格式、滤镜参数等。代码里提供的参数对制作博客单行标题文字应该足够了。Flash的宽和高已设置成宽600高50,如果标题文字的大小(size)大于42,那么需要将flash的高度由原来的height="50"改成 height="60" 或更大。宽度 width="600" 也允许扩大。
在flashVars里需要设置的参数介绍:
这个Flash可以导入的参数如标题文字(title)和文字格式(size、font、textC、bold、spec)与上篇“镶边”相同,列举如下,详细介绍请参阅“博客标题文字特效--镶边”
title 标题文字 默认值:博客标题文字特效--阴影
textC 文字颜色 默认值:88ff88( 绿色)
size 文字大小 默认值:32
font 字体 默认值:楷体
bold 是否加粗 0正常 1加粗 默认值:0(正常不加粗)
spec 字间距 默认值:0
另一类参数是滤镜参数,虽然有许多,但在上述供拷贝的源代码里只保留了下面三个,对于只做“博客标题”来说,只需关心这三项就够了。如下表:
dropC 阴影颜色 默认值:000000(黑色)
angle 阴影方向(角度) 0~360默认值:45(方向:右下)
dist 阴影大小 默认值:文字大小size的 1/10
阴影颜色dropC  为使阴影明显,最好阴影颜色与文字颜色的反差要大,黑色是最佳选择。
阴影方向angle  就是DorpShadow滤镜里的投影方向。坐标为:向右为0度,旋转方向顺时针。
阴影大小dist   这是投影滤镜里对象错位(drop)的距离(distance),通俗讲就是阴影的大小。在DorpShadow滤镜里,它的默认值原本是4。针对博客标题这样的文字对象,希望字大阴影大一点,字小阴影小一点,因此习之将默认值改成与字号相关,取值文字大小的1/10(size/10)。这样可以不必关心这个参数。但为了特殊需要时方便修改,在上面供拷贝的源代码里依然保留了该参数的变量名(&dist=)而不赋值,那么它会按size的1/10取值。如要另行设置,那么只要在等号后填上数字即可。
上面介绍的是供拷贝的源代码里flashVars里的所有参数。当然这个Flash里还有许多可以设置的参数,这里不再介绍,全部采用Flash的默认值。
在上面诸多参数里,最需要关心的是文字颜色、阴影颜色、阴影角度、是否加粗。下面做了几个不同颜色组合的样品供参考。
一:文字颜色 textC=88ff88 阴影颜色 dropC=000000 阴影角度 angle=45 加粗 bold=1
二:文字颜色 textC=8888ff 阴影颜色 dropC=000000 阴影角度 angle=45 加粗 bold=1
三:文字颜色 textC=ffff88 阴影颜色 dropC=000000 阴影角度 angle=135 加粗 bold=0
四:文字颜色 textC=ff88ff 阴影颜色 dropC=000000 阴影角度 angle=225 加粗 bold=0
五:文字颜色 textC=ffffff 阴影颜色 dropC=440000 阴影角度 angle=45 加粗 bold=1
六:文字颜色 textC=880000 阴影颜色 dropC=ffffff 阴影角度 angle=45 加粗 bold=1
这个Flash里面尚有诸多可以修改的参数(如多行文字处理、各种滤镜的设置等),因为习之觉得越是简单越好,本文就不做介绍了,如果有需要的可以留言给我。
背景制作:林林总总
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
标题文字特效--镶边
发光梦幻字,用PPT做出海报级文字特效丨教程256
jQuery炫酷文字翻转打字机特效
抖音故障风文字,做起来居然这么简单!
PS教程:创造一个钢铁侠风格的文字特效
photoshop明暗关系调整基础教程
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服