`
chunzhisu
  • 浏览: 12542 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
ptkr
yaweja
社区版块
存档分类
最新评论

CSS滤镜实现各种文字效果

阅读更多 
  • <html>
<head>
<title>蓄能器隔膜</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
<style>
.abc {  line-height: 22px}
.t12 {
font-family:微软雅黑;   
font-size: 15px;
font-weight: lighter;
color: ##C3C1C1; 
Filter: dropshadow(color=#ffffff,offx=1,offy=1);
 TEXT-ALIGN: center; 
 TEXT-DECORATION: none
}
</style>
</head>
<body bgcolor=#C3C1C1 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);">
<center>
<table>
  <tr>
 <td style="FILTER: glow(color:#308148,strength=5);color: #ffffff;font-size:18px;font-family:隶书">今夜你会不会来，你的爱还在不在？</TD>
  </tr>
</table>
<br><br>
<span style="color:#09ff11;font: italic 900 16pt 隶书;width: 220;filter: shadow(color=red,direction=135);">自己动手 丰衣足食</span>
<br><br>
<table bgcolor=#aaaaaa style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><tr><td style="filter:dropshadow(offX=1,offY=1,color=#000000);color:#ffffff;font-size:18px;font-family:华文行楷">雅语独喃<b><font color='#22FF22'>知</font><font color='#FF2222'>往</font><font color='#001199'>观</font><font color='#00fffa'>来</font></b></td></tr></table>
<br><br>
<style type="text/css">.3dfont { FILTER: glow(color=lime,strength=0) shadow(color=lime,direction:135); WIDTH: 678;font-family:隶书;font-size:16px; } </style>
<center>
<table border="0" width="569"><tr><td width="100%" class="3dfont"><font color="#008040">身高不过1米68，腰圆腿粗像西瓜，头大嘴小鼻梁趴，一张大嘴缺门牙！</font></td></tr></table>
<br><br>
<table width="400" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#999999" bgcolor="#D1D2A4">
  <tr> 
 <td style="padding:15px;letter-spacing:3px; COLOR: #6b6c35; FILTER: dropshadow(color=#ffffcc,offx=1,offy=1);" >北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。</td>
  </tr>
</table>
<br><br>
<table width="312" height="123" border="0" cellpadding="0" cellspacing="0">
  <tr>
 <td bgcolor="#ffdf03"><div style="filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, color=black);color:orange;width:100%;font-family:华文新魏;font-size:17px;">织梦好，蚂蚁好；蚂蚁好，织梦更好</div></td>
  </tr>
</table>
<br><br>
<table width="234" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="filter:blur(add=1,direction=135,strength=7)">
  <tr>
 <th scope="row" style="font-family:华文行楷;font-size:18px;color:red;">我想让里面的字正常显示</th>
  </tr>
</table>
<br><br>
<table>
  <tr>
    <td width="510"><div style="height:1;width:100%;font-family:impact;font-size:14pt;color:deeppink;display:block; 
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"><p align="center">看小蜜的身材怎么样?您是否已爱上了她! </div></td>
  </tr>
</table>
<table>
  <tr>
    <td width="510"><div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5); height:1;font-size:20pt;font-family:impact;background-color:blue"><p align="center">I just couldn't help it.</div></td>
  </tr>
  <tr>
    <td width="510"><div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);height:1;font-family:impact;font-size:20pt;background-color:blue"> <p align="center">We'd better be off.</div></td>
  </tr>
  <tr> 
</table>
<br><br>
<table>
  <tr> 
    <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=blue,direction=135,strength=6)" align="center"><font color="blue" size="7" face="华文新魏">/font></td>
  </tr>
  <tr> 
    <td style="FILTER: glow(color=#bb0909,strength=2) shadow(color=#22BB09,direction=135)" align="center"><font  color=#E1E4EC size=6 face="华文新魏"><b>让自己不至于在等待回贴的过程中血气上涌</b></font></td>
  </tr>
  <tr> 
    <td style="FILTER: glow(color=yellow,strength=4) mask(color=green) chroma(color=#B4BBCF)" align="center" height=54><font color=#fa2233 size=6 face="华文彩云"><b>一个神奇的测试</b></font></td>
  </tr>
</table>
<br><br>
<style type="text/css">
.a1 {
 font-size: 32px;
 color: red;
 filter: dropshadow(color=#fa00fd,offX=1,offY=1,positives=true);
 height: 20px;
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><div class="a1">看书 看棋 看美人 赏花 赏月 赏秋香</div></td>
  </tr>
</table>
</center>
</body>
</html>
     CSS滤镜来修饰文字，实现各种漂亮的文字特效，CSS filter()确实是个不错的东西，用好了，会让你网页上的文字更加漂亮吸引人，本页上的CSS效果一共演示了dropshadow、glow、alpha、progid、progid:DXImageTransform.Microsoft.wave、progid:DXImageTransform.Microsoft.Shadow等多种效果，几乎包括了所有的CSS滤镜，比较不错哦。
分享到：
| 纯CSS3实现彩色缎带效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用css滤镜实现的文字描边效果的代码

    用css滤镜实现的文字描边效果的代码

    css滤镜实现页面灰色黑白色效果代码

    为方便站点哀悼，特提供素装代码，以表哀悼。以下为全站CSS代码。

    《精通CSS+DIV网页样式与布局》光盘源码

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转变换...

    精通CSS.DIV.网页样式与布局 源码

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转...

    精通CSS+DIV网页样式与布局

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转变换...

    CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集

    主要介绍了CSS3动画中流彩文字效果+图片模糊效果+边框伸展效果实现，blur滤镜实现和SVG滤镜实现以及SVG作为背景图片载入等操作步骤实现功能，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

    HTML+CSS+Js文字渐显效果源码.rar

    源码使用HTML、CSS、原生js代码实现打字动画效果，且使用css的文字阴影、滤镜及透明属性，同时使用js动态设置文字样式从而实现了文字模糊渐显动画效果，页面背景是文理信纸给人感觉非常复古、适合前端初学者学习借鉴...

    精通CSS+DIV网页样式与布局视频教材

    第9章　CSS滤镜的应用 9.1　滤镜概述 9.2　通道(Alpha) 9.3　模糊(Blur) 9.4　运动模糊(Motion Blur) 9.5　透明色(Chroma) 9.6　下落的阴影(Dropshadow) 9.7　翻转变换(Flip) 9.8　光晕(Glow) 9.9...

    使用CSS3配合IE滤镜实现渐变和投影的效果

    线性渐变在CSS3和IE滤镜中的实现对于完美主义者来说，为了一个渐变而使用一张图片是一件痛苦的事情，就像有鼻屎不抠掉一样痛苦= =。所以对于普通的渐变而言，能用CSS解决的就不去动用图片。　CSS3中为我们提供了...

    精通CSS+DIV网页样式与布局Part1

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转变换...

    精通CSS.DIV网页样式与布局视频01

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转变换...

    CSS自学特效(很实用)

    1.论坛会员等级图制作（背景图不同位置显示） 2、CSS横向菜单制作 3、CSS代替图片实现背景颜色渐变特效 4、文字及图片滤镜特效 5、CSS实现层的显示隐藏 6、CSS实现文字与图片互相转换特效

    CSS实现背景透明文字不透明兼容各种浏览器有图有真相

    IE6是大家都十分头痛的一个浏览器，为了兼容它，一个很小的项目就可以浪费你很多的时间和精力，最简单的有margin、padding，最难的那就不知道了，今天在这里做了一个滤镜的效果，实现chrome和FF的滤镜很简单，但是要...

    ie 滤镜大全整理

    　CSS滤镜主要是用来实现图像的各种特殊效果。它在网站制作中具有非常神奇的作用。通过CSS滤镜可以使网站变得更加漂亮，在CSS中，filter属性就代表了滤镜的意思，它可以设置文字、图片和表格的滤镜效果。　语法:...

    jquery鼠标移到Image上方时显示文字效果

    鼠标移动到图片上后，图片底部显示文字，文字下一行半透明的CSS滤镜实现的效果，鼠标移走后消失。（PS：暂时效果只支持IE浏览器，不支持火狐，稍后会做补齐）

    CSS层叠样式表详细教程

    CSS引入到网页中是网页编辑的一大革命吧~通过设置CSS...可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊等只有在图象处理软件中才能实现的效果；可以与脚本语言相结核，在网页中实现很多动态滤镜效果。

    纯CSS实现背景半透明文字不透明效果兼容IE6

    在某些情况下可能会需要背景半透明文字不透明这样的效果，实现起来并不复杂，通过滤镜便可做到，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助

    GooeyTextHoverEffect:使用SVG滤镜的粘糊糊文字悬停效果

    使用基于此SVG滤镜实现了粘糊糊的文字悬停效果。 安装 安装依赖项： npm install 编译代码以进行开发并启动本地服务器： npm start 创建构建： npm run build 杂项 跟随Codrops： ， ， ， 执照 用 :blue_heart:...

    精通JavaScript+jQuery Part1

    　第9章　CSS滤镜的应用　 　9.1　滤镜概述　 　9.2　通道（Alpha）　 　9.3　模糊（Blur）　 　9.4　运动模糊（Motion Blur）　 　9.5　透明色（Chroma）　 　9.6　下落的阴影（Dropshadow）　 　9.7　翻转变换...

    20个CSS3动画实战案例开发

    本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷...

Magicbox
Global site tag (gtag.js) - Google Analytics