CSS3系列教程:HSL 和HSL
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。
HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。
Hue衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。
Saturation值是一个百分比:0%是灰度,100%饱和度最高
Lightness值也是一个百分比:0%是最暗,50%均值,100%最亮。
随想:为什么是”ligntness”呢?或许我更习惯Photoshop中的”Brightness”呢……
浏览器兼容性:
目前HSL和HSLA被Firefox、Google Chrome、和Safari浏览器较好的支持,而且不需要任何前缀
CSS3 HSL
上面的演示由以下样式实现
div.hslL1 { background:hsl(320, 100%, 50%); height:20px; } div.hslL2 { background:hsl(320, 50%, 50%); height:20px; } div.hslL3 { background:hsl(320, 100%, 75%); height:20px; } div.hslL4 { background:hsl(202, 100%, 50%); height:20px; } div.hslL5 { background:hsl(202, 50%, 50%); height:20px; } div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }
浏览器支持:
- Firefox 3.05+
- Google Chrome 1.0.154+
- Internet Explorer 8-
- Opera 9.6 +
- Safari 3.2.1 +
CSS3 HSLA
上面的效果由以下样式实现:
div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; } div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; } div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; } div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }
浏览器支持:
- Firefox 3.05+
- Google Chrome 1.0.154+
- Internet Explorer 8 -
- Opera 9.6-
- Opera 10
- Safari 3.2.1+
CSS3系列教程|前端观察
- CSS3系列教程:简介
- CSS3系列教程:圆角、边框半径
- CSS3系列教程:边框颜色
- CSS3系列教程:阴影
- CSS3系列教程:背景图片
- CSS3系列教程:多列/多卷
- CSS3系列教程:嵌入字体类型
- CSS3系列教程:透明
- CSS3系列教程:RGBA
- CSS3系列教程:HSL & HSLA
最新文章
- 直接拿来用!超实用的Java数组技巧攻略[转]
- NiuTrans 日记 1
- hdu 3401 单调队列优化动态规划
- robolectric环境的搭建
- Overloads和Overrides在元属性继承上的特性
- (转)Spring 的 init-method 和 destory-method
- 深入解剖unsigned int 和 int
- SR锁存器
- Hive常用语句
- MySql随手记要
- 解决 slf4j + log4j 在云服务上打印乱码
- python 面向对象 析构方法
- BASIC-8_蓝桥杯_回文数
- 没听说过这些,就不要说你懂并发了,two。
- JS计算两个日期之间的天数,时间差计算
- ueditor初始化
- 八、Django之Models(译)
- Hbuider制作app升级包的简单办法 (升级官方提供的案例)
- datagrid(";getSelections";)只获取一行
- 160726 smarty 笔记(2)
热门文章
- Hive原理总结(完整版)
- 【Java基础】10、Java中throw和throws的区别
- MySQL分库分表浅谈
- 小程序webview应用实践
- linux下怎么进入本机mysql
- Ashampoo Driver Updater - 阿香婆驱动安装
- 【pygame游戏编程】第二篇-----移动图像
- 伪类选择器 E:nth-child(n)、E:nth-of-type(n)
- Salesforce数据安全简介
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL,spring获取context