CSS3中HSL和HSLA的简单使用示例


Posted in HTML / CSS onJuly 14, 2015

CSS3中HSL和HSLA的简单使用示例

使用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
CSS3中HSL和HSLA的简单使用示例

上面的演示由以下样式实现

CSS Code复制内容到剪贴板
  1. div.hslL1 { background:hsl(320, 100%, 50%); height:20px; }     
  2. div.hslL2 { background:hsl(320, 50%, 50%); height:20px; }     
  3. div.hslL3 { background:hsl(320, 100%, 75%); height:20px; }     
  4. div.hslL4 { background:hsl(202, 100%, 50%); height:20px; }     
  5. div.hslL5 { background:hsl(202, 50%, 50%); height:20px; }     
  6. div.hslL6 { background:hsl(202, 100%, 75%); height:20px; }   

CSS3 HSLA
CSS3中HSL和HSLA的简单使用示例

上面的效果由以下样式实现:

CSS Code复制内容到剪贴板
  1. div.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:20px; }     
  2. div.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:20px; }     
  3. div.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:20px; }     
  4. div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; }     
  5. div.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:20px; }    
HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 #HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php curl选项列表(超详细)
2013/07/01 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
Python 多线程Threading初学教程
2017/08/22 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
静心口服夜广告词
2014/03/20 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
运动会200米广播稿
2015/08/19 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Consul在linux环境的集群部署
2022/04/08 Servers