|
CSS3教程(10):CSS3 HSL声明设置颜色
5 days ago
by justin
使用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、Goog ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(9):设置RGB颜色
5 days ago
by justin
使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。 RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。 浏览器兼容性 RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。 上面的效果有以下样式实现： div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; } ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(8):CSS3透明度指南
5 days ago
by justin
CSS3透明…不透明…渐变…随便你怎么叫它吧！这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了，而IE一直不支持！ “opacity”声明用来设置一个元素的透明度：层、文字、图片等…一个opacity的值为1的元素是完全不透明的，反之，值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。 浏览器兼容性 opacity是浏览器支持最好的一个CSS3元素…当然， 除了IE！ CSS3透明(例1：层) 上面的透明例子使用了下面的样式： div.opacityL1 { background:#036; opacity:0.2; width:5 ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(7):CSS3嵌入字体
5 days ago
by justin
想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！ 要使用一款字体，我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样，让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了，但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。 如果你手上没有字体文件，你可以在dafont.com下载一些。 跨浏览器兼容性 目前只有Safari支持@font-face特性( Google Chrome开发版 2.0.156+也支持这个特性)。 注意，你的浏览器需要一些时间加载字体文件 ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(6):创建网站多列
5 days ago
by justin
使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。 与多背景图片一样，CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法，请在下面的评论中提交你的链接，我很高兴能确认这种方法能用于很多中布局中。 跨浏览器兼容性： 比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome，这样我们就需要使用-moz和-webkit前缀了。 CSS3多列(宽度) 上面的截图是使用了下面的CSS3样式的效果： #multiColumnWidth { text-align: j ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(5):网页背景图片
5 days ago
by justin
背景图片/纹理有很多种使用方式，常常用于添加网站的最佳的最终美化。现在它在CSS3中被重视，我们可以应用多背景图和背景图片尺寸来实现更完美的效果。 CSS3的背景图片大小可以写成 background-size:Apx Bpx; -Apx = x轴(图片宽度) -Bpx = y轴(图片高度) 了解了这些，我们开始体验这个特性吧： 最好支持CSS3背景大小的浏览器是Safari和Opera，所以我们只需要使用-o和-webkit前缀。 背景大小 #backgroundSize{ border: 5px solid #bd9ec4; background:url(image_1.extention ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(4):网页边框和网页文字阴影
5 days ago
by justin
一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些，我们就可以以下面的方法开始体验了… 浏览器兼容性： 在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。 #boxShadow{ border: 5px solid #111; -webkit-box-sh ...
明的深蓝 - zheng-ming.com
|
|
CSS3教程(3):border-color网页边框色彩
5 days ago
by justin
使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6中颜色，那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性 目前只有Firefox支持CSS3 border-colour属性，所以我们这里只需使用-moz前缀。 所有本系列关于CSS3的文章都会及时更新，以跟踪浏览器的兼容性。 CSS3中的边框颜色 这里是一个10px宽的标准边框和边框颜色： #borderColor { border: 10px solid #dedede ...
明的深蓝 - zheng-ming.com
|
