CSS实现阴影文字效果_CSS/HTML


..:: 巧用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决定。

WELCOME
TO

这个效果的代码:

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

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

时间: 2024-10-10 04:22:02

CSS实现阴影文字效果_CSS/HTML的相关文章

CSS实现光滑圆角效果_CSS/HTML

这个效果非常独特,以前我所见过的这种特效实现过程非常复杂,但这里的源代码却非常简单,推荐收藏. <html xmlns:v><head><style>v\:*{behavior: url(#default#VML);}</style></head><body><v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px

CSS定义通用透明效果_CSS/HTML

复制代码 代码如下: .transparent{filter:alpha(opacity=12);-moz-opacity:0.12;opacity:0.12;background-color:#000;} filter:alpha(opacity=12); 支持IE -moz-opacity:0.12; 支持FF opacity:0.12; 支持未知 

js立体与阴影文字效果

提示:您可以先修改部分代码再运行 提示:您可以先修改部分代码再运行

精通CSS+DIV网页样式与布局--CSS文字效果

       上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图:                   接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例.         文字的字体      

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

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

最基本的几种CSS文字滤镜效果_CSS/HTML

闲来无事,整理一些CSS文字效果,给初学者.下面做个例子吧,这都是最基本滤镜的应用,其实两种或几种不同滤镜的组合会获得意想不到的效果,遇到问题自己多动手试试就OK了,当然要特别注意颜色的搭配,有时候用色不好是看不出效果的,配合背景图片的应用也会有很好的效果的.因为太懒,所以没有写注释也没有写什么语法格式,自己看看吧! 嘿嘿.(看不明白别骂我呀)      1.效果图: 一路阳光 一路阳光 一路阳光 一路阳光 一路阳光 一路阳光 一路阳光 一路阳光 一路阳光 SUNNY SUNNY 一路阳光 一路

css3 文字效果: 如何利用CSS3制作3D文字效果

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial.这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果.请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox.chrome.safari和opera.CSS文字阴影是如何实现的为了实现3

如何利用CSS3制作3D文字效果

下面这篇教程是教你如何用CSS3来制作3D效果的文字,文章翻译自3D CSS Shadow Text Tutorial. 这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果.请注意,这个3D文字效果是用纯CSS的,没有用Javascript,并且需要用支持CSS3的浏览器才能看出效果,如firefox.chrome.safari和opera. CSS文字阴影是如何实现的 为了

photoshop设计麦圈文字效果

  这里我们教大家利用photoshop设计一种超可人的漂亮文字效果,麦圈文字效果,PS文字特效:设计可爱的雪糕冰淇凌文字效果,制作思路:首先找一个可爱的粗一点的字体.然后利用图层样式的斜面浮雕制作出可爱漂亮的冰激凌效果字. 效果图 1.新建一个画布选择渐变工具(g)然后拉一个径向渐变.#a6ede9--#1ecdbc如图.拉一个底色为了以后文字操作看起来更明显 2.选择文字工具(t)然后分别在画布上打上LOVE 4个字母(每个字母一个图层), 本教程所用的文字在素材包里面有 3.点击图层面板下