分享
 
 
 

用CSS实现特殊的字体效果

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果。这是一些效果示范,供各位参考。

效果一:

ccidnet

这个效果用了shadow滤镜,代码如下:

filter:shadow(color=black,direction=135)

效果二:

ccidnet

用blur滤镜做出的效果,代码如下:

filter:blur(direction=135,strength=10)

效果三:

ccidnet

用dropshadow滤镜做出的效果,代码如下:

filter:dropshadow(color=#888888,offx=8,offy=8,positive=1)

效果四:

ccidnet

用glow滤镜做出的效果,代码如下:

filter:glow(color=royalblue,strength=5)

效果五:

ccidnet

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

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

shadow(color=#ff3366,direction=135)

效果六:

ccidnet

这个效果也用到两个滤镜mask和shadow,和本文最顶端的例子一样,只是颜色不同,代码如下:

filter:mask(color=#f7f7f7) shadow(color=royalblue,direction=135)

注意:mask的颜色要和网页背景色一致,字体的颜色由shadow决定。

效果七:

ccidnet

这个效果和效果六类似,效果六中的mask用的是和背景同样的颜色,而本例mask则用的是红色,同样的,字体颜色由shadow决定。代码如下:

filter:mask(color=red)

shadow(color=black,direction=135)

效果八:

ccidnet

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

filter:mask(color=#f7f7f7f)

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

效果九:

ccidnet

这个有光晕的文字用了两个滤镜glow和droshadow,代码如下:

filter:glow(color=pink,strength=10)

dropshadow(color=royalblue,offx=3,offy=3,positive=1)

效果十:

ccidnet

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

filter:glow(color=green,strength=2)

shadow(color=#66cc99 ,direction=135)

效果十一:

ccidnet

ccidnet

ccidnet

如果背景采用图片,为了能达到满意的效果需要将mask和chroma组合使用,这样能使字体感觉是透明的,让背景透出来。上面列出的效果前者的代码是:

filter: mask(color=blue)

shadow(color=yellow,direction=135)

chroma(color=blue)

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

中间的代码是:

filter:mask(color=yellow)

glow(strength=1)

chroma(color=yellow)

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

后者的代码是:

filter:mask(color=white)

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

chroma(color=white)

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

效果十二:

WWW.CCIDNET.COM

这个效果的代码我就不说了,相信聪明的你一定能搞定的。

以上是CSS滤镜组合使用的一些例子,你如果有兴趣的话还可以尝试其他组合方式,如用flip滤镜产生倒相等,肯定能做出很多好的效果出来,让我们的网页更加丰富多采!

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有