【22】字体效果(阴影/浮雕)
来源:互联网 发布:pop3 默认端口 编辑:程序博客网 时间:2024/04/27 20:25
利用CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari4.0, 其中 Safari 是老早就可以的,但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示,但比较弱,阴影不能模糊。
浮雕文字
浮雕文字效果在 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; 凸出效果 -
阴影文字和发光文字
一个最简单的阴影文字是如下这样写的,其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值;5px 代表阴影的模糊半径,取值越大,阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。
text-shadow: 1px 2px 5px #888;text-shadow: 0 0 10px #fd8;
多重阴影
在上面所列的新版浏览器中都已经支持多重阴影,可以达到一些特殊的效果,不过注意,如果文字和背景颜色接近,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;
半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大,又不能太黑,于是从黑色改为灰色──问题来了,灰色的阴影在深色背景上很难看。
text-shadow: 1px 2px 3px #888; 杯具了
这时候要用到 rgba 颜色,在红绿蓝之外还有第四个值 alpha 通道,取值在 0~1 之间。下面的阴影是黑色,但是半透明了。半透明阴影的适应性明显更强,在模糊半径很小的时候,也能透出底下的背景色来。
text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
利用CSS text-shadow 属性支持 text-shadow 的浏览器有 Firefox 3.5, Chrome 2.0, Opera 9.5, Safari4.0, 其中 Safari 是老早就可以的,但直到 4.0 才支持多重阴影。另外 Opera mini 也能显示,但比较弱,阴影不能模糊。
浮雕文字
浮雕文字效果在 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; 凸出效果 -
阴影文字和发光文字
一个最简单的阴影文字是如下这样写的,其中 1px 2px 代表阴影相对于文字向右下方向偏移了 1px 2px, 可以为负值;5px 代表阴影的模糊半径,取值越大,阴影越扩散看不见。最后是阴影颜色。这样的阴影适合字号比较大的文字。
text-shadow: 1px 2px 5px #888;text-shadow: 0 0 10px #fd8;
多重阴影
在上面所列的新版浏览器中都已经支持多重阴影,可以达到一些特殊的效果,不过注意,如果文字和背景颜色接近,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;
半透明阴影颜色
有时候需要做的阴影不想它模糊半径太大,又不能太黑,于是从黑色改为灰色──问题来了,灰色的阴影在深色背景上很难看。
text-shadow: 1px 2px 3px #888; 杯具了
这时候要用到 rgba 颜色,在红绿蓝之外还有第四个值 alpha 通道,取值在 0~1 之间。下面的阴影是黑色,但是半透明了。半透明阴影的适应性明显更强,在模糊半径很小的时候,也能透出底下的背景色来。
text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
- 【22】字体效果(阴影/浮雕)
- 字体加阴影效果
- 使用 textview实现文字的阴影效果,浮雕效果
- android之字体阴影效果
- Android 字体阴影效果详解
- 字体颜色添加阴影效果
- android之字体阴影效果
- android之字体阴影效果
- 实现字体的阴影效果
- 浮雕效果
- 浮雕效果
- 浮雕效果
- Flex字体特效---阴影,朦胧效果
- android之字体阴影效果 [复制链接]
- Android Paint类介绍以及浮雕和阴影效果的设置
- Android Paint类介绍以及浮雕和阴影效果的设置
- VB6浮雕效果源代码
- 图像处理 浮雕效果
- 数据库连接池
- JavaScript的闭包详解
- maven使用命令创建项目失败[ERROR] Could not find goal 'create' in plugin org.apache.maven.plugins:maven-archety
- JavaScript(六)
- stm32f103系列芯片P15端口当做普通IO使用
- 【22】字体效果(阴影/浮雕)
- <深度学习系列>反向传播算法的公式推导
- Selenium參考資料(python,适合初学者)
- 修改element-ui中upload实例方法
- (0067)iOS开发之iOS新增类UILayoutGuide的用途
- Code : delegate,event,lambda
- 设计模式之中介者模式Mediator
- 提供实时业务应答的商业智能BI
- 凡事多找方法,少找借口。强者,都是含泪奔跑的人!