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

素手红尘的博客

得之我幸,不得我命~

 
 
 

日志

 
 
关于我

红尘中多少的事事非非,如过眼云烟,好也罢坏也罢,又能如何,采东篱泛轻舟,轻酌淡酒,隐逸世间~!!

网易考拉推荐

【引用】如何在边框内做梦幻(雾化图片)效果【原创】  

2011-10-17 20:06:27|  分类: 博客音画 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

如何在边框内做梦幻(雾化图片)效果

杨东/原创 

一、制作梦幻(雾化)效果的方法:

就是在添加内容的代码中蓝色代码 TABLE这个元素后面)添加一个CSS滤镜的梦幻效果代码--<TD style="FILTER: Alpha(opacity='100',style='2')" 很简单,识破不值半文钱!

二、边框和梦幻效果的代码在以下框内,其中:红色代码是边框代码,蓝色代码是添加内容的代码,粉红色代码是添加内容代码部分的结束标记.

框图和梦幻(雾化)效果代码在以下框内
(注:未加图片的空白样本)

 <P align=center>
<TABLE cellSpacing=15 cellPadding=0 width=700 background=第一层(是最外边框)图片地址 border=0>
<TBODY>
<TR>
<TD width=700>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第2层边框图片地址 border=0>
<TBODY>
<TR>
<TD width=680>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第3层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第4层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第5层边框图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 cellPadding=0 width="100%" background=第6层(是写日志底版)图片地址 border=0>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="动态小图网址(gif或jpg格式)"></P>
<TABLE 在此处加一个CSS滤镜代码就有梦幻效果了 borderColor=#d2b48c height=230 cellSpacing=1 width=360 align=center background=主体图片地址 border=8>
<TBODY>
<TR>
<TD align=middle width="100%"><EMBED src=透明flash小动画网址 width=360 height=230 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high">
</TD></TR></TBODY></TABLE></P> 

 

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

 

三:现在就按以上框图内的代码,代入相应的图片制作实用的框架。

符边框素材图片实样

第一第三层如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园 第二层如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园第四层如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园第五层如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园第六底面图如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

 <P align=center>
<TABLE title="" borderColor=#cccccc cellSpacing=5 cellPadding=0 width=700 align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=26 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/5-JvzuYXK19f2B9UpGGVZA==/3224295858221899188.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=5 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img319.ph.126.net/x3jVDN0HOzMUsjLud15skg==/3825807883451405866.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img.ph.126.net/Kw0exm1Cu71ypvjVSy9Bdw==/2783224569731803869.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img764.ph.126.net/jQoAU6c1xw-IflOTfVeH5w==/2979131153506663753.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=25 cellPadding=0 width="100%" align=center bgColor=#ffffff background=http://img306.ph.126.net/fWDr2KwAQ1RP8bh2hRMpEA==/3869999454795603069.jpg border=0>
<TBODY>
<TR>
<TD align=middle>
<P align=center>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=660 cellSpacing=1 width=480 align=center background=http://img5.ph.126.net/aYaLUkF5UOoxmlDdCgOKUA==/1028228089941043145.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="80%"><EMBED src=http://imgfree.21cn.com/free/flash/27.swf width=332 height=480 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=749 cellSpacing=1 width=562 align=center background=http://img.bimg.126.net/photo/RacWbAghW_0TUYV7__w0ZA==/1740078306025790778.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="93%"><EMBED src=http://imgfree.21cn.com/free/flash/157.swf width=322 height=470 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=750 cellSpacing=1 width=498 align=center background=http://img.bimg.126.net/photo/OSmYQUO8K4u7egiIlxniPQ==/1977643186369465102.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="93%"><EMBED src=http://imgfree.21cn.com/free/flash/92.swf width=470 height=332 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE>
<P></P>
<TABLE style="FILTER: Alpha(opacity=100,style=2)" borderColor=#d2b48c height=600 cellSpacing=1 width=404 align=center background=http://img.bimg.126.net/photo/TJXCJTpNPBKPDhkCPR3l3w==/899594025567857779.jpg border=8>
<TBODY>
<TR>
<TD align=middle width="120%"><EMBED src=http://imgfree.21cn.com/free/flash/9.swf width=322 height=470 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>

取得图片地址的方法:用你的鼠标指向图片→点右键→点属性就能得到

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

 

四、用以上代入相应图片制作后的实际效果如下

 

 

梦幻 (雾化) 实例
杨东/原创

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

例图①

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

例图②

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

例图③

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

例图④

 

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

 

符例图①原图片

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

制作实用代码中的具体说明

框边的第一层所设定的宽度为700,即:(width=700)是指限定了最外边的宽度,从而:第二层到最后的底面就不需的用数值来控制了,都可设为"100%",即:(width="100%"),这个"100%"是指在最外层的控制下的"100%"。注:(第一层"即最外边框"最大宽度可设定为890~900)。
  在第一层边框代码中(cellSpacing=5)设定为5,是指单元格距离,也即就是控制边缘外露能显现的部份,数值越大边缘显现得越宽。
  在最后一层单元格距离为何在设定为25呢?即:(cellSpacing=25)。然而广大爱用边框写日志的朋友们通常都设为0,这里留出的25部份起到什么作用呢?这个问题也值得商讨,因为如果设为0当你写入文字时,文字的前后都靠足边缘,看起来不美观,如果设定了25,文字的前后就不会靠足边缘,这是为了写入文字后比较美观之故。
  注意事项①:边框宽度用数值来控制时不需的用引号(例:width=700或890),用百分比控制必须在用引(例:width="100%")。
  注意事项②:制作梦幻(雾化图片)效果,代码必需要齐全,标点符号也不能少,图片的宽和高度必须要符合原图片尺寸,雾化效果中的
style=2,数值2为圆型,改为3是方型,改为4就不起雾化作用了。雾化的程度Alpha(opacity=100,数值可改小,但基本上没有多大变化。

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

 为了让朋友们能看得更明显 以下用的是黑色底版面

 

关于雾化图片的通用代码及实样如下

普通雾化图片代码

<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity='100',style='2')"
width=500 background=http://img234.ph.126.net/wMmFdC3U9pKt-fnJJ1NnAQ==/2122039849423080662.jpg height=300><P></P></TD></TR></TBODY></TABLE>

说明:红色部份是图片地址,可以更换,绿色部份是图片宽度,黄色部份是图片的高度,宽度和高度的数值要根据图片实际尺寸修改.

雾化图片实样

原图片实样

2010年11月08日 - 杨东 - 杨东小园

 

符雾化加(FLASH)图片的通用代码及实样如下

<TABLE align=center border=0>

<TBODY>

<TR>

<TD style="FILTER: Alpha(opacity='100',style='2)" width=500 background=http://img848.ph.126.net/1cDFFgHqS3tna1CqZ5K-bw==/692146967733335605.jpg height=300>

<P align=center><EMBED src=http://www.xcwhw.cn/fla/jrxq/177.swf width=500 height=300 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></P></TD></TR></TBODY></TABLE>

          说明:以上代码中的红色部份是(FLASH)图片。

 

加入一张烟花动态透明图片后的效果如下

原图片对比

2010年11月08日 - 杨东 - 杨东小园

 

 
如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园
 
如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园

如何在边框内做梦幻(雾化图片)效果【原创】 - 杨东 - 杨东小园如果朋友们喜欢制作边框请点此处能得到570多种各式边框素材图片

符 录
本博日志归类汇集总表

*生活常识专栏*

*美图美景汇编*

*各式边框制作*

*新解红楼论坛*

*各类书架代码*

*诗词散文朗诵*

*初学博客园地*

*精美音画欣赏*

*孙子兵法视频*

*经典怀旧电影*

*精彩连续剧目*

*中华国画档案*

*娱乐游戏专栏*

*经典音乐专栏*

*红楼梦系图集*

*回顾历史记载*

 

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

怎样在边框内做梦幻效果【原创】 - 杨东 - 杨东小园

 

 

  评论这张
 
阅读(93)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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