博客园_维奇-前端档案(Fef)

【教程】jQuery打造动态渐变按钮

2010-04-21T05:28:00Z

这是写给web设计者和前端开发者的教程，我们将演示如何使用Photoshop创建按钮的sprite图，然后是如何使用jQurey打造动态渐变效果。本教程分为以下三步：

Step1 - Photoshop

Step2 - HTML/CSS

Step3 - JavaScript(jQuery)

Step4 - CSS修改

最终结果如下：

您可以点击查看演示，也可以点击下载源代码。

Step1 - Photoshop

1. 新建文件

按钮的尺寸是100px X 80px，但由于我们需要创建一个有两种状态的CSS sprite背景图，所以我们在Photoshop中创建（Ctrl+N）一个长宽为200px X 160px的图片文件，如下图：

2. 创建参考线

为了使绘制按钮更容易，我们创建参考线，从标尺中拉出参考线，如果你找不到标尺，可以按Ctrl+R显示，如下图：

3. 绘制形状

选择工具面板中的矩形工具，设置圆角半径为10px，在画布上绘制形状，如下图：

4. 设置形状样式

接上图最后一步，双击层，打开图层样式窗口，设置形状的样式，首先选择渐变叠加，设置渐变颜色从#3d3d3d到#8b8b8b，如下图：

然后，选择“内发光”，设置混合模式为“正常”，不透明度为100%，颜色设置为#ffffff，图素大小设置为3像素，如下图：

之后，再选择“描边”，设置大小为1像素，位置为“内部”，颜色为黑色#000000，如下图：

5. 添加字体

输入文本，设置文字相对水平和垂直居中，字体为方正准圆简体，字号36点，加粗平滑，颜色为白色（#FFFFFF），如下图：

6. 设置字体样式

同样的双击文字图层，打开文字图层样式，设置字体样式，点击“投影”，设置混合模式为“正常”，颜色为#3e3e3e，不透明度为100%，角度为90度，距离为1像素，大小为2像素；点击“内阴影”，设置混合模式为“正常”，颜色为#454545，不透明度为75%，角度为90度，距离为1像素，大小为2像素，如下图所示：

至此，我们就完成链接状态下的按钮背景图，效果如下：

7. 悬停背景图

制作鼠标悬停状态下的按钮背景图，把图层放入组内，复制组，移动，并重命名，如下图：

8.背景图属性

修改hover背景图的样式属性，打开背景图的图层样式窗口，选择“描边”，修改边框颜色为#004d77；选择“渐变叠加”，修改渐变从#1671a3到#5baedc，如下图：

9. 设置字体样式

打开字体图层样式，选择“投影”，修改投影颜色为#207aad；选择“内阴影”，修改字体颜色为#0d4f74，如下图：

10. 图层半透明

添加图层半透明效果，按以上步骤修改，鼠标悬停背景图如下，最后是再加上一层半透明层，先添加一个200px X 40px的白色层，置顶并设置白色层的透明度为10%，如下图：

最后，我们完成的CSS sprite背景图如下，您也可以点击下载PSD文件。

Step2 - HTML/CSS

按钮的HTML代码很简单：

<a class=”button”>前端档案</a>

再通过CSS设置一下背景图片就可以了，CSS代码如下：

/*链接按钮样式*/
.button {
	width:200px;
	height:80px;
	display:block;
	background:url(bg_button.gif) top no-repeat;
	text-indent:-9999px;
}
/*按钮悬停样式*/
.button:hover{
	background:url(bg_button.gif) bottom no-repeat;
}

按照我们前面设计的图片，按钮的长宽为200px X 80px，背景图为黑色按钮。这段CSS就能够实现我们示例中的第一种效果（纯CSS效果）。

Step3 - JavaScript/jQuery

通过JavaScript，我们可以让按钮更加炫酷一些，我们需要在之前基础上加一个元素，作为鼠标悬停时候显示的背景层，那么HTML会在DOM加载完成后修改成为：

<a class=”button”><span class=”hover”>前端档案</span></a>

元素在鼠标悬停前是全透明的，鼠标经过时，逐渐不透明，以达到渐变的效果，动画过程如下图：

通过以上分析，我们可以写出jQuery代码如下，在DOM加载完成后，为按钮链接添加层作为鼠标经过时的背景图，在为元素添加鼠标悬停事件，鼠标经过时，渐变至不透明，鼠标离开时，渐变至全透明。

//把文本包含到<span>元素中，再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span ></span>').css('textIndent','0').each(function () {
	//先设置<span>元素中全透明，再添加鼠标悬停事件
$('span.hover').css('opacity', 0).hover(function () {
		$(this).stop().fadeTo(650, 1); //渐变至不透明
	}, function () {
		$(this).stop().fadeTo(650, 0); //渐变至全透明
	});
});

至此，我们完成了JS代码，还要注意一个步骤，CSS修改，见Step4。

Step4 - CSS修改

在纯CSS效果的示例中，我们是利用:hover伪类来实现sprite图片的切换，当我们使用jQuery后，是引入一个层作为鼠标经过时背景图，所以CSS需要做如下修改：

/*之前的按钮悬停样式*/
.button:hover{
	background:url(bg_button.gif) bottom no-repeat;
}

修改为

/*不需要在设置:hover的样式，而是设置span.hover的样式*/
.button span.hover {
	/*注意要使用绝对定位*/
position: absolute; 
	display: block;
	width:200px;
	height:80px;
	background:url(bg_button.gif) bottom no-repeat;
	text-indent:-9999px;
}

总结

以上我们按4个步骤实现了一个动态渐变按钮，在演示中，我还提供了一个扩展示例，您可以跟着自己实现一个，也可以下载源代码修改定制，当然，您有什么好的提议或者有什么问题，欢迎给我留言。

查看最终效果

下载源代码

本文地址：http://www.cnblogs.com/wiky/articles/gradual-change-button.html

PS：本文由维奇原创，如有转载请注明出处，谢谢！

本文链接

【总结】高效整洁CSS代码原则

2010-04-17T06:37:00Z

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：

1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

.aaabb{margin:2px;color:red;}

我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：

<h1>My name is <span >Wiky</span></h1>

问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

.red{color:bule;}

这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}

这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

<p >我是一个段落！</p>

如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。

3. 代码缩写

CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

就可以缩写为：

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

如果您想更了解这些属性要怎么缩写，可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成：

#container{ font-family:Georgia, serif; }

5. 使用多重选择器

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  ----------------------------------- */

如此你代码的结构就一目了然，你可以容易的查找和修改代码。

而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:

/***	Header	***/ 
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}

/***	Content	***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/***	Footer	***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. 给你的CSS代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8. 保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。

9. 选择更优的样式属性值

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如

区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
　　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

10. 使用<link>代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

11. 使用外部样式表

　　这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

或

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>导入外部样式表：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

13. 代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

14. 总结

在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

本文地址：http://www.cnblogs.com/wiky/articles/better-css-code.html

PS：本文由维奇总结，如有转载请注明出处，谢谢！

参考资料：

WRITE BETTER CSS WITH BEST PRACTICES

10 Tips for Writing Better CSS

5 Ways to Instantly Write Better CSS

本文链接

【教程】jQuery打造动态下滑菜单

2010-04-15T05:47:00Z

本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特性可谓是家喻户晓，即使没有很丰富JS编程经验的人，也可以通过其提供的API很快学会如何使用，当然，如果您经验丰富，我还是建议您可以理解jQuery各主要函数的实现原理，其他不说了，直接看看如何用它来实现菜单神奇的效果吧。

您可以点击查看演示，也可以点击下载源代码。

Step1 - HTML结构

看一下菜单的HTML代码，跟平常的菜单代码没有什么区别：

    <ul>
        <li><a href="javascript:;">Home</a></li>
        <li><a href="javascript:;">HTML/CSS</a></li>
        <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
        <li><a href="javascript:;">Tutorials</a></li>
        <li><a href="javascript:;">About</a></li>
    </ul>
 </div>

关键在于利用脚本在每个锚点(a元素)中建立几个分隔层，这样就可以在鼠标悬停时分别控制它们产生动画。为此，我们要在DOM加载完成时候修改DOM的结构，使得每个锚点代码变成如下：

<a href="javascript:;">
    <span class="out">Home</span>
    <span class="bg"></span>
    <span class="over">Home</span>
</a>

原先的每个锚点中的内容会被附加到两个span元素（.out和.over）里面，另外一个span元素（.bg）为背景图片层。

至于如何修改DOM结构，JS代码将在Step3中讲解。

Step2 - CSS样式

在示例中，展示了两种样式，有使用背景图的和没有使用背景图的（具体查看演示），您也可以自由定制自己的样式，以设计出更炫酷的菜单，这里提供基本的样式和解释：

/* 以下是菜单基本的样式 */
.menu ul li {
    float: left;
    /* 菜单子元素的内容超出不可见 */  
    overflow: hidden;
    /* 以下省略部分代码 */
}
.menu ul li a {
    /* 必须是相对定位  */ 
    position: relative;
    display: block;
    width: 110px;
    /* 以下省略部分代码 */ 
}
.menu ul li a span {
    /* 所有层将使用绝对定位 */
    position: absolute;
    left: 0;
    width: 110px;
}
.menu ul li a span.out {
    top: 0px;
}
.menu ul li a span.over,
.menu ul li a span.bg {
    /* 起初.over层和.bg层相对a元素-45px以达到隐藏的效果 */  
    top: -45px;
}

/* 以下是使用背景图的示例 */
#menu {
 　　/* 菜单背景 */
    background:url(bg_menu.gif) scroll 0 -1px repeat-x;
    border:1px solid #CCC;
}
#menu ul li a {
    color: #000;
}
#menu ul li a span.over {
    color: #FFF;
}
#menu ul li span.bg {
 　　/* 指定高度和背景图 */
    height: 45px;
    background: url(bg_over.gif) center center no-repeat;
}

您也可以在自行定制CSS样式，这里还提供了简化版的样式（查看演示）

Step3 - JavaScript代码

首先要做的是，实现Step1中所说的，在DOM加载完成后修改其DOM结构，具体做法如下：

// 把每个a中的内容包含到一个层（span.out）中，
// 然后再在span.out层后面追加背景图层（span.bg）
$("#menu li a").wrapInner( '<span ></span>' )
　　　　　　　　　.append( '<span ></span>' );
// 循环为菜单的a每个添加一个层（span.over）
$("#menu li a").each(function() {
　　$( '<span >' +  $(this).text() + '</span>' )
　　　　　　　　　.appendTo( this );
});

在讲动画代码之前，先看一下动画的过程，如下图所示：

在Step1中我们知道DOM加载后，a元素中建立了几个分隔层，在Step2中，CSS样式中，我们设置了span.bg和span.over层的top属性为-45px，因为span元素已设置为绝对定位，它将相对于li a 元素向上-45px，因为li元素内容超出不可见，所以开始时，.bg层和.over层位于空间范围外。

我们要设置的动画过程是，当鼠标悬停时，三个层同时向下移动，span.out层向下移动至移除可见范围，span.over和span.bg移动进入可见区域，设置span.bg速度比span.over速度稍快，错位产生更加效果。

要实现这样动画效果，使用jQuery的.animate()方法很容易就可以实现，以下是JS代码和解释：

$("#menu li a").hover(function() {
　　// 鼠标悬停时候被触发的函数
   $(".out",this).stop().animate({'top':'45px'},250);//下滑至隐藏
   $(".over",this).stop().animate({'top':'0px'},250); //下滑至显示
   $(".bg",this).stop().animate({'top':'0px'},120); //下滑至显示
  }, function() {
   // 鼠标移出时候被触发的函数
   $(".out",this).stop().animate({'top':'0px'},250); //上滑至显示
   $(".over",this).stop().animate({'top':'-45px'},250);//上滑至隐藏
   $(".bg",this).stop().animate({'top':'-45px'},120);//上滑至隐藏
});

总结

以上讲解了如何一步步打造jQuery动态下滑菜单，您可以按部就班自己实现一个，也可以下载源代码修改定制，当然，您有什么好的提议或者有什么问题，都可以给我留言。

查看最终效果

下载源代码

本文地址：http://www.cnblogs.com/wiky/articles/animated-menu-0415.html

PS：本文由维奇总结，如有转载请注明出处，谢谢！

本文链接

【翻译】优秀网站的10个技巧

2010-04-01T06:18:00Z

每一个网站管理者都希望他们的网站是最好的。总有一个原因让他决定建立一个网站。但不管原因是什么，无论是出于商业目的还是为个人使用，创造一个令人印象深刻的网站始终是主要目标。

如果您希望您的网站看起来更专业，这十个技巧可能给您很多帮助：

1. 导航是关键

确保您的网站有一个有组织层次结构的文本链接。您的主页可以从每一个页面访问到。链接放置必须引导访问者无缝的从一个页面到另一个而不会造成任何混淆。

2. 内容依然是王道

从长远来看，一个信息丰富的网站最终会受欢迎。不仅访问者能从您优化内容的网站获得相关数据，优化内容也将使您的网站对搜索引擎友好。

3. 使用适当的文字和图形

不要过度用图片填充您的网站因为搜索机器人不能很好的理解它们。但无论如何，您还是需要它，因为相比一下图片比文字更能吸引访问者。平衡是关键。

4. 使用不同的浏览器测试您的网站。

在IE下看起来很好但在Mozilla下就可能不行了。所以请用互联网上流行的浏览器测试您的页面一确保您的网站看起来更加专业。

5. 少即是多

如果您看过Google的网站，那您知道这句话的含义。少字节意味着网页加载更快。

6. 确保您的网站没有坏链接

对一个互联网冲浪者而言，没有什么比在他们的电脑荧屏上看到页面无法显示更让人沮丧了。

7. 确保您的网站没有书写或语法错误

如果您想使您的网站看起来更完美更专业，你必须检查再检查，直到您对您网站的内容感到满意。

8. 设计的一致性很重要

不要再您的网站的每一页过度的穿插不同的配色方案。访问者可能会因为他们在不同的网站然后离开。请时刻保持页面统一。

9. 节制使用多媒体元素

在您的网站插入音频和视频是好的。但切忌自动播放因为它将会使得你的也没加载更慢。在一些情况下，它可能会崩溃用户的web浏览器。

10.保持每个页面简短

你最多只能让它在连击滚动条四下时让它滚动到页面的底部，除此之外，别无它法。

个人小结

很简单的十条小技巧，有些我们可能都知道，但在实际网站建设或者维护的过程中，我们却常常忽视，所以，无论您是一个网站开发人员还是个人站长，请花点时间思考一下，如何让您的网站更加优秀。

PS：中文翻译难以表达原作意蕴，建议品味英文原文。

中文地址：

http://www.cnblogs.com/wiky/articles/10-Tips-To-Having-A-Great-Website.html

英文地址：

http://www.articlesnatch.com/Article/10-Tips-To-Having-A-Great-Website-/898017

中文由维奇翻译，如有转载请注明出处，翻译如有错漏欢迎留言指出，谢谢！

本文链接

【总结】CSS透明度大汇总

2010-03-31T05:38:00Z

近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。

这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。

1. 旧的Opacity设置

以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {  
    -khtml-opacity: .5;  
    -moz-opacity: 0.5;  
}

-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：

#myElement {  
    opacity: .7;  
}

上述语法将设置一个元素为70％不透明（或30%透明）。设置opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。

opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。一般情况下，精确到一位就可以了，取值如“.3”或“.7”。

3. IE下的CSS透明度

IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：

#myElement {  
    filter: alpha(opacity=40);  
}

上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局，有如width 和 position。关于微软专有的hasLayout属性详情，以及如何触发它，参考这里。

另外一个设置IE8的CSS透明度的方法语法如下（注意注释中指出的版本）：

#myElement {  
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);  
   /* 第一行在IE6, IE7和IE8下有效 */ 
    -ms-filter: 
      "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
    /*第二行仅在IE8下有效 */
}

第一行代码针对当前所有IE版本，第二行仅针对IE8。

注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。

说实在，有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后，我也不确定是否还有必要用“progid”的方法。

4. 使用JavaScript设置和改变CSS透明度

您可以使用下面的语法访问JavaScript中的CSS opacity 属性：

document.getElementById("myElement").style.opacity = ".4"; 
 // 针对所有现代浏览器  
document.getElementById("myElement").style.filter =
 　　 "alpha(opacity=40)";// 针对IE

上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使用哪一行代码。

5. 使用JQuery设置和改变CSS透明度

直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({ opacity: .4 }); 
// 所有浏览器有效

您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({  
    opacity: .4  
    }, 1000, function() {  
    // 动画完成，所有浏览器下有效  
});

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

#rgba {  
    background: rgba(98, 135, 167, .4);  
}

在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

#hsla {  
    background: hsla(207, 38%, 47%, .4);  
}

更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度，仅此而已。

我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~

本文地址：http://www.cnblogs.com/wiky/archive/2010/03/31/CSS-Opacity-Comprehensive-collect.html

PS：本文由维奇总结，如有转载请注明出处，谢谢！

本文链接

【总结】WEB标准化交流会小记--广州站

2010-02-03T13:29:00Z

现在已经是第四期WEB标准化交流会了，广州站是本期新开通的，本次交流会的话题是“页面重构合理化讨论后续”，地点是网易大厦的“沉毅”会议室，非常感谢交流会主办方提供这样一个平台给前端从业者可以共同研讨前端动态，也感谢参会的同志们，特别是主负责人林毅同志和主持人扬眉同志~　　交流会报了名后暂住在深圳，交流会是在1月30日，当日就跑回广州参会了，碰上2月1日在深圳有个面试，又到深圳

【分享】一个好的网站需要什么

2010-02-03T11:29:00Z

序言在本篇文章中，我们将考察The Dung Beatles乐队网站的内容，以了解好的Web站点和网页需要包含些什么要素。你们尚不需要去研究网站和网页的基础代码，而只需考察不同的网页，思考其中应该包括哪些要素，并思考一些关键性的问题，如一致性、可用性和可访问性。本篇文章的目录如下：主页对我们的网站来说，这意味着什么？

【翻译】使用JavaScript库还是自写代码？

2010-01-26T12:20:00Z

有时候在写JavaScript添加到你的网页中的时候，你将需要决定是使用已有的可用的JavaScript库还是自己写所有代码。其中每个各有优缺点，因此没有任何一种方式对每个人来说都是绝对正确的选择。你必须做出决定以这两种方法中的哪一种来写你的JavaScript，为了帮助您作出明智的决定哪个更适合你，我们将对比一下这两种方法的一些优劣。　　在过去使用JavaScript库的一个缺点是，库往往相当大，也许包括不少代码在你的个人网页实际是不怎么使用的。因此，编写自己的代码可以被认为是最能完全满足你真正需求的方法，而且没有其他比这更有效的方法了

【总结】网站令浏览器崩溃的原因

2010-01-16T06:19:00Z

面试某公司的时候，面试官问到，导致浏览器崩溃的原因有哪些？愚辈不才，仅回答出了内存泄漏。其实在网页在装载的过程中，常常由于种种原因使浏览器的反映变的很慢，或造成浏览器失去响应，甚至会导致机器无法进行其他的操作。　　对于访客，如果登录您网站，浏览器就立刻崩溃，我想这对谁都是无法容忍的，对此总结了网站导致浏览器崩溃的原因：1. 内存泄漏2. 网页代码复杂和浏览器bug