仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 820|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 带来一篇CSS3教程(10):CSS3 HSL声明设置色彩

[复制链接]
山那边是海 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:04:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
利用CSS3HSL声明一样是用来设置色彩的。下一个呢?HSLA?是的,这个和RGBA的效果是一样的。
上一篇文章:CSS3教程(9):设置RGB色彩
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、GoogleChrome、和Safari扫瞄器较好的撑持,并且不必要任何前缀
CSS3HSL


下面的演示由以下款式完成
  1. 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+…)
  • GoogleChrome(1.0.154+…)
  • GoogleChrome(2.0.156+…)
  • InternetExplorer(IE7,IE8RC1)
  • Opera(9.6+…)
  • Safari(3.2.1+windows…)
CSS3HSLA


下面的效果由以下款式完成:
  1. 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+…)
  • GoogleChrome(1.0.154+…)
  • GoogleChrome(2.0.156+…)
  • InternetExplorer(IE7,IE8RC1)
  • Opera(9.6+…)
  • Safari(3.2.1+windows…)

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
分手快乐 该用户已被删除
沙发
发表于 2015-1-18 05:00:28 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
板凳
发表于 2015-1-24 14:01:47 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
海妖 该用户已被删除
地板
发表于 2015-2-1 17:08:15 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
只想知道 该用户已被删除
5#
发表于 2015-2-7 12:46:11 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
因胸联盟 该用户已被删除
6#
发表于 2015-2-22 10:19:31 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小魔女 该用户已被删除
7#
发表于 2015-3-7 00:42:10 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
简单生活 该用户已被删除
8#
发表于 2015-3-14 02:17:33 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
兰色精灵 该用户已被删除
9#
发表于 2015-3-21 00:35:10 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 13:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表