CSS 文字阴影在网页设计中的应用
来源:互联网 发布:淘宝野模路边真实街拍 编辑:程序博客网 时间:2024/06/15 03:41
源自:http://fis.io/text-shadow.html
不久以前我有一篇文章介绍了 CSS3 鼠标悬停动画,里面简单提过关于 text-shadow, 本文则是详细写 text-shadow. 很遗憾 IE 仍然无缘,IE8 都不行,在这个 IE 特别是 IE6 居高不下的国度怎么办,由它去吧。
兼容性
据 MDC 的文档,支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari 4.0, 其中 Safari 是老早就可以的,但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示,但比较弱,阴影不能模糊。
阴影文字和发光文字
一个最简单的阴影文字是如下这样写的,其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值;5px 代表阴影的模糊半径,取值越大,阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。
text-shadow: 1px 2px 5px #888;
text-shadow: 0 0 10px #fd8;
浮雕文字
浮雕文字效果在 Mac OS X 和 iPhone 中随处可见,由于阴影半径很小,一般是 0 或 1px, 所以也适合小号的文本。在使用上一般遵循这个原则:深色文字浅色背景,用白阴影,浅色文字深色背景,用黑阴影。
text-shadow: 0 1px 0 #eee; 凹进效果
text-shadow: 0 -1px 0 #123; 凹进效果
text-shadow: 0 -1px 1px #eee; 凸出效果
text-shadow: 0 1px 1px #123; 凸出效果 - http://fis.io/
多重阴影
在上面所列的新版浏览器中都已经支持多重阴影,可以达到一些特殊的效果,不过注意,如果文字和背景颜色接近,IE 下就杯具了。
text-shadow: 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000;
text-shadow: 1px 1px 5px #08c, 1px 1px 0 #68a;
text-shadow: -2px 0 1px #db6, 2px 0 1px #6bd;
text-shadow: -1px -1px 0 #ccc, -1px -1px 3px #ccc, 1px 1px 0 #444, 1px 1px 3px #444;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
鼠标悬停切换
让鼠标悬停的时候改变状态是个不错的主意,有很强的互动的感觉。阅读器中可能看不到效果。另外,在 Firefox, Chrome, Safari 中能看到整个按钮也有阴影,这是另一个应用于块模型的阴影属性,写法和 text-shadow 一样,但需要写两条:-moz-box-shadow 和 -webkit-box-shadow.
把鼠标放到按钮上切换阴影
半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大,又不能太黑,于是从黑色改为灰色──问题来了,灰色的阴影在深色背景上很难看。
text-shadow: 1px 2px 3px #888; 杯具了
这时候要用到 rgba 颜色,在红绿蓝之外还有第四个值 alpha 通道,取值在 0~1 之间。下面的阴影是黑色,但是半透明了。半透明阴影的适应性明显更强,在模糊半径很小的时候,也能透出底下的背景色来。
text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
动态阴影
搭配上 前文 介绍过的 -webkit-transition, 可以让阴影在鼠标经过时有个变化过程,仅 Chrome, Safari 等 WebKit 浏览器有效。
把鼠标放到文字上,阴影在 0.5 秒内聚拢
- CSS 文字阴影在网页设计中的应用
- css在网页中的应用
- CSS技术在网页设计中的运用
- C++在网页设计中的应用
- 浮动帧在网页设计中的应用
- 文字阴影效果CSS
- css实例 文字阴影
- 网页设计中的文字运用
- android中的文字阴影
- css网页设计中的解决方案
- CSS文字条纹阴影动画
- CSS文字条纹阴影动画
- CSS盒子和文字阴影
- Flex技术在企业级开发中的应用-网页设计
- 引用 PhotoShop在网页版式设计中的应用
- 网页边框和网页文字阴影
- css中的阴影效果
- 在链接文字上应用CSS滤镜
- OpenRisc-34-ORPSoC跑eCos实验
- struts1 和struts 2区别 .
- 用 uniq 除去重复行
- 卸载HACMP 软件
- EXTJS4.x之实战项目(6)ArticleGridPanel实现增删改查之改
- CSS 文字阴影在网页设计中的应用
- SQL Server笔记之修改字段属性
- Java基础(4)--数组
- [Latex学习笔记]数学公式基本命令
- JAVA String.format 方法使用介绍
- Qt控件半透明设置,以及Qt控件去除父控件背景设置的方法总结
- getopt使用方法
- exit与atexit区别
- 【转】JS中数组Array的用法