ZH CEXO's BLOG » 翻译

你不会成为设计师的10个原因

ZH CEXO — Sun, 25 Jul 2010 17:04:11 +0000

你认为成为一个设计师很容易吗？你在学校受教育（有些人甚至跳过了这一环节），或是找到了一份工作，或是开始自己的自由职业，然后为别人做出一些看起来很酷的作品来赚钱。

这样就是设计师了。

或者是别的什么？

要成为一位出众的设计师——就像在任何别的行业干得出众一样——需要进行大量的实践，努力的工作和奉献精神。如果你是一位学生并且正在犹豫是否要把设计作为主业，或至少想知道走这条路是否正确。或者你已经是一位设计师了，但你正在踌躇作为设计师，这个职业是否真正适合你。

那么看了这篇文章之后，然后找到了几个你不能成为设计师的原因，这也没什么大不了的。

1、你没有艺术美感

我知道这看上去是不需要进行思考的，但它是值得探讨的。有些人一直持有一些心态，设计师和艺术家是两种完全不同的类型的人，仅仅在某些方面有相同之处。

但事实上，这种观点和事情的本质相差甚远。设计师就是艺术家——至少他们应该成为艺术家。正因为很多设计师工作在电脑前，所以这并不意味着他们的工作不涉及到现代的艺术过程。

很多优秀的LOGO和网站的设计都是从空白纸上画的草图开始的。但如果你花时间去关注它们，你就会发现很多设计师们使用这些软件直接开始艺术设计，比如Photoshop和Illustrator——设计领域的行业标准软件——都具有绘画风格的特点和专业术语。

2、你并没有设计的激情

要成为出众的设计师，你需要有进行创意的激情。拥有激情并不仅仅是喜欢或者容忍某些东西，有了激情，它会助你开足马力，让你渴望创造更多。

如果你对成为设计师没有太大的热情，还是别做设计师了。

对于许多设计师来说，倦怠是一大障碍。如果对着同一种类型的工作持续地工作几个月的话，你就会感觉到倦怠，但这时，激情将成为助你前进的动力。

3、你很容易分心，并且当你遇到交作品的截止日期时心神不宁

做设计一般需要你在相当长的一段时间里保持专注，但这并不是说有多动症的人就不能成为好的设计师，甚至很多人认为有多动症的人对于他们感兴趣的东西会保持高度的专注——这是个很大的优点。

你正在为本地一家广告公司作规划？那么扪心自问一下，如果你的规划截止时间要到了，你还能静下心来对着枯燥的要求，认真添加阴影效果、消除人物皮肤瑕疵、调整版式，并且将广告或者海报上的色彩组合发挥到尽善尽美？有时候还会花掉你周末的时间呢？

别误会，设计不是说让你一直工作不要休息，但有时候你就是要为了集中精力完成某个任务而花掉你的休息时间。

4、你不怎么会沟通

你与别人相处得如何呢？你的团队合作能力怎么样呢？如果这些问题听上去有些耳熟，那你一定在近几年找过工作。现在的企业主对沟通能力日益重视，对设计也应该如此。

有时候你可能会单独工作，但同样有时候你需要进行团队合作，接受意见，提出建议等等。

当我说要做个好设计师就要做个好沟通者时，并不只是说有效地和客户交流或是与你合作的人交流，同样要和工作本身关联。毕竟设计的本身是一种传播形式——唯一不同的是，设计是视觉上的，而不是口头上的。

5、你不能很好地回应批评

当有人向你提出，你的作品还有改进的余地时，你会想给他一巴掌吗？批评——然后将这些批评收集起来并纳入到你的项目中做得更好——是设计中的日常行为。

显然，你不可能一整天地给提出批评的人耳光，所以应该去了解批评在你的设计上扮演的角色。没人喜欢别人说自己的点子不好，但有时这并不值得争论。

如果你是位自由职业者，比如，你的客户（他不是设计师）想让你改一下作品，尽管可能改后并不好，或者给你一些残忍（即使不准确）的批评。那你只要想到，我能在这个项目上赚到钱，心里还有什么不爽的呢？

另外，如果你做内部设计工作，你的上司很可能会站在你的身旁，告诉你什么可行、什么不可行（即使你不赞同他的观点）。这就需要时间来缓和，直到你高升的那天，你可以对别人发号施令了——但同时，你能冲破羁绊吗？

6、你不会出谋划策

设计师需要奇思妙想就像考拉需要桉树一样——如果你不具备有效益的奇思妙想的能力，那还不如死了好。

每个设计项目都是从一个想法开始的。原创就是设计中的一切。即使是最好的设计师，脑袋有时也会卡壳，但真正出众的设计师会战胜途中的一切困难，保持强劲。

所以，如果你精神上像开着坦克一样有铲平一切的决心，你能成为一位出众的设计师，但如果你开的是一辆小丑的车那就……

7、你总是杂乱无章的

设计需要良好的组织能力，你不应该感觉惊奇。从你的工作区开始，如果你在一个有组织的环境下工作，就很容易找到你想要的东西，而且你会更加富有成效。但还没完。

你应该将你的日程安排好，但还不够，远远不够——设计本身就是一个组织性的任务。你按某种方式组织好信息，让看你作品的人懂你的理念。设计在很大程度上，是视觉艺术和科学的交融。

8、你很懒惰

懒惰是做好设计的天敌，同学们，我现在不想为你打破它。夏天去的地方最重要的事就是能赶上白天的电视节目了。一旦你毕业了，工作将是全职的。

如果你把设计作为职业生涯，你将有不得不完成的任务（惊！）。这就像学校里面的功课，你不及时上交就会得到F评级或是被解雇。就这么简单，真的。

如果你想以专业设计师来赚钱，你就必须工作，而且不单是工作，还要做好它。要做好工作，就必须得投入时间进行实践，而不是放弃。

9、你讨厌不能活动的工作

设计不是跑步、游泳、爬山或是滑雪。这不是一个让身体劳累的工作，你的大多数时间就是坐在椅子上对着你的显示器、鼠标、键盘和手写板而已。

如果你想保持身体健康，得花费你自己的时间去锻炼。

10、你不喜欢学习

如果你在大学里勉强度日——让我们再真诚些，这不是在讲火箭科学，设计是世界上最简单的专业之一——那么你可能不喜欢我接下来要说的东西。

设计需要花费一生进行不间断地学习来保持其相关性。有的人喜欢学习（特别是如果他们热爱他们的工作），但另一些人可能不喜欢学习，避而远之。

新版本的程序马上就会开发出来，新的技术也会诞生，设计师必须学习如何创造新的媒体。学习新鲜事物并改变你旧的设置方式（如果有设置方式更是作为一个设计师的选择）占了工作的绝大部分。

一些赠别

设计，同其他任何专业，都要有奉献精神。如你真对设计充满了激情，应该只考虑作为一个设计师的职业生涯，有很强的沟通能力，能把自己和信息组织良好，并且喜欢学习新的事物。

Refer Six Revisions

我的废话

看完文章，我表示压力很大，但回过头来看看作者开头说的，还是该怎么努力怎么努力吧！

利用CSS和jQuery创建一个屏幕键盘

ZH CEXO — Sat, 23 Jan 2010 08:41:26 +0000

有时候利用我们所知的程序语言来制造一些快乐，看看我们能做出些什么东西来是很有趣的事情。我想用CSS来创建一个小巧的屏幕键盘，然后拿jQuery使这个键盘真正可用，那将是多好玩的一件事啊。这个屏幕键盘还包含一些“功能键”（CapsLock，Shift，Delete），当我们点击键盘时，它们也可以动态地变化。现在我教你怎么来制作它。

源文件 | DEMO演示

第一步：基本的HTML和所需的文件

制作这个键盘需要大量的HTML代码，然后用CSS设置外观。每一个键都将使用li标签包围，再把它们置入一个ul无序列表标签中，而每个li元素也将拥有一个class属性，便于在CSS和jQuery中使用。一般的类属性都是“letter”、“lastitem”等，以便于我们容易找到想要的那个li。首先在你想要的地方创建一个新的文件夹，在这个新文件夹里创建一个index.html文件，再创建css和js两个空文件夹。最后，在css文件夹里创建style.css文件，在js文件夹里面创建keyboard.js文件。

在这个HTML文件里，我们要调用两个js文件和一个css文件，在body标签的里面，将写上大量的包含字母、数字和功能键的li元素，还包括一个id为keyboard的文本域（textarea）元素，用来显示键盘上“打”出来的字符。下面列出index.html文件中的所有代码：





	

	Online Keyboard
	




	
	
		`~
		1!
		2@
		3#
		4$
		5%
		6^
		7&
		8*
		9(
		0)
		-_
		=+
		delete
		tab
		q
		w
		e
		r
		t
		y
		u
		i
		o
		p
		[{
		]}
		\|
		caps lock
		a
		s
		d
		f
		g
		h
		j
		k
		l
		;:
		'"
		return
		shift
		z
		x
		c
		v
		b
		n
		m
		,<
		.>
		/?
		shift

不要太在意这巨量的li元素，我们使用jQuery代码的时候我会解释它们的作用，而其他的一些类名，比如right-shift和lastitem，是因为我们在CSS中要用到它们。

第二步：美化这些列表元素

只使用Javascript而不使用CSS的话，这个键盘工作起来也正常，但它就会看起来不像键盘。下面的样式的作用我不会逐个去解释，因为它们很容易看懂，然后将下面的代码保存到style.css文件中去，放到css文件夹里面。

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
	#keyboard li {
	float: left;
	margin: 0 5px 5px 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #f9f9f9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}
		.capslock, .tab, .left-shift {
		clear: left;
		}
			#keyboard .tab, #keyboard .delete {
			width: 70px;
			}
			#keyboard .capslock {
			width: 80px;
			}
			#keyboard .return {
			width: 77px;
			}
			#keyboard .left-shift {
			width: 95px;
			}
			#keyboard .right-shift {
			width: 109px;
			}
		.lastitem {
		margin-right: 0;
		}
		.uppercase {
		text-transform: uppercase;
		}
		#keyboard .space {
		clear: left;
		width: 681px;
		}
		.on {
		display: none;
		}
		#keyboard li:hover {
		position: relative;
		top: 1px;
		left: 1px;
		border-color: #e5e5e5;
		cursor: pointer;
		}

注意下面的样式，它们非常重要

1、.on——在有的li标签中，有两个span标签，这是因为它们的按键上有两个字符，比如数字键。而拥有on类名的字符会隐藏起来，当点击shift按键时，它们才会出现。

2、.lastitem——每一行的最后一个字母所在的元素，都必须除掉其margin-right值，以免破坏布局。

第三步：让按键拥有生命

你现在如果单击这些按键，不会有任何效果，下面我们用一点jQuery代码来解决这个问题。我们的主体思想是为每个列表项加上单击处理，单击的同时获取按键上的文本，用列表项的类来处理这个问题。当然了，从现在开始的js代码，都请放到js文件夹下的keyboard.js这个文件里。

初始设置

使用jQuery，然后我们要定义三个变量，用于整个代码中，它们是文本域（textarea）、shift按键的状态和大写字母锁定键（CapsLock）的状态。

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	// The rest of the code goes here.
});

下面要做的是，为每个列表项目（按键）都增加上单击处理，当按键被点击时我们要处理两个变量。定义$this来减少我们的输入，character则用来定义列表项目的HTML，如果列表项目中是个字母，则变量会按原值返回。

$('#keyboard li').click(function(){
	var $this = $(this),
		character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

	// Code for processing the key.
});

Shift键和CapsLock键

如果shift键（带有类left-shift或类right-shift）被点击了，我们要转换所有的字母为大写状态，对于带有类symbol的列表项目，我们将转换显示套嵌的span标签，然后我们要做的是为shift设置一个相反的布尔值（比如值为true就设置为false，反之亦然）。再为capslock设置false，然后返回false让character变量不发生变化。

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
	$('.letter').toggleClass('uppercase');
	$('.symbol span').toggle();

	shift = (shift === true) ? false : true;
	capslock = false;
	return false;
}

现在，如果capslock键被点击，我们就转换为字母为小写，设置capslock变量为true，用false作为返回值。

// Caps lock
if ($this.hasClass('capslock')) {
	$('.letter').toggleClass('uppercase');
	capslock = true;
	return false;
}

删除键

为delete键，我们得指定另外一个变量：html——当前textarea中的内容。一旦点击了delete键，我们就用textarea中的值去掉最后一个字母，重新设置为textarea的内容，用Javascrip的substr方法来实现它。接着我们依然返回false让一切保持原样。

// Delete
if ($this.hasClass('delete')) {
	var html = $write.html();

	$write.html(html.substr(0, html.length - 1));
	return false;
}

特殊字符

对于不是字母键和功能键的其他按键，我们利用character变量来做一些特别的事情。对于带有symbol类的键，character就被设置为span为visible时的键的内容，然后空格用于空格键，点击Tab键时将character设置为\t，最后的回车键则设置character为\n。

// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

大写字母

如果你还记得，当我们按下键盘上的shift或者CapsLock键，那么“uppercase”这个类就会用toggleClass这个函数添加或删除到键盘上的字母键上。如果这个类在字母键上找不到，那么这些字母都会使用toUpperCase的方法，转化为相应的大写形式。

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

最后

对于正常的键盘，shift键每次只对一个字母键起作用。如果shift变量被设置为true，我们就转换symbol的span的显示，同样的，当CapsLock键被按下时，字母键的大小写也会进行转换。

最后要做的，就是把字母都显示到textarea文本区内并且让用户可以继续“键入”。

// Remove shift once a key is clicked.
if (shift === true) {
	$('.symbol span').toggle();
	if (capslock === false) $('.letter').toggleClass('uppercase');

	shift = false;
}

// Add the character
$write.html($write.html() + character);

最终的Javascript代码

$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

	$('#keyboard li').click(function(){
		var $this = $(this),
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();

			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}

		// Caps lock
		if ($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		}

		// Delete
		if ($this.hasClass('delete')) {
			var html = $write.html();

			$write.html(html.substr(0, html.length - 1));
			return false;
		}

		// Special characters
		if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
		if ($this.hasClass('space')) character = ' ';
		if ($this.hasClass('tab')) character = "\t";
		if ($this.hasClass('return')) character = "\n";

		// Uppercase letter
		if ($this.hasClass('uppercase')) character = character.toUpperCase();

		// Remove shift once a key is clicked.
		if (shift === true) {
			$('.symbol span').toggle();
			if (capslock === false) $('.letter').toggleClass('uppercase');

			shift = false;
		}

		// Add the character
		$write.html($write.html() + character);
	});
});

总结

有时像这样折腾一下挺好的，虽然可能最后的结果不完全如我们所愿。这次，只需要对列表的项目应用一些类名，我们就可以用CSS和jQuery来创建一个屏幕键盘。我们今天做的这个屏幕键盘也不是完全没用，有的网站上不就有屏幕键盘来辅助输入的么？关键在于，这样折腾一下，能让我们更好的理解CSS和jQuery搭配使用能产生的强大效果。

文本来源于Creating a Keyboard with CSS and jQuery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

youlove.us上的背景滚动效果是怎样实现的（翻译）

ZH CEXO — Mon, 26 Oct 2009 02:45:14 +0000

很多人都问我们在这个新的网站上背景滚动的效果是怎么实现的，所以这一篇我就向大家解释一下它的工作原理，这样大家在看源代码时可以省去一些麻烦。按你自己的想法使用自己的设计而不要直接COPY我们的代码和图片——毕竟我们在这上面花了大把时间~

它怎么工作的

这个技巧实现起来比它看起来容易得多，其实它就是把一张很长的渐变图像放到一些透明的PNG图像后面去滚动。页眉的背景（包括我们的LOGO、导航条和笔记本图像）都有透明度和一些文字，但主页面的图像上的标题文字则是透明图像。

用到的图片

整个效果中我们使用本站的图片，不过你有需要的可能就只是背景和页眉的图片吧，我们有：

背景图片

页眉图片

主页内容图片

页脚图片

CSS

为了对搜索引擎、屏幕阅读器和早先版本的浏览器友好，我为还是得在背景图片上加上说明文字，然后再用CSS把它们隐藏起来。

JavaScript

JavaScript就是让这一切变得神奇的魔法，这里我们使用jQueyr框架和CSS来让背景动起来。

$(function() {

	// ***
	// 背景滚动
	// ***

	// 背景图像高度，单位px
	var backgroundheight = 4000;

	// 取得当前时间的分钟/小时
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// 计算一下今天已经过了百分之多少，例如下午六点 = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);

	// 计算一下从多少px的地方开始滚动图像
	// 通过使用今天已经过的百分比
	var offset = backgroundheight / 100 * percentofday;

	// 图像的起点大约是早点六点, 所以调整它偏移 1/4
	var offset = offset - (backgroundheight / 4);

	function scrollbackground() {
		// 将偏移量降到1px为止, 如果小于1px，就增加它
		// 背景的最小高度为1px
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// 应用背景的位置
   		$('body').css("background-position", "50% " + offset + "px");
   		// 让它继续滚动
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}

	// 开始滚动
	scrollbackground();
}

真正灵巧的部分

读过上面的代码你可能会注意到，如果你在一天内不同的时间来访问我们的网站，那么背景也是从不同的地方开始滚动的，比如说，如果你是晚上访问我们的网站，你会看见夜空的背景，如果在早上，你会看见日出~

如果你有任何评价、疑问或者对代码改进的看法，可以和我们联系。

2009-07-30更新

一些评论中提到，在Firefox 3.5下面CPU的占用率会大幅上升，所以我就更新了代码。新的代码抛弃了backgroundposition.js和jQuery的animate()方法，使用的是简单的改变CSS中body背景的background-position值，每次循环改动1px。在一些使用Firefox 3.5的老电脑上，CPU的占用率已经从65%左右下降到了30%，其他的浏览器好像还没出现这个问题，欢迎继续反馈！

译者注：

最后一句不知道怎么翻译：CPU usage on an older machine running FireFox 3.5 went from around 65% to 30%. All other browsers still appear not to struggle with it.囧……

就我自己体验，在Firefox 3.5上使用这个效果很卡，而其他浏览器不会出现问题。

查看效果

直接访问http://youlove.us/，然后仔细看看首页头部的背景，中部标题的颜色和页脚背景的变化，相当不错的效果。

文本来源于The youlove.us scrolling background effect explained，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

使用jQuery创建滑动图片/显示内容的效果（翻译）

ZH CEXO — Sun, 25 Oct 2009 08:57:25 +0000

先看一下效果再说吧

不久前有人问我怎样来实现这种效果，所以我就写了这样一篇教程。由于我是第一次写这样的教程，还希望大家提出建议或批评哈。首先让我们看看要做些什么。

第一步

创建一个名为index.html的文件，在里面写上一些基本的html代码





	
	
	

	
	Untitled Document

第二步

然后我们为这个html文件里添加一些内容代码，再去写css





	
	
	

	
	Untitled Document

	





	

		
			

			
				HTML Ipsum Presents
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
			

			
		


		
			

			
				HTML Ipsum Presents
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

到了这一步，我们做了以下改变：

1.为内容片添加了一个类名为slideBox的div标签。这里使用类而不是id是因为同一页面里可能会多次用到这个效果。

2.在文字的上方加上了要使用到的图片

3.带有content类的div标签包覆住了文本，当图片滑动消失时这些文本就会出现。

现在看看我们做成了什么样子

呃……看起来不是很好看，但不要着急，我们等会儿会改变它

第三步

既然html已经做好了，那我们设计一下样式吧

body {
	font-family: Tahoma;
	font-size: 12px;
	color: #fff;
	line-height: 150%;
	background-color: #6081c4;
}

h1 {
	margin-bottom: 15px;
	font-size: 18px;
}

#container {
	width: 960px;
	margin:25px auto;
}

	div.slideBox {
		width: 325px;
		height: 325px;
		position: relative;
		float: left;
		margin-right: 25px;
		overflow: hidden;
		border: 5px solid #ccc;
	}

		div.slideBox img {
			position: absolute;
			z-index: 2;
			width: 325px;
			height: 325px;
		}

		div.slideBox div.content {
			position: absolute;
			z-index: 1;
			padding: 10px;
		}

代码说明：

1.从#container开始，先应用一个宽度（width）然后把containter容器居中，代码margin:25px auto;

2.诀窍在于为div.slideBox设置overflow:hidden;的属性，其他属性也没什么特别，除了position:relative，它能让子元素和父元素相互关联，这里是指div.slideBox这个父元素

3.对div.slideBox img使用绝对定位，并且指定z-index的值为2

4.最后为div.slideBox div.content使用绝对定位，指定z-index的值为1，把文字放到图片的下面

OK，已经完成了内容的格式化，我们继续下面的工作。

第四步

如果你仔细看了上面的html代码，你就会注意到，我已经加上了jQuery框架的调用代码

jq的代码相当简单，如下

$(".slideBox").hover(function(){
	$(this).find("img").stop().animate({
		top:-325
	}, 500);
}, function(){
	$(this).find("img").stop().animate({
		top:0
	}, 500);
});

下面我解释一下代码的作用

1.首先检查鼠标是否在内容区域，如果在，我们就把图片向上移动325px

2.当鼠标移出区域时，我们把图片移到原来的地方

下面就是完成后index.html的所有代码





	
	
	

	
	Untitled Document

	





	

		
			

			
				HTML Ipsum Presents
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
			

			
		


		
			

			
				HTML Ipsum Presents
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

DEMO | 下载完整范例

文本来源于How to create a sliding image/reveal content with jquery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

使用jQuery制作精致的复选框（翻译）

ZH CEXO — Sat, 24 Oct 2009 07:34:28 +0000

最近我做的一个项目中需要用到复选框，但是默认的复选框界面显得不够友好，我想让它更具有吸引力。在这个简短的教程中，我将教大家把这个

变成这样

这种效果使用CSS和jQuery实现，你可以点击这里看到简单的DEMO演示。如果你是jQuery新手，可以参考一下官方的教程和资源。

现在你一定很激动了，那我们开始吧……

1、表单标记


	
		
			 Choice one
			 Choice two
			 Choice three
			 Choice four

这样就很好，但我们还要加点东西，使用列表把复选框、内容和控制包覆起来


	
		
			
				
					
					Here is the first selection
					Select
					Cancel
				
				
					
					Here is the second selection
					Select
					Cancel
				
				
					
					Here is the third selection
					Select
					Cancel
				
				
					
					Here is the fourth selection
					Select
					Cancel

复选框依然保留，但我们不点它，选取/取消复选框的动作会由每个列表项目中的“Select”和“Cancel”来操作。

2、背景

每个列表项目都有已选取和未选取两种状态（分别用绿色和灰色标示），我们可以把它们的背景合并到一张图片上，然后改变背景的位置进行切换标示复选框的状态。启动Photoshop制作以下的图片：

列表项目宽105px，高150px，所以制作出来的checkboxbg.gif应该有210px宽（两倍于原宽度）。当处于被选取状态时，就将背景向左移动105px将绿色展示出来，我们用CSS来实现这个比较容易，而sendit.gif和select.gif分别用于提交按钮的背景和已选取状态的背景。

3、CSS

.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist li {
	float: left;
	margin-right: 10px;
	background: url(i/checkboxbg.gif) no-repeat 0 0;
	width: 105px;
	height: 150px;
	position: relative;
	font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

.checklist li.selected {
	background-position: -105px 0;
}

.checklist li.selected .checkbox-select {
	display: none;
}

.checkbox-select {
	display: block;
	float: left;
	position: absolute;
	top: 118px;
	left: 10px;
	width: 85px;
	height: 23px;
	background: url(i/select.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.checklist li input {
	display: none;
}

a.checkbox-deselect {
	display: none;
	color: white;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: 120px;
	right: 10px;
}

.checklist li.selected a.checkbox-deselect {
	display: block;
}

.checklist li p {
	text-align: center;
	padding: 8px;
}

.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: url(i/sendit.gif) no-repeat 0 0;
	text-indent: -9999px;
	margin: 20px 0;
}

就像我上面提到的，为列表项目加上selected类实现翻转背景图片的效果，隐藏“Select”链接并显示“Cancel”链接，复选框同样被完全隐藏（但在表单标记中要用到它）。

4、jQuery

用jQuery把以上的制作合并到一起：

$(document).ready(function() {
	$(".checklist .checkbox-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);

	$(".checklist .checkbox-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);

});

第2行

这个选择器选择所有绿色的“Select”按钮并为单击事件指派一个脚本

第4、5、6行

为了在载入页面的时候避免链接使用它的默认属性而继续我们的操作，$(this)对象是指向“Select”按钮本身

Select

所以$(this).parent()在DOM中指向按钮的父元素，即

标签，也就是我们需要加上“selected”样式的元素。最后，第6行用来保证我们在设置复选框为已选取状态时真正被选取。

第10行

这个选择器选择所有的“Cancel”链接（当列表项目设置为“selected”时不可见）

第12、13、14行

用来除去我们在4、5、6行中所做的一切

DEMO

文本来源于Pretty checkboxes with jQuery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。

微软重新推出Windowslive.com作为一个社交网络

ZH CEXO — Tue, 05 Aug 2008 06:14:24 +0000

直至目前为止，微软曾使用Windowslive.com为主要枢纽，获取有关其LIVE品牌的相关服务的信息，如Messager，Hotmail，Spaces，Skydrive和Photo Gallery。今天，微软把该网站作为一个社区网站重新推出了，用户可以在里面交流有关如何最好地使用这些工具的想法。Marty Collins作为Windows Live高级营销经理，上星期在接受记者采访时向我们解释了该网站重新设计的原因，是为了更好地让用户集中的使用这些服务，以培养一个积极的用户社区。

网站现在的内容来自于社区的成员以及微软的工作人员，用户可以对贡献者进行评分（五分制）。为了防止信息被滥用，内容在被至少有三个社区成员推荐之前，它是不会上社区主页的，这种机制被Microsoft被称为”Clubhouse” ，但前提是你必须拥有Windows Live ID。社区中当然包含Windows Live品牌的其他应用，奇怪的是没有Calendar和OneCare。

特别精良的内容也将被编辑们推荐到Windowslive.com头版。微软声明，它也允许合法的负面消息出现在该网站上，如果该用户遵守所有Windowslive.com的服务条款，那么消息不会被审理。

The Clubhouse

截至目前，Live Spaces是Windowslive.com创建和共享的中心。为了让你的内容出现在Clubhouse，用户必须给他们的文章带上”Clubhouse”标签，而且至少使用一个LIVE应用。事实上，标签就像是将Clubhouse粘合起来的胶水，微软自己也使用它来确定文章的相关性。目前，Clubhouse仅在部分地区开放，但微软将在未来几个星期内全部开放。

Marty Collins说，微软将在下个阶段从其他平台上引进项目，如WordPress和Blogger。

从整体设计上讲，Clubhouse还不错。一个不错的特点就是用户的个人档案是从Live Spaces中调用的，这些个人档案中还包含了用户的文章和相关的评价。在Clubhouse里，用户可看到所有最新的带有”Clubhouse”标签的文章，以及评价最高的文章。

我们乐意看到微软在这方面进行尝试。在Windows Live中，微软发布的内容会和用户发布的内容放在一起，这潜在地缓和了微软的某些尴尬。同时，如果微软真的承诺不去审查合法的内容，那么这意味着微软在如何与用户互动上向前迈出了重要的一步。

文章转自Readwriteweb.com，由ZH CEXO翻译。

原文链接：http://www.readwriteweb.com/archives/microsoft_live_windowslivecom.php

我喜欢的Opera的六个设计

ZH CEXO — Mon, 21 Jul 2008 04:49:52 +0000

从1994年起，Opera作为一个研究项目，一直负责着为世界的变化而创新（比如分页浏览），但是好像它从未获得属于它的那分成就。

这并不是历史的教训，但是Opera的一些杀手性的特点让我现在几乎每天都在用它。我同样也使用Firefox和Flock，但是9.5版本的Opera成为了我的最爱。

这篇文章不仅仅是对Opera的一些特点的简单罗列，而是我由衷的向你介绍的Opera作为我日常的浏览器是如何让我的生活变得简单舒适的。比如说，我就没有把鼠标手势这项功能列在下面。为什么？因为尽管这项功能很有价值，但是使用它我还是不习惯。

1. 用户界面

从我喜欢上Opera的界面以来，它已经移除了那些可怜的banner广告条，而更加关注于做一个免费的浏览器以对抗Firefox。我想如果它们早点作为这个决定，可能事情会发生一些变化。

无论怎么说，我觉得Opera9.5引进的这种极好的新界面和新主题是很有吸引力的，并且有用而又不失独特。当然我唯一的抱怨就是它的标签栏里面的标签颜色有些偏暗，偶尔让我很难找到我要的标签。

当然了，你可以下载更多的主题，自定义工具栏和按钮，但是我从来没有为改变复杂的默认设置而烦恼，因为默认的布局下我用起来很好，这就是个不错的设计。

一个新的主题也许是装饰性的，在一定程度上也能提高工作效率，下面我给大家展示一下小变化带来的大不同。

这幅图的右边是Opera的工具菜单，而左边是Firefox3.1的。虽然我知道他们的功能是不同的，也许没有可比性，但是Opera在菜单最常用的地方加上了图标，让人的眼睛更加容易定位到你要找的项目。

Opera在标签栏的最后边加上了一个“回收站”，里面是最近关闭的标签页的列表，显然是简洁有用的设计。我发现自己就一直在用它，比在浏览器的历史里去找快多了。

2. 快速拨号

我该怎么来说快速拨号呢？

它和标签式浏览有着一定的相似之处，功能简单有用会让你感叹为什么以前别的浏览器就没想出来过，如果没有它，你可能反而会不习惯。

当然，女士们也喜欢这个。

也许Opera的使用者更多的是女性，我也曾和几个人讨论过这个问题。事实上，我真的很感兴趣问题的答案，因为我想知道你们对这种看法的认同性。

我认为女性使用互联网只是她们的一小部分工作……比如说收发电子邮件，MSN，MySpace，Facebook或者看几个别的网站。她们对浏览器关注得不多，感觉不到功能上的欠缺需要扩展来弥补，比如Firefox。

快速拨号就是这么简单，用鼠标指向，点击，添加：立即进入。把你的爱好加入这个易用的界面等待页面的载入，你就是赢家。

3. BT和下载管理器

Opera拥有一个简单的BT管理器和一个加强型的下载管理器，与IE7和Firefox3比起来，这个功能强大得多。

不是没有缺点，Opera的BT下载管理器下载BT的速度太慢，我承认它不是一个好的BT客户端。但是这要决定你是什么类型的用户了，我就很少使用BT进行下载。我感兴趣的是尽量减少程序安装而不是用最好的BT下载软件。我很开心可以使用Opera来下载它们，因为我从来不急。

4. 保存会话

不要担心Opera一下被关闭了，因为再次开启它的时候，你之前的会话都能被恢复。我知道，Firefox3在这个方面也做得不错，但这依然不能降低我对Opera的喜爱。

5. 邮件客户端

Opera的邮件客户端在我的印象中是被审理过的，我发现它确实很有用，特别是随着9.5版本的升级和对Gmail的整合。

我们都知道Gmail提供免费的POP3和SMTP功能，这让我们使用OperaMail更容易，把它作为一个离线的邮件客户端，让你使用SMTP的功能访问Gmail更加便捷而不用重新加载WEB页面。

你可以用它来组织很多不同的用户，但我发现它唯一的缺点就是撰写邮件的时候只能使用纯文本的格式，不能使用多媒体格式，这让我有些痛苦。

我建议把这个功能和Opera Link（链接）结合起来，另外一个特点是这个功能让你很容易同步你的个人帐户，无论是在电脑上还是在手机上。

6. 搜索，历史和索引

我必需承认我被Firefox迷们吓了一跳，因为它们也在Firefox3里面安装了一个“可怕的侧边栏”（译者注：是All-in-one sidebar吧-_-）。

当然，我还没有去适应它所提供的一些新功能，但是当我第一次看见这个新的设计和大一些的字体时，这让我搜索我的历史记录时更加容易。

相反的Opera的URL历史记录现在看起来好像被束缚了一样，但它依然是很有用的，如果边栏的空间再大点，那就和Firefox没什么区别了。

现在，所有你的访问历史都被以索引的方式记录下来了，而且你可以以任何关键字来搜索它们，或者你记得的某个主题词什么的。

之前你们问我为什么把Opera的一些不错的功能都忽略不说，那是因为以上六点都是我个人认为的我最喜欢的功能。

最后，还有人说，标签式浏览并不是Opera发明的，Netcaptor早在1997年就开发了它，但是是Opera让这项发明于2001年进入了人们的视线，可悲的是，是Mozilla Phoenix（早期的Firfox）让它真正引起了人们的注意。

By Laurence John Six Things I Love About The Opera Browser

译者注：

唉，这是我第一次翻译这么长的文章，我的英语水平并不是很好，原文中很多东西我不知道都是用的字典查找后再根据理解翻译的，这样的话可能与原文有一定的出入。我不是Opera的fans，但我也在用它，9.5版的Opera的确引进了不少人性化的改进。而且占用资源小，加载网页速度快也是浏览器中的矫矫者。对于使用Firefox3的我，文中提到的很多功能，如BT下载，邮件管理，快速拨号，强大的侧边栏什么的，都可以在Firefox下安装扩展来实现，所以Opera对我的吸引力不是很大。就说这么多了，不足之处请指正，可以留言或者悄悄和我说。

By ZH CEXO from Linxo.cn

ZH CEXO's BLOG » 翻译

你不会成为设计师的10个原因

1、你没有艺术美感

2、你并没有设计的激情

3、你很容易分心，并且当你遇到交作品的截止日期时心神不宁

4、你不怎么会沟通

5、你不能很好地回应批评

6、你不会出谋划策

7、你总是杂乱无章的

8、你很懒惰

9、你讨厌不能活动的工作

10、你不喜欢学习

一些赠别

我的废话

相关阅读

利用CSS和jQuery创建一个屏幕键盘

第一步：基本的HTML和所需的文件

第二步：美化这些列表元素

第三步：让按键拥有生命

初始设置

Shift键和CapsLock键

删除键

特殊字符

大写字母

最后

最终的Javascript代码

总结

相关阅读

youlove.us上的背景滚动效果是怎样实现的（翻译）

相关阅读

使用jQuery创建滑动图片/显示内容的效果（翻译）

HTML Ipsum Presents

HTML Ipsum Presents

HTML Ipsum Presents

HTML Ipsum Presents

相关阅读

使用jQuery制作精致的复选框（翻译）

相关阅读

微软重新推出Windowslive.com作为一个社交网络

The Clubhouse

相关阅读

我喜欢的Opera的六个设计

相关阅读