注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江南浪子的博客

“清茶几许、人生百味……”

 
 
 

日志

 
 
关于我

本站文章除注明【原创】外,均来源于网络。文摘辑翠,配图编辑,增加可读性。阳春白雪、下里巴人,雅俗共赏,欢迎朋友们分享。每天都有新精彩,每天都有新期待! 联系方式:13065197070(weixin号同)

用源代码美化博客标题--介绍色彩滤镜Chroma  

2011-12-13 21:07:54|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

图片位置

复制开始

介绍色彩滤镜Chroma

复制结束


 

这个滤镜常用来做图像处理,用以滤掉图像中的某一个颜色。现在用来做特效文字,其原理是利用色彩滤镜Chroma滤掉用同一种颜色写的文字,产生真真意义的“空心字”,从而透出背景的闪闪图案 ,达到本文标题这样的闪字效果。更改背景的闪闪图案,可以变换成不同的效果。

色彩滤镜也称为“颜色透明滤镜”。因为它的过滤作用也可以理解为使对象上的某种颜色变成透明。下面是做成特效文字的图解说明,通过图解,可以清楚地了解“颜色”透明是怎么回事。

 

步骤

说明

分步图解

准备一个闪闪图

将闪闪图平铺成闪闪背景
 

在闪闪图上加一张白纸或自己需要的文字背景图(有意错位显示)

 

在白纸上写黑色的文字

色彩滤镜Chroma

对白纸及黑字做黑色透明滤镜处理

色彩滤镜Chroma

综合

改成不错位的效果(白底闪字)

色彩滤镜Chroma

效果

如果将白纸改成与基底同样颜色的背景色的效果(天蓝底闪字)

色彩滤镜Chroma


这个滤镜本身的代码很简单。它必须要的参数只有一个,就是要过滤掉的颜色。

Filter: Chroma(color:#RRGGBB);

上面的#RRGGBB 即需要过滤颜色的十六进制代码。

由于要在被过滤的对象后面设置闪闪的背景,还要考虑对象本身的颜色,因此做成特殊字的代码就比较复杂。下面是本文标题文字的源代码。

<table cellSpacing="0" cellPadding="0" align="center" width="510"
background="http://blog.oldkids.cn/uploads/diary/200811/16221530110.gif"
border="2" bordercolor="#db7093" bgcolor="#000080">
<tbody><tr><td style="
FILTER: chroma(color=#000000);
background-color:#FFFFFF; padding:10px;" align="center" height="40">
<p style="font-size:40px;color:#000000;font-weight:bolder; ;line-height:1.2em;
font-family: 黑体;">
介绍色彩滤镜Chroma</p>
</td></tr></tbody></table>

需要特别注意的是在代码里不同位置所引用的“颜色”设置。除了表格的边框颜色外,分别有:闪闪背景图的替换颜色文字层的颜色文字的颜色需要过滤掉的颜色。

闪闪背景图的替换颜色:bgcolor=#000080  这是备用的背景颜色,当闪闪图的链接失败时,作替换闪图用。因此与文字层的颜色要反差大一点。这里选用蓝色。

文字层的颜色:background-color:#FFFFFF   这里选用了白色。因为常用的博客底色就是白的。但在边框或信纸里,往往不是白色的,因此理想的状态是设置成边框或信纸的文字层颜色,如本文的文字层颜色是#EFF0D1,下面例一就是这样设置的。如果博客的文字层不是单色的,而是背景图,那么可以在这个td属性的设置里,加上一个背景图设置(background="背景图")。使加上去的文字层完全融合于博客的背景。下面例二及例四就是这样设置的。 其中例二的背景图,就是很多网友用的宽屏风格12号的背景。

文字颜色和过滤色:color:#000000  这两个颜色要完全相同。可以选得与背景色的反差大一点,为的是万一滤镜失效(如特殊的浏览器上不起作用),也能读到这文字。这里选的是最常用的黑色。

下面是几个实例,以供参考。


 

例一:文字层为本文的背景色:#EFF0D1,不加边框

吾日三省吾身


例二:文字层为宽屏风格(12)的图案,背景色为:#FAF7D8,不加边框

为人谋而不忠乎


例三:文字层为白色:#ffffff,不加边框

与朋友交而不信乎


例四:文字层为兰色的背景图,颜色:#3E82E8,有边框

传 不 习 乎

复制结束

 

  评论这张
 
阅读(464)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018