CSS实现阴影文字效果


..:: 巧用CSS制作艺术字 ::..
如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。
E流设计

用blur滤镜做出的效果，代码如下：

FILTER: blur(direction=135,strength=8)
E流设计

用dropshadow滤镜做出的效果，代码如下：

FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)
E流设计

用glow滤镜做出的效果，代码如下：

FILTER: glow(color=#B4BBCF,strength=5)
E流设计

这个效果用到了两种滤镜：shadow和alpha，代码如下：

FILTER: alpha(opacity=100,finishiopacity=0,style=1)

shadow(color=#8C96B5,direction=135)

E流设计

这个效果也用到两个滤镜mask和shadow，代码如下：

FILTER: mask(color=#E1E4EC)

shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)

注意：mask的颜色要和网页背景色一致，字体的颜色由shadow决定。
E流设计

如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：

FILTER: mask(color=#E1E4EC)

dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)

chroma(color=#E1E4EC)"

E流设计

用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下：

FILTER: glow(color=#8C96B5,strength=2)

shadow(color=#B4BBCF,direction=135)

E流设计
E流设计
E流设计
如果背景采用图片，为了能达到满意的效果需要将mask和chroma组合使用，这样能使字体感觉是透明的，让背景透出来。

上面列出的效果前者的代码是：

FILTER: mask(color=#E1E4EC)

shadow(color=#B4BBCF,direction=135)

chroma(color=#E1E4EC)

注意：字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。

中间的代码是：

FILTER: glow(strength=1)

mask(color=#B4BBCF)

chroma(color=#B4BBCF)

注意：mask和chroma的颜色相同，这个颜色决定了字体的颜色。

后者的代码是：

FILTER: mask(color=#E1E4EC)

dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)

chroma(color=#E1E4EC)

注意：mask和chroma的颜色相同，色彩由dropshadow决定。

" TARGET=_blank>WWW.E-FLOWING.COM


WELCOME
TO
这个效果的代码：

FILTER: glow(strength=4)mask(color=#E1E4EC)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • CSS实现阴影文字效果

    ..:: 巧用CSS制作艺术字 ::.. 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. E流设计 用blur滤镜做出的效果,代码如下: FILTER: blur(direction=135,strength=8) E流设计 用dropshadow滤镜做出的效果,代码如下: FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1) E流设计 用glow滤镜做出的效果,代码如下:

  • Android开发实现的圆角按钮、文字阴影按钮效果示例

    Android开发实现的圆角按钮、文字阴影按钮效果示例

    本文实例讲述了Android开发实现的圆角按钮.文字阴影按钮效果.分享给大家供大家参考,具体如下: 效果图: 如果要实现圆角图片,并变色须在drawable中配置背景文件如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item andro

  • three.js如何实现3D动态文字效果

    three.js如何实现3D动态文字效果

    前言 大家好,这里是 CSS 魔法使--alphardex. 之前在逛国外网站的时候,发现有些网站的文字是刻在3D图形上的,并且能在图形上运动,视觉效果相当不错,于是笔者就也想用three.js来尝试复现出这种效果 上图只是所有效果的其中之一,接下来让我们一起开干吧~ 准备工作 笔者自行封装的three.js模板:Three.js Starter 读者可以点击右下角fork一份后再开始本项目 本项目需要用到位图字体,可以直接复制demo的HTML里的font字体代码 一个注意点:three-bm

  • 5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

    目录 实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • js实现模拟计算器退格键删除文字效果的方法

    本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery实现为控件添加水印文字效果(附源码)

    jQuery实现为控件添加水印文字效果(附源码)

    本文实例讲述了jQuery实现为控件添加水印文字效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-text-add-txt-style-codes/ 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>WaterMark

  • css实现气泡框效果(实例加图解)

    css实现气泡框效果(实例加图解)

    前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等.下面我们来学习下使用html+css来实现这种效果! 如下效果:   and   我们可以来分析下:要实现这种效果 无外乎就是一个矩形和一个小三角形 然后三角形定位上去就可以了,那么我们怎么样通过css来制作小三角形呢? 一:首先我们来看看css border属性,当

  • input 标签实现输入框带提示文字效果(两种方法)

    input 标签实现输入框带提示文字效果(两种方法)

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录.搜索等位置很适合,感兴趣的你可以参考下本文或许可以帮助到你,Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅. 当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label.使用JS控制. HTML5

  • jquery实现可旋转可拖拽的文字效果代码

    jquery实现可旋转可拖拽的文字效果代码

    本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript

随机推荐