利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored Text)
来源:互联网 发布:韩国网络爆红拥有65g 编辑:程序博客网 时间:2024/04/26 23:30
原理
将二个相同而色彩不同的文字重合在一起,通过分别给其加 clip 属性,使上面和下面的文字被剪切位置不同,从而产生二种不同的色彩。
clip : 摘自苏沈小雨CSS手册
clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切 说明: 检索或设置对象的可视区域。区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。
测试环境
Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版通过。
CSS
.textBottom {color: #333333;position: absolute;left: 3em;top: 1em;font: 26px Century Gothic,Arial, Helvetica, sans-serif;clip: rect(18px auto auto auto);}.textTop {color: #CC0000;position: absolute;left: 3em;top: 1em;font: 26px Century Gothic,Arial, Helvetica, sans-serif;clip: rect(0 auto 18px 0);}.container {width: 28em;height: 5em;margin: 1em auto;position: relative;background: #F6F6F6;}
xhtml
<div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> <a href="#" class="textBottom">Cascading Style Sheet </a></div>
参考资料:http://www.ibloomstudios.com/article8/
- 利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored Text)
- 利用CSS的Clip属性来创造多彩文字
- 利用CSS创造多彩文字
- css 的clip属性
- 多彩文字的制作,纯css
- CSS中内容的剪切属性clip
- 神奇的css属性clip-path
- css{clip:rect}好玩的属性
- css中clip属性
- CSS clip 属性
- CSS clip 属性
- css中clip属性
- CSS中的clip属性
- CSS clip属性理解
- CSS clip 属性
- CSS background-clip属性
- 利用css制作多彩文字效果
- 利用css的clear属性实现文字环绕图片效果
- 用javascript仿163邮箱网盘多文件上传用户控件
- 像腾讯QQ和Skype一样定义自己的类似HTTP的Web协议,可以通过URL来触发自己的程序(附源码)
- Baldur's Gate重玩博德之门
- 利用javascript实现类似delphi中数据敏感控件dbtextbox!
- memset函数详细说明
- 利用CSS 的 Clip 属性来创造 多彩文字(Multi Colored Text)
- 在没有Word 2007的情况下如何编辑和打开.docx文件
- break和continue
- 个人简历
- eda江湖传奇
- 缘分
- J2EE连接数据库集合
- 从设计模式到梁思成
- 数据结构(C#)--双向链表