ZH CEXO's BLOG

更换Firefox默认查看源代码工具的配色方案（更新）

ZH CEXO — Fri, 23 Mar 2012 06:55:34 +0000

之前写过《更换Firefox默认查看源代码工具的配色方案》，后来收到过评论还有邮件上的反馈，这些东西整理一下无外乎两点：一是提供的链接不能下载到文件了（uushare 关掉了），另外就是新版的 Firefox 再也找不到我所说的路径什么东西了。最近又在看一些代码，还是有觉得默认样式很丑的感叹，然后之前的版本我自己都没有备份，所以只好再重做一个了。

依然采用的是 Monokai 这个配色，用的是 Notepad++ 里面的配色方案为参照，并且把字体的样式什么的都修改了一下，看上去应该会舒服很多。预览图如下

使用方法：

1、下载我提供的 viewsource.zip 这个文件，解压得到 viewsource.css 这个文件

2、打开你的 Firefox 安装文件夹，在里面找到 omni.ja 这个文件

3、把 omni.ja 的后缀名改成 .zip 也就是改成 omni.zip

4、用 windows 自带的解压工具（资源管理器）解压提取它，请注意这里不要使用 7-zip 等其他的压工具，无效的

5、解压出来的文件按路径找到 \chrome\toolkit\res\viewsource.css 这个文件，然后用下载的文件替换这个

6、把解压过的文件安原来的方式用 zip 压缩一下，再把压缩生成的 zip 文件改成 omni.ja，拿去 Firefox 安装文件夹下面覆盖同名文件即可。需要注意的是，替换之前，请备份原来的 omni.ja 文件！！

点击此处下载文件

GM脚本：Simple Google Reader Style V1.31

ZH CEXO — Thu, 22 Dec 2011 08:15:39 +0000

昨天完成了工作任务之后，看了一下Google Reader，然后自己使用的脚本虽然已经增大了阅读区域，但是又觉得顶部的一片区域还是很白，而且搜索啊订阅啊什么的，平时用得不是太多，那既然不用，为什么不隐藏掉呢？开始动手，于是这个小更新的V1.31版Simple Google Reader Style就跟大家见面了。

顶部的区域默认是隐藏的。左侧的“主页”的顶部，添加了一个“显示顶部”的按钮，点击它可以切换顶部的显示和隐藏，大家自行试试吧。

自动更新的功能，表示研究了半天摸不着头脑，网上流传的方法也没生效啊。写了多段测试代码都失败了，看来我得多看看书。

点击此处下载脚本

GM脚本：Simple Google Reader Style V1.3

ZH CEXO — Wed, 30 Nov 2011 11:38:03 +0000

Google Reader风格来了一次大转变，然后这个脚本就失效了，也已经有朋友向我反应脚本没用了的问题，无奈我一直没有什么时间。今天下午做完了自己的任务之后，偷闲了一下，简单看了一下Google Reader的新界面，结果就把这个脚本整了出来。谢谢大家的支持啊！先上一张总效果的图：

虽然GM脚本很强大，但也只能基于新GR的版面来改，要想改得面目全非，除了需要技术，还需要时间，而这两种东西我现在都没有= =。做成原来版面的效果基本上不可能了，但我还是按着自己觉得舒服的方式改动了一下。

大红色的订阅按钮我把它放到搜索框的右边了，另外，导航栏里面的常用链接，我把它也放到搜索框右边的“常用的链接”那一项里面了。再者，把阅读文章时候，功能区的高度缩小了，用来扩大阅读区的视野。

最后，还是把字体改成了雅黑，字号改成16px，行距为两倍行距。至于长行短行切换的问题，脚本自动更新的问题，顶部导航条怎么处理，这个版本里都没有，抱歉了各位。。。

点击此处下载此脚本

使用CSS美化文件上传表单

ZH CEXO — Mon, 16 May 2011 09:14:33 +0000

开发webapp的朋友们应该对这样的表单元素不陌生吧，虽然我从来没接触过=_=。今天看到Mr.Think同学更新了一篇博客《利用label标签和CSS美化文件上传表单》，不过demo里面好像失效了……提到这里，我就把我知道的美化这样元素的方法分享一下吧。

DEMO在这里。

要说input[type=file]类型完全不支持CSS也不对，只是很多关于样式化的CSS方法对它无效，是出于安全的目的。不过position、z-index、opacity这些CSS属性还是支持的，所以就用这些方法来变通。

核心思想

其实我是把样式都加在了input[type=file]的父元素上了，当然你也可以使用它的兄弟元素等，根据项目的实际需要来定吧。然后用css把input[type=file]的透明度设置0。这样一来，虽然用户的眼睛不可见，但它还是存在于网页的那个地方，鼠标方面的交互也是可以做的。至于鼠标移入和移出时候的效果，就对其父元素指定hover状态和非hover状态时的样式。

另外，在上传按钮的交互上，IE和非IE系的不一样。IE里面，点击按钮前面的像文本框一样的部分是没用的，得点击“浏览”的按钮才会有窗口弹出。而在非IE里，点击框或者按钮都会有窗口弹出，所以为了解决在IE下的问题，使用position定位的时候，把按钮部分对准有样式的地方。图解一下（透明度非0时的状态）：

关键代码我也给一下：

/*设置input[type=file]父元素的样式*/
#input_file .right{
	float:left;
	width:100px;
	height:29px;
	margin-top:-6px;
	margin-left:10px;
	padding-top:4px;
	overflow:hidden;
	background:url(btn_bg.png) center top no-repeat;
	/*为子元素定位着想，使用relative*/
	position:relative;
}
/*鼠标在hover状态时样式的切换*/
#input_file .right:hover{
	background:url(btn_bg.png) center bottom no-repeat;
}
/*设置透明度，通用方法和IE专属方法*/
#input_file .right input{
	position:absolute;
	/*把浏览按钮置于交互中心，解决IE的问题*/
	right:0;
	opacity:0;
	filter:alpha(opacity=0);
}

已知问题

IE6不支持非标签的hover状态，所以鼠标悬浮的交互在IE6下无法实现，完美主义者请使用JS。

看上图就知道，IE上鼠标点到“浏览”按钮才会有效，所以左边的框部分点了不会有选择文件的窗口弹出，与鼠标悬浮的交互效果有些不协调，并且鼠标指针的样式无法定义。

更好的交互效果？更便利的定制外观？哥们，用flash吧，CSS做不到，至少我做不到……

用jQuery或者CSS3创建简单的动态按钮

ZH CEXO — Sat, 14 May 2011 15:01:39 +0000

提到Web上的按钮，大家会想到什么呢，古板的默认按钮，还是样式化的链接来代替的按钮？无论是什么，一个漂亮的按钮在页面上肯定会引起访问者的注意，并且因为是按钮（或按钮型的链接），所以也会有点一点的冲动。下面我就介绍一下如何用jQuery或才CSS3来制作简单的动态按钮。

先看一下例子吧：DEMO。（请使用Firefox4.0+、Chrome、Safari、Opera10.5+观看）

使用jQuery的方法

DEMO中我使用的是标签，然后用的图片（来自Tutorial9）来制造的按钮。那么渐变的动画效果是怎么样来的呢？我解释一下，一个标签写的链接，在DOM中的结构应该是这样的

HOME

如果我们分别为:link和:hover指定不同的背景，那么鼠标悬浮的时候肯定按钮是动不起来的。这时，我们变通一下。用jQuery在里面生成一个span标签作为子元素，为它指定hover状态的背景图片。因为是按钮切换时是渐变状态，所以我们就把span的透明度设置为0，鼠标悬浮上去的时候把span的透明度设置为1，这样就能把a标签本来的背景图片挡住，就实现了DEMO中的效果。变换之后的DOM结构是这样的：


    HOME

然后添加jQuery效果，代码如下，注释都包含在里面了：

$(function(){
	$('a.jsbutton').each(function(){	//遍历所有的需要添加效果的按钮
		//生成span标签，并把它插入到a标签的里，并将生成的span元素的透明度设置为0
		$('').appendTo(this).css('opacity','0');
		//用span这个变量来保存这个生成的span元素
		var span = $(this).find('span.hover');
		//为当前的a标签绑定hover事件
		$(this).hover(function(){
			//鼠标悬浮时，将生成的span元素的透明度设置为1，用来显示悬浮状态
			span.stop().fadeTo('slow',1);
		},function(){
			//鼠标离开时，将生成的span元素的透明度设置为0，用来显示a链接本来的背景
			span.stop().fadeTo('slow',0);
		});
	});
});

这里再次强调一下stop()方法的作用：

stop( [clearQueue] [, gotoEnd] )

两个参数均为可选，它们都是布尔值

clearQueue表示是否清空未执行完的动画序列

gotoEnd表示是否将正执行的动画跳转到末状态

如果两个参数均不设置，则它会立即停止当前元素的动画。如果动画序列中还有其他的动画，则会以当前状态开始执行接下来的动画

文中用到的方法，就是粗体标出的部分。

CSS3 Transition方法

这是纯的CSS3方法，所以代码是不涉及JS的，虽然比较简单，但效果不如JS，所以如果对视觉性的要求不是很高，用这个也未偿不可。另外，浏览器兼容能力有限，最后效果不能保证。核心代码如下：

.css3 a{
	/*css3 trasition变换，这里指定变换背景*/
	-moz-transition:background 0.4s linear;
	-webkit-transition:background 0.4s linear;
	-o-transition:background 0.4s linear;
}
.css3_a a:hover{
	opacity:0.75;
	/*css3 trasition变换，这里指定变换透明度*/
	-moz-transition:opacity 0.6s linear;
	-webkit-transition:opacity 0.6s linear;
	-o-transition:opacity 0.6s linear;
}

具体的CSS3的trasition方法，我就不介绍了，有兴趣的朋友们去看看W3C的那页（目前我没兴趣，收着暂时没看=_=）。

jQuery中处理动画序列引起的问题

ZH CEXO — Thu, 12 May 2011 13:31:16 +0000

jQuery中的动画效果应该是相当出色的，让我们能够以非常简单的代码来实现很多复杂的效果，比如show()、hide()、slideDown()、slideUp()等。另外，如果给同一个元素指定不同的动画效果，那么这些动画效果是按照序列来执行的，比如如下这段代码：

$(document).ready(function(){
    $('#panel').css('opacity','0.5');
        $('#panel').click(function(){
            $(this).animate({
                left:'500px',
                height:'200px',
                opacity:'1'
            },3000).animate({
                top:'200px',
                width:'200px'
            },3000).css('border','5px solid blue');
        });
    });
});

代码先将#panel这个元素的透明度设置为0.5，之后元素会先向右移动500px、高度变为200px、透明度变为1，再然后元素会在第一段动画完成后，向下移动200px，并且高度变为200px。这两段动画其实就组成了一个动画序列，先执行第一段，然后执行第二段。

不过有时候，这种有动画序列却会引起一些问题，比如我想用 jQuery 中的slideDown()和slideUp()来制作有滑动效果的下拉菜单：鼠标悬浮于导航的时候菜单滑下，鼠标离开的时候菜单滑上，可是如果不作任何处理，把鼠标快速地在几个导航上快速滑入滑出，菜单节奏就会乱掉，上上下下像在跳舞一下：

DEMO 1

解决方法一：使用 jQuery 带的 stop() 方法

jQuery 自带的stop()方法的描述是这样的

stop( [clearQueue] [, gotoEnd] )

两个参数均为可选，它们都是布尔值

clearQueue表示是否清空未执行完的动画序列

gotoEnd表示是否将正执行的动画跳转到末状态

如果两个参数均不设置，则它会立即停止当前元素的动画。如果动画序列中还有其他的动画，则会以当前状态开始执行接下来的动画

那么想想这个菜单的实际情况：鼠标移入的时候，实际它就会在动画序列里添加一个 slideDown 动画，然后在鼠标移出的时候再添加一个 slideUp 动画。因为动画是按顺序执行的，所以第二个动画非得等到第一个动画执行完毕了以后再执行。如果鼠标移入移出的速度过快，动画就会慢慢按序列里的顺序执行直到完毕，所以就会出现 DEMO1 中的效果。那么用stop()的方法来清空序列不就行了？是的，所以把stop()方法的第一个参数设置为true。

那第二个值呢？我们想想，我们的目标是把菜单完全展示于用户的面前，并且 slideUp 动画是需要基于之前 slideDown 的状态来完成的，你 slideDown 把菜单的整个高度都显示出来了，slideUp 才好把菜单隐藏掉。另外还需要注意的一点是，slideUp 和 slideDown 动画未执行完的时候，会把过程中的临时变量记录到 DOM 中，也就是说，如果你指定第二个参数为 false，那么比如菜单高度有 100px，但因为鼠标移出提前结束了，只展开了 10px，那么菜单的高度就是 10px 并且被记录在 DOM 中了。再次使用 slideDown 的话，它就会以 10px 为基础展开，显然菜单并不会完整地展示于用户有面前。所以把第二个参数也设置为 true，让它让元素动画直接跳转到末状态。

DEMO 2

大家可以把鼠标快速地在导航上滑入滑出试试看，虽然动画没有什么问题，但是能明显看到，如果在菜单展开的过程中移出了鼠标，菜单会立刻全部展开到末状态，而不是慢慢展开。关键代码如下

$(document).ready(function(){
    $('#menu > li').hover(function(){
        //这里的stop(true,true)指的是让动画队列清空，并且让已经在进行动画的元素到达动画的末状态，方便在第二次动画中使用
        $(this).find('ul').eq(0).stop(true,true).slideDown('slow');
    },function(){
        $(this).find('ul').eq(0).stop(true,true).slideUp('slow');
    });
});

解决方法二：使用 setTimeout 来判断鼠标悬停的时间

这种方法是 mg12 提出来的，感觉比第一种方法更好，菜单滑动的时候不突兀。关键代码如下：

$(document).ready(function(){
    //设定两个数组，分别对应在不同元素上鼠标滑入和滑出要触发的函数
    //鼠标滑入的数组
    var mouseover_tid = [];
    //鼠标滑出的数组
    var mouseout_tid = [];
    //使用each()方法，index为此方法自动传入的参数，记录匹配元素在元素集合中的所处位置
    $('#menu > li').each(function(index){
        $(this).hover(function(){
            //this为当前的li元素，这里赋给self变量，方便在setTimeout方法中引用
            var self = this;
            //先清除鼠标滑出时的slideUp方法
            clearTimeout(mouseout_tid[index]);
            //鼠标滑入时，把当前的鼠标滑放的方法记录到数组中，并判断鼠标停留的时间是否符合条件
            mouseover_tid[index] = setTimeout(function(){
                //如果这里不用self而用this，this指向的就不是当前的li这个DOM元素
                $(self).find('ul').eq(0).slideDown('slow');
            },150);
        },function(){
            //鼠标滑出时的说明与滑入时的说明相似，此处省略
            var self = this;
            clearTimeout(mouseover_tid[index]);
            mouseout_tid[index] = setTimeout(function(){
                $(self).find('ul').eq(0).slideUp('slow');
            },150);
        });
    });
});

DEMO 3

代码的关键位置我已经注释清楚了，你也可以去 mg12 的那篇文章里看看。与第一种方法的区别在于，由于没使用stop()方法，所以你不会看到很突兀的鼠标一移开，菜单马上全展开的时候的效果。

结语

这里只是用 slideDown 和 slideUp 举的例子，方法也可以适用于其他的情况，比如 fadeIn 和 fadeOut、animate 等。目前只介绍这两种方法，以后想到了再补充，另外，如果大家有更好的意见，欢迎反馈。

box-shadow用法简介

ZH CEXO — Tue, 10 May 2011 10:42:39 +0000

很多人写文章介绍什么东西的时候，都会使用“详述”两个字吧，但我这里写的是简介。当然这个简介也不会非常简单，只比“详述”简洁一些，因为可能在平时使用的时候，我们用不着关于box-shadow的方方面面，所以我只把我觉得有用的部分介绍一下。

之前下载了一篇《CSS3.0参考手册》，里面介绍box-shadow的时候很简单，简单得都不知道它想表达个什么意思，它是这样表述的：

语法：

box-shadow: ||

取值：

? ? || ：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

现在我将它正确地想表达的意思再表达一下：

box-shadow: x 轴偏移 y 轴偏移 [模糊半径] [阴影颜色] [inset]

· 其中 x 轴偏移和 y 轴偏移是必须的两个值（接受正值或负值）

· 模糊半径为可选（如果没有这个值，默认为0，不支持负值）

· 阴影颜色为可选（如果没有这个值，基于 Gecko 的浏览器会使用color属性的值，而基于 webkit 的浏览器会默认为transparent）

· inset选项为可选（如果没有这个值，阴影就为外阴影，显示在 box 外部，空间上在 box 后面；如果带有这个值，阴影即为内阴影，空间上显示在 box 前面）

· box-shadow目前要使用的话，基于 Gecko 的浏览器写成-moz-box-shadow，基于 webkit 的浏览器写成-webkit-box-shadow，opera 写成-o-box-shadow，什么都不写，IE9可以识别。

另外需要说明的一点是，box-shadow后面的参数添加阴影效果，你可以添加不只一组参数，每组参数之间使用逗号（,）来分隔，在同一个元素上使用多个阴影，比如像这样：

box-shadow: 0 1px 2px rbga(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5) inset, ……

我在上一篇文章里面使用了这种方法，大家可以看一下。需要说明的是，新添加的阴影，在空间中的位置会自动向后移一层，具体是什么效果我在下面写一下代码（仅支持box-shadow的浏览器可见）：

box-shadow

代码是box-shadow:5px 5px 0 red, 10px 10px 0 blue，可以看到，虽然蓝色的阴影是后来添加的，但空间上它却位于红色的阴影之下。再需要强调的一点是，box-shadow指定的阴影的形状会随着border-radius指定的圆角而变化。也就是说，如果你没有为 box 指定圆角，那么阴影也是方形的；如果你为 box 指定了圆角，那么阴影也是圆角的阴影。一个极端的例子如下：

box-shadow

至于 IE6/7/8 可以使用filter来实现，sofish 的这篇文章里写得很清楚了，可是我不怎么赞同这种写法。我认为box-shadow就是一种锦上添花的效果，如果浏览器方便支持，就加上，如果浏览器不支持，那也真没必要这么做。不知道这算不算是一种 Progressive Enhancement……

用CSS3创建漂亮的链接提示

ZH CEXO — Fri, 06 May 2011 16:35:55 +0000

最近我刚看了一篇国外朋友写的用CSS3创建这种好看的链接提示，然后自己亲自动手试了一下，就把试验过程以及相关的问题都写写，一来算是给自己练手，另外也希望给看着英语就头疼的朋友一点小小的帮助。

像这种链接提示并不难做，本质上来讲就是灵活运用position:relative和position:absolute罢了，我的博客里之前也提到过类似的文章，有兴趣的朋友不妨联合起来看一下，有不少相似性的。大家先看DEMO吧：

点击这里查看DEMO

实现的方法

鼠标的悬停显示用的是css中的hover伪类方法，我这里用了标签，大家也可以使用其他标签。也许你会说，IE6 不支持非标签的hover方法，这个后面说。总体思想就是，在标签中把提示里面用的内容用标签包裹起来，然后用 css 控制提示内容在鼠标悬停于标签的时候再显示。至于让内容正好出现在相应的标签的上方，使用的是position定位。让标签定位为position:relative，再把定位为position:absolute，这样对于每个标签对应的标签，定位总是相对于它的父标签的。大体的HTML如下：

Lorem ipsum dolor sit amet, consectetur Some TitleThere are tip messages or sth other alike.adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

至于我的代码里面出现了标签，是为了在 tip 上显示一个标题用的，这些你都可以自由发挥。大体的CSS代码如下：

.cooltip{ position:relative; font-weight:bold; display:inline-block; //IE下触发 hasLayout outline:none; } .cooltip span{ visibility:hidden; position:absolute; display:block; width:190px; height:56px; padding:6px 10px; bottom:30px; left:50%; //先定位 left 为参考元素宽度的一半，相当于左边沿位于正中央 margin-left:-106px; //再用负的 margin-left 值向左拉自身宽度的一半，用以保持自身中央正对链接 font-weight:normal; line-height:1.5; color:#555; border:1px solid #d4d4d4; opacity:.9; //加上透明度，提升质感 background-color:#f0f0f0; background-image:-moz-linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0)); //不同透明度的白色渐变，突出质感 background-image:-webkit-linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0)); background-image:-o-linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0)); background-image:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0)); -moz-border-radius:6px; border-radius:6px; -moz-box-shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.5) inset; //内外两种不同的阴影，用于高亮和投影 -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow:0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.5) inset; } .cooltip:hover span{ visibility:visible; //鼠标悬停时显示 span } .cooltip span strong{ display:block; //用来折行 color:#333; } .cooltip span:before, .cooltip span:after{ //用伪元素，避免添加不必要的标签 content:""; position:absolute; z-index:1000; left:50%; bottom:-7px; //让 :after 位于 :before 上面 1px，形成有背景的三角形 margin-left:-8px; border-top:8px solid #f0f0f0; //用于制作不使用图片的三角形 border-left:8px solid transparent; //用于制作不使用图片的三角形 border-right:8px solid transparent; //用于制作不使用图片的三角形 border-bottom:0; //用于制作不使用图片的三角形 } .cooltip span:before{ border-top-color:#d4d4d4; bottom:-8px; //让 :after 位于 :before 上面 1px，形成视觉上的边框效果 }

注释里我已经解释得比较清楚了，如果代码对于你来说相对很难懂的话，那么你需要多学习一些CSS相关的知识。原作者的文章链接我已经在文章的开头指出来了，大家可以访问一下。他的代码思想我用了，但没有生搬硬套，并且因为它的渐变是用带有透明度的黑色叠加的，所以效果上颜色有些灰暗，不鲜亮。我使用的是带有透明度的白色进行叠加，因此我做出来的效果跟他不一样。

总结

之前提到了IE6不支持非标签 hover 的方法，说实在的，这里写不写标签没什么意义，因为总体上 IE6/7 不支持:after和:before这样的伪元素，IE6/7/8 也不支持 CSS3 的渐变、阴影，所以你写了标签，IE6 也不会显示正常；你用了别的标签，高级浏览器一样支持。

IE9 不支持 CSS 的线性渐变，尽管 IE6/7/8/9 可以使用 filter 来实现渐变，但是渐变的颜色也不能指定为 rbga，没有透明度，叠加上去也很烂。另外，写个渐变、圆角和阴影都要为不同的浏览器加一堆前缀，写出的代码简直是一坨一坨的，难道你还想让 IE 的一坨坨代码过来湊热闹？

用 CSS 实现三角形的效果，我在 Colortip 文章里面已经提到，不清楚的朋友可以回到文章开头找到我写的链接，点进去看看。如果不用效果这么高级的 tip，用 jQuery 来跨浏览器实现 Colortip 的提示效果也是很不错的选择。

相关阅读
 使用CSS美化文件上传表单
我能想到的圆角背景的实现方法
用jQuery创建简单的滑动导航菜单
GM脚本：Simple Google Reader Style V1.31
GM脚本：Simple Google Reader Style V1.3
用jQuery或者CSS3创建简单的动态按钮
jQuery中处理动画序列引起的问题
box-shadow用法简介
とあるcnbeta的脚本
使用JavaScript对象属性防止变量被影响

© ZH CEXO for ZH CEXO's BLOG, 2011. | 查看原文 | 5 条评论
标签: 学习, 教程