【译】用html5和css3 开发博客实例(2)

接上一篇《用html5和css3 开发博客实例(1)》,这部分内容,主要是以CSS为主,做一个博客界面。

6、用 CSS3添加样式

CSS3建立在早期版本的CSS基础上。并增加了许多新功能,包括新的选择器、伪类和属性。用这些新 功能,使其更易于进行布局。让我们继续深入。

基本设置

首先,定义一些有关网 页排版和背景颜色等方面的基本样式。同CSS2.1代码差不多

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

现在我们来写一个简单的代码用以设置 margin 和 padding 的样式。具体操作环境中我会用更完整的CSS重置这段代码,就像Eric Meyer的那样(CSS 2.1)。但仅在本教程所涉及的范围内。
当我们告诉浏览器呈现所有HTML5块元素时,浏览器虽然会加载那些不认可的元素(这就是为什么HTML 5向下兼容的原因),但默认情况下并不知道如何渲染。
请注意我是如何选择字体大小的,用像素而不是用ems或%。这是为了保持该教程的先进性。当主流浏览器完全支持HTML5和CSS3时,我们将获得页面缩放功能,而不仅仅是字体大小。由于浏览器能用任意方式改变网页大小,就消除 了需要相对单位来界定大小的因素。
应用基本样式后看看页面的变化。现在我们可以进入到页面样式设置的其余部分了。对于页头来说无 需额外的样式,因此我们将直接进入导航样式的设置中。

设置导航样式

重点是注意body的宽度被定义为940px,且已经居中。导航栏要与窗口等宽,所以要应用一些其他样式:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

将导航元素设为绝对定位,对齐到窗口左侧,并令其与窗口等宽。将嵌套的列表设为居中以显示布局的边界:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

现在,我们将定义一些其他样式,使导航项的外观看起来漂亮些并基于布局使其对齐到网格。包括一些重点页面的样式和一个自定义样式的订阅链接。

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

设置导言样式

导言标记非常简单:就是带有标题和简介的 一小节文字。但是,我们将使用一些CSS3的新技巧,使其看起来更具吸引力。

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

我们使用了两个新的属性。首先是background-size属性,它允许你缩放背景图像。就我们而言, 将x、y两轴都缩放到100%。如果添加了更多的内容可以让边框伸缩,渐变背景也将同时伸缩。

其次是border-radius属性,适 用于带圆角的元素。我们每个圆角的 半径都设为22px。你也可以给每个圆角指定不同的值或选择仅将某个的角设为圆角。

不幸的是,在主流浏览器中这个性能未得以得到充分发 挥。但是,我们可以通过使 用提供商的特定属性获得一些支持。Safari、Opera及 Konqueror的新版本都支持Background-size。Safari和Firefox的新版本支持Border-radius。

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

既然我们有一个background-color定义,个别浏览器不支持background-size也没有多大 关系,如Firefox。现在我们只需要设置头部和文本的风格即可。

#intro h2, #intro p {
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

图片可以很轻易地被指定为#intr的第二个背景图片,CSS3支持这样。

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

我们赋予这两个背景图片明确的尺寸以确保他们不重叠,请记住设置背景大小的简略标记法。

不幸的是当前没有浏览器能可靠支持,因此我们必须采用古老的做法:通过内嵌图片,用CSS定位。见最后一个例子,看看如何做。

9、内容域和边栏的风格化

内容域和边栏要相互对齐。传统的方式是利用浮动,但在CSS 3中我们将用表格!

“啥?用表格?”你可能会有疑问并感到困惑。你可能学过,在网页布局中使用表格绝对是一大禁忌,现在也依然是。你不应使table元素来布局。但在CSS 3中,我们可以让某些元素行为更像表!首先,我们需要一些div来群组章节部分,用更合理一点的方式。

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

一切仍然符合语义化标准,现在我们要给他样式。我们希望#content div表现出表格的特性,用#mainContent,就使其如表的单元格一般。

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

好了!没有浮动、伪纵列背景图片、清除或设置间距。我们做出的内容就像一个表,这让我们更易于排版。

10、博客帖子的风格

这个博客帖子页眉部分的风格很一般,因此我们将跳到最有趣的部分:多行布局。

多行布局

以前文本的多行布局离不开手动拆分段落。但在CSS3里它就像一块蛋糕,虽然对于当前正使用的浏览器来说,我们 必须增加一个div来解决这种情况。

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

现在我们可以添加两个简单的属性然后收工。

.blogPost div {
	column-count: 2;
	column-gap: 22px;
}

我们希望第二列有22像素的间距。这需要额外的div,因为目前还没有一个元素支持超过一列的跨度。但在未来你可以指定column-span,那时我们只需这么写:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

当然,仅有Safari和Firefox浏览器支持 column-count和column-gap属性。我们目前必须使用提供商特定的属性。

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

如果你仔细观察博客帖子里的图片,你会发现一个投影。我们可以使用CSS3和box-shadow属性来生成。

阴影

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}

第一个“3px”告诉浏览器阴影的水平位置。第一个“3px”告诉浏览器垂直位置。最后的“7px”确定模糊值的大小。如果设为0就是实色。最后我们定义阴影的基本色调,虽然放在最后说,但并非不重要。颜色的浓淡取决于你设置的模糊值。

这个属性也许并不令人吃惊,因为它还未被所有的浏览器支持。事实上,该属性只能在Safari浏览器中工作,你必须使用提供商特定的属性。

.blogPost img {
	margin: 22px 0;
	-webkit-box-shadow: 3px 3px 7px #777;
}

11、为评论设置斑马纹

所谓的斑马纹即网站中常用的隔行换色,一般的做法是用程序遍历所有奇数元素并以突出的颜色显示。CSS3介绍了伪类“nth-child”,这使隔行换色简单到无以复加的地步,从此不必再用编程做这件事了。我们将用这个属性来为评论设置隔行换色。

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

“2n+1”这个值看起来很古怪,但如果明白其意义就很简单了:

  • 2n表示选择第2n项,其中n为变量,即n=0时不选择,n=1时选择第2项,n=2时选择第4项,n=3时选择第6项等依次类推。如果为3n表示选择第 3n项。为4n时表示选择第4n项。对隔行换色来说,2n表示每隔一行显示一个高亮项,3n表示每隔两行显示一个高亮项,4n表示每隔三行显示一个高亮项等等。
  • +1告诉浏览器从元素1开始。如果你熟悉编程,你就知道所有数组都是从0开始的,在这里也是一样。这意味着元素1实际上是同系列的第二个元素。如 2n+1,当n=0时指的是第一个元素,当n=1时指的是第三个元素,当n=2时指的是第五个元素等等。

此处,也可以简写为:

section#comments article:nth-child(odd) { ... }

这是因为该简写标准包括两个最常用的值,奇和偶。评论部分风格的其他设置,用你的新知识就可以简单理解了。

设置评论表单、页脚和侧边栏的风格

联系前面学到的CSS 3技术重新设置评论表单、页脚和侧边栏的风格。在评论表单和页脚部分我们使用在前面中用过的表格布局技术。侧边栏的border-radius则在四角都添加的圆角。

12、最终设计结果

看一下该应用最终设计的样式

我们设计的这个页面可以在Safari 4和基于WebKit的浏览器中正确呈现,因为它目前唯一支持我们所采用的CSS 3技术的渲染引擎。Firefox 3在给图片应用圆角时有一些问题,并且也不支持设置背景大小,但在布局方面则没什么问题。我们忽略Internet Explorer,因为它需要插件才能应用HTML 5。你也可以定义一些规则以获得各主要浏览器的支持,但这些不在本教程的讨论范围内。

结论

当所有浏览器都支持HTML 5和CSS 3的一天到来时建设一个网站将更容易。我们最终将停用层浮动,我们在编写背景图片或隔行换色的javascript扩展上花费更少的时间。希望我们能利用这些额外的时间来研究网页设计中长期被忽视的领域,前台优化及恰当的通信架构。

原文出处:http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

用html5和css3 开发博客实例(1)

html5 和css3是目前web前端炒得很热的2个概念,做为web前端开发者,虽然在目前的大环境下,还无法在实际项目中全面的去运用。但我们还是有必要去学习和研究。而本教程,我们则用html5和css3去构建一个博客页面,本教程旨在演示当浏览器支持新规则时如何建设网站。本教程一共分为2部分,第一部分主要介绍html5相关方面的内容,第二部分链接为:用html5和css3 开发博客实例(2)

1、Html 5

HTML5 是HTML的下一个主要版本。它引入了一些新元素,将使我们的网页合乎语义化标准。使众多搜索引擎和屏幕阅读器能轻易浏览网页,并改善大家的网络体验。此 外,HTML5还包括用于屏幕绘图的fancy API、离线存储数据、拖放等功能。好了,让我们开始设计博客页面吧!

2、基本结构

开始制作网页前,我们应该规划一个总体结构线框图:

HTML5中有特定的标记表现页眉、导航、侧边栏和页脚。先看代码,随后我再解释:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

看起来和原来的HTML标记差不多,但也有一些事要特别注意:

  • 在HTML5中,只有一个doctype声明。就在代码最顶端有<!doctype html>声明的标记。泳衣告知浏览器,它处理的是HTML文档。
  • 新标签header主要放在介绍性元素两侧,如网页标题或标识。也可以包含内容或搜索表单。每个header标记里通常包括<h1> 到<h6>等标题标记。header标记一般用于引入全页,但此处用它做简介部分。
  • nav 标记用作导航,如网站的主导航或上一页/下一页那种专门导航。
  • section 标记用于定义章节。可以包含各种标记,多个段落可以互相嵌套。
  • aside 用于侧边栏。
  • footer 标记主要包括作者、版权信息、相关链接等内容用于页脚。

这样就避免不论是页面何处都用div控制的问题。而且,这些标记更符合语义化标准。使众多搜索引擎及屏幕阅读器更容易搞清楚某个页面的内容。

3、编写导航

同HTML4或XHTML中所用的导航代码一样,这里也用无序列表。

<nav>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
		<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
	</ul>
</nav>

4、编写导言

用section标记在文章中定义章节。当 前,我们只要一点点内容。

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur 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.</p>
</section>

给section标签一个id以便样式被修改时能找到它。用header标记包含h2元素。除了描述整个文章,header标记还应当用来描述个别段落。

5、编写主要内容区

我们的主要内容区分为三个部分:博客帖子、评论及评论表单。用HTML5中新结构标记的知识,应该很容易制作。

编写博客文章

介绍过标签后,就可以编写博客文章区域块的代码了。

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh,
sodales ultricies elementum vel, fermentum id tellus. Proin metus odio,
ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

此段代码中,用article标记制作整个博客帖子。article标记在博客网站,讨论网站,百科全书网 站中表示独立条目的,用在这里是个不错的主意。由于我们要查看目前唯一文章的唯一帖子的详细资料,因此在博客的头版用article标记制作整个博客文章。

对博客帖子而言header标记作用于header和元数据。告诉用户帖子作者、谁写的及帖子有多少评论等。注意添加时间戳标记。该标记也是HTML5新加的,用于对特定时间进行标记。日期时间属性应遵照此格式:

  1. year后跟着一个破折号
  2. month后跟着一个破折号
  3. 日期
  4. 字母T指本地时间
  5. 本地时间格式为hh:mm:ss
  6. GMT表示时区。假如我在丹麦,这里比格林尼治时间快1个小时,那就应写成 +01。假如你在科罗拉多州,你会比格林尼治时间慢7个小时,因此要写为-07。

评论代码

评论代码极为简单。没用到新标记或属性。

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur 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.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur 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.</p>
	</article>
</section>

制作评论表单

在HTML5中增强表单功能。你不用再编必填字段,电子邮件等客户端验证程序。浏览器会替你关注这方面。

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

新增表单有两个新输入类型,emailurl。Email要求用户必须输入合法的E-mail地址,url要求用户必须输入合法网址。如果你设置了required属性,用户就不能提交空字段。“Required”是个布尔属性,HTML5的新属性。

编写侧栏和页脚

编写侧栏和页脚的代码简单极了。无非是在aside- 和 footer- 标记里加几个章节及一些内容。

最后,你可以在这里查看没有添加样式表的源码。现在给它添加样式表。

IE Bug 总结和修复

同时,由于整理仓促,有些理解和表达不当和其他纰漏在所难免,还请大家帮忙更正。谢谢。

问题 浏览器 DEMO 解决方法
Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 为input添加width
2 body{overflow:hidden;}没有去掉滚动条 IE6/7 bug | fixed 设置html{overflow:hidden;}
3 hasLayout的标签拥有高度 IE6/7 bug | fixed *height:0;
_overflow:hidden;
4 form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}
5 当border-width有1条<边3条时被设置成dotted时,1px的边dotted显示成dashed IE7 bug | fixed 不在同一个元素上使用不同宽度的 dotted
6 当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; IE6/7 bug | fixed 给父元素设置position:relative;
7 :hover伪类不能改变有position:absolute的子级元素的left/top值 IE7 bug | fixed 把top/left的值设置成除0%外的所有百分值;或添加一个margin-[所有方向]除0外的所有值,包括0%
8 :focus + selector {} 选择器失效 IE8 bug | fixed 在失效选择器后面添加一个空选择器, :focus{}
9 列表中混乱的浮动:在list中浮动图片时,图片出现溢出正常位置;或没有list-style IE8 bug | fixed 用背景图片替换list-style
10 th 不会自动继承上级元素的 text-align IE8 bug | fixed 给th添加text-align:inherit;
11 样式(包括link/style/@import(link)) 最多允许个为是:32 IE6-8 ─ 常识 99.99%的情况下,不会遇到
12 :hover 时若background-color为#fff, 失效 IE7 bug | fixed 把background-color改成background。或者,非#fff || #ffffff
13 忽略’>’后有注释的选择器:selector> /**/ selector{} IE7 bug | fixed 官方DEMO有误
14 * html IE6 ─ HACK 只对IE6有效
15 PNG图片中的颜色和背景颜色的值相同,但显示不同 IE6-7 bug | fixed 利用 pngcrush 去除图片中的 Gamma profiles
16 margin:0 auto; 不能让block元素水平居中 IE6-8 bug | fixed 给block元素添加一个width
17 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 IE8 bug | fixed !important is evil, don’t use it anymore
18 :first-letter 失效 IE6 bug | fixed 把 :first-letter 移到离{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{}
19 Position:absolute元素中,a display:block, 在非:hover时只有文本可点击 IE6/7 bug | fixed 给a添加background, 如果背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#)[官方的解决方法],因为会增加一下HTTP请求
20 float列表元素不水平对齐:li不设置float,a设置display:block;float:[方向],li不水平对齐 IE6/7 bug | fixed 给li设置display:inline 或 float:[方向]
21 dt, dd, li 背景失效 IE6 bug | fixed dt, dd, li{position:relative;}
22 <noscript />元素的样式在启用javascript的情况下显示了样式 IE6-8 bug | fixed 利用js给<noscript />添加display:none;
23 使用filter处理的透明背景图片的透明部分不可点 IE6-8 bug | fixed 把background:none变成background:url(‘链接’),链接到本身和图片之外的任何文件
24 li内元素偏离 baseline 向下拉 IE8 bug | fixed 给li设置display:inline 或 float:[方向]
25 列表中li的list-style不显示 IE6/7 bug | fixed 给li添加margin-left,留空间来显示(不要加在ul上)
26 图片不能垂直居中 IE6/7 bug/fixed 添加一个空标签,并赋给”Layout”, 比如display:inline-block;
27 不能自定义指针样式 IE6-8 bug | fixed 给指针文件设置绝对路径
28 背景溢出,拖动滚动条后显示正常 IE6 bug | fixed 给父元素添加overflow:hidden防止溢出,并赋予hasLayout,如果添加_zoom:1;
29 高度超过height定义的高 IE6 bug/fixed 添加_overflow:hidden;(推荐)或者_font-size:0;
30 宽度超过width定义的宽 IE6 bug/fixed 添加_overflow:hidden;
31 双倍边距 IE6 ─ 常识 添加display:inline到float元素中
32 margin负值隐藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超出父元素部分不可见 IE6/7 bug/fixed 去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
33 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 IE6 bug/fixed 给有斜体文字的元素添加overflow:hidden;
35 3px 间隔:在float元素后的元素,会有3px间隔 IE6 bug/fixed 因为是确切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px;
35 text-align 影响块级元素 IE6/7 bug/fixed 整理你的float;或者分开设置text-align

参考文章:http://haslayout.net/

http://ued.alipay.com/wd/2010/07/28/ie-beat-the-holy-canon-css-bug-table/

50个非常有用的javascript和jquery特效插件

这篇文章没做翻译,反正也凑合能看懂吧。大概看看图,需要的话点击进去看具体插件介绍。

个人感觉这50个插件,有部分还是很不错的。留下做个标记以后好找。呵呵~~

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

JS-03 in 50 Useful JavaScript and jQuery Techniques and Plugins

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

JS-39 in 50 Useful JavaScript and jQuery Techniques and Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

JS-00 in 50 Useful JavaScript and jQuery Techniques and Plugins

Nivo Slider
The Most Awesome jQuery Image Slider

JS-02 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

JS-04 in 50 Useful JavaScript and jQuery Techniques and Plugins

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

JS-05 in 50 Useful JavaScript and jQuery Techniques and Plugins

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

JS-06 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

JS-07 in 50 Useful JavaScript and jQuery Techniques and Plugins

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

JS-08 in 50 Useful JavaScript and jQuery Techniques and Plugins

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

JS-09 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

JS-10 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery MegaMenu Plugin

JS-11 in 50 Useful JavaScript and jQuery Techniques and Plugins

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

JS-13 in 50 Useful JavaScript and jQuery Techniques and Plugins

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

JS-14 in 50 Useful JavaScript and jQuery Techniques and Plugins

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

JS-15 in 50 Useful JavaScript and jQuery Techniques and Plugins

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

JS-16 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

JS-17 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

JS-18 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

JS-19 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

JS-20 in 50 Useful JavaScript and jQuery Techniques and Plugins

Extending jQuery’s selector capabilities

JS-21 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

JS-22 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

JS-24 in 50 Useful JavaScript and jQuery Techniques and Plugins

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

JS-26 in 50 Useful JavaScript and jQuery Techniques and Plugins

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

JS-27 in 50 Useful JavaScript and jQuery Techniques and Plugins

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JS-28 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Shell
A command-line interface for JavaScript and DOM.

JS-29 in 50 Useful JavaScript and jQuery Techniques and Plugins

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JS-30 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
– The Old-School Way
– Singleton
– Module Pattern
– Revealing Module Pattern
– Custom Objects
– Lazy Function Definition

JS-31 in 50 Useful JavaScript and jQuery Techniques and Plugins

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

JS-32 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

JS-33 in 50 Useful JavaScript and jQuery Techniques and Plugins

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

JS-34 in 50 Useful JavaScript and jQuery Techniques and Plugins

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

JS-35 in 50 Useful JavaScript and jQuery Techniques and Plugins

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

JS-36 in 50 Useful JavaScript and jQuery Techniques and Plugins

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

JS-37 in 50 Useful JavaScript and jQuery Techniques and Plugins

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

JS-38 in 50 Useful JavaScript and jQuery Techniques and Plugins

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

JS-40 in 50 Useful JavaScript and jQuery Techniques and Plugins

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

JS-41 in 50 Useful JavaScript and jQuery Techniques and Plugins

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

JS-43 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

JS-47 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Collapsing and Expanding Table Rows

JS-48 in 50 Useful JavaScript and jQuery Techniques and Plugins

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

JS-49 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Grid Plugin

JS-50 in 50 Useful JavaScript and jQuery Techniques and Plugins

Pines Notify jQuery Plugin
Pines Notify’s features include:
– Timed hiding with visual effects.
– Sticky (no automatic hiding) notices.
– Optional hide button.
– Supports dynamically updating text, title, icon, type…
– Stacks allow notice sets to stack independently.
– Control stack direction and push to top or bottom.

JS-51 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

JS-52 in 50 Useful JavaScript and jQuery Techniques and Plugins

原文转自:http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

用jquery插件创建视觉震撼的网站

HoverFade

Demo Download

jQuery-Notes 1.0.2

Demo Download

gMap – Google Maps Plugin For jQuery

Demo Download

jQuery Menu Style

Demo Download

Contextual Slideout Tips With jQuery & CSS3

Demo Download

Growl

Demo Download

Animate Panning Slideshow with jQuery

Demo Download

jQuery Masonry

Demo Download

jQuery Quicksand

Demo Download

Jquery Plugin MopSlider 2.4

Demo Download

jQuery color plugin xcolor

Demo Download

jQuery Image Scroller

Demo Download

Auto-Playing Featured Content Slider

Demo Download

Horinaja

Demo Download

Slide Deck

Demo Download

Automatic Image Slider w/ CSS & jQuery

Demo Download

Create a Slick and Accessible Slideshow Using jQuery

Demo Download

Fancy Thumbnail Hover Effect w/ jQuery

Demo Download

Coda Slider Effect

Demo Download

Micro Image Gallery: A jQuery Plugin

Demo Download

Image Highlighting and Preview with jQuery

Demo Download

Textarea Words, Characters counter and maxlength plugin

Demo Download

GOOGLE CHARTS

Demo Download

IdmgAreaSelect

Demo Download

jQuery Bookmark

Demo Download

Poshy Tip

Demo Download

jqPlot Charts and Graphs for jQuery

Demo Download

jQuery MegaMenu Plugin

Demo Download

FullCalendar – Full-sized Calendar jQuery Plugin

Demo Download

jQuery Canvas Loader

Demo Download

Meerkat

Demo Download

jQuery PhotoShoot Plugin 1.0

Demo Download

jqFancyTransitions

Demo Download

jQuery Slider plugin (Safari style)

Demo Download

jTextTranslate: A jQuery Translation Plugin

Demo Download

xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin

Demo Download

Get TopUp!

Demo Download

FireQuery – Firebug extension for jQuery development

Demo Download

ImagineMenu

Demo Download

Jquery AjaxSuggest

Demo Download

Ajax File Uploader

Demo Download

3d Tag Sphere

Demo Download

(MB)Extruder

Demo Download

jQuery Simple Multi-Select

Demo Download

Fancy Box

Demo Download

转自:http://www.smashingapps.com/2010/09/28/awesome-jquery-plugins-and-techniques-to-create-visually-excellent-websites.html

Web前端50个创意实用网站(二)

接上一篇:Web前端50个创意实用网站(一)
两篇文章都是不错的介绍,强烈推荐。

Kaleido

为你的代码创建视觉化标识。来自麻省理工。

Sketchpad

一个强大的在线图像编辑器。难能可贵的是,这是基于 HTML5 的。

Unicode code converter

虽然界面有些乱,但这个工具能把一段文字转换成各种编码形式。

Grid System Generator

另一个网格设计生成器。

ud.com namecheck (强烈推荐)

这个看似简单的工具,可以帮你查询某个名字是否还可以注册域名,商标,已经社会媒体网络入口。

Typograph — Scale & Rhythm

这个工具可以帮你即时预览各种不同的 Web 排版效果,并生成代码。

ColorBrewer Intro – Selecting Good Color Schemes for Maps

适用于地图的配色工具。

CSS Inliner Tool (推荐)

将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销,会发现这种工具非常实用,因为邮件客户端常常会将你独立的 CSS 代码过滤掉,而 Inline CSS 不会被过滤。

HTML Purifier – Filter your HTML the standards-compliant way!

这个使用 PHP 设计的工具,可以对你的 HTML 代码进行过滤,去除其中的恶意代码,并按 W3C 标准对代码进行净化。

Rendera

在线编写 HTML5 和 CSS 代码,现场看到效果。

RegExr

又一个在线学习,体验,测试正则表单式的地方。

try ruby! (in your browser)

Ruby 在线体验。

Google Command Line

使用命令符访问 Google 的一些产品和服务。

Tiny Fluid Grid

又一个网格设计工具,很小巧。

Fonolo.com

这个很别致的站点,可以帮你快速接通那些大公司的免费技术电话,不过目前只能用于美国和加拿大。

Producteev: Creating To-Do Lists with Emails (推荐)

把重要的工作安排发到 task@producteev.com,他们会帮你生成一个任务列表,以便安排你的日程。

AddUse – User research made easy

一个在线用户测试或调查管理工具。

bookwhen (推荐)

帮助你的用户在线预订你的展会,课程等服务,免费版支持150个项目以及每月300个预订。

本文国际来源:Smashing Magazine 50 Powerful Time-Savers For Web Designers (原文作者:Vitaly Friedman

转载自:http://blog.csdn.net/comsharp/archive/2010/07/01/5707455.aspx

Web前端50个创意实用网站(一)

本篇分两部分,另一篇点击这里:Web前端50个创意实用网站(二),主要是web前端技术辅助网站,有些网站的创意和设计都很不错。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在。

LaunchList

站点发布前的工作清单,预设了28个需要检查的事项,也可以自定义。同类工具: Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist

Pencil Project: Sketching and Prototyping with Firefox

一个开源 GUI 原型设计工具。

Zootool

一个非常漂亮的书签工具,可以将你收集的各种素材,图片,文档,链接,视频等在线组织到一起。

Bounce (推荐)

输入一个站点地址,该程序会给该站点截图,然后,你可以在上面批注,加评论,并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。

Ninite Batch Installer

这个站点可以将很多免费的流行软件(最好的版本)打包在一起,一次性安装到你的机器,支持 Windows7,Vista 和 XP。

Support Details (强烈推荐)

假如你想让你的用户提供他/她所使用的浏览器环境,比如 Flash 版本,操作系统,屏幕分辨率,Cookie,JavaScript 状态等,可以让他/她访问一下这个站点,这个站点或自动将这些内容探测出来,并允许用户现场通过邮件将报告发送给你。

MugTug’s Darkroom

一个在线图片处理程序,可以调整对比度,白平衡,曝光,饱和度等,可以从 Picasa 及 Flickr 上传图片,同类产品:PixlrSumo Paint

Visual Website Optimizer (强烈推荐)

Visual Website Optimizer 绝对是你所能见到的最好的 A/B 测试工具。

Keyonary

这个简单的在线工具可以帮你列出 Mac OS X, Photoshop 等工具的快捷键清单。

gridr buildrrr

一个在线网格设计工具,选择你希望使用的网格布局,帮你预览并生成 CSS 代码。

Instant Blueprint – Create a web project framework in seconds.

帮你瞬间生成一个 Web 项目框架,基于合法 HTML/XHTML 和 CSS。

Hummingbird

一个实时的(真正的实时,每秒刷新20次)站点流量分析工具,基于 Node.js.

jsFiddle

在线 Web 编辑器,支持 JavaScript, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。

String: create a multi-language website or app

帮你创建多语种 Web 应用的资源文件,

Titanpad

可以多人同时编辑同一个文档,别的改动会实时以不同颜色标识,可以是同一个办公室的多个用户,也可以是地球另一边的多个用户。

Pixelnovel Timeline: Version Control for Adobe Photoshop

该工具通过插件方式集成 Subversion 客户端,可以在 Photoshop 中实现版本控制。非免费工具。

0to255

给出一种颜色,会帮你列出这种颜色由浅入深的各种颜色变化,并特别针对 Web 做了优化。

Load Impact: Website load/stress test

一个在线压力测试工具,模拟多用户同时访问你的站点,并出具报告以分析你的站点可以支撑的访问者数量。

Ideone: Online IDE & Debugging Tool

一个在线 IDE 和调试工具,支持多达40种语言,包括 C++, Java, JavaScript, Perl, PHP, Python and Ruby,同类产品:PHP Anywhere 以及 CodeRun

Online Dummy Image Generator

快速帮你生成一个在线虚拟图片,以便您进行某些测试。

HiFi RegExp Tool

在线正则表达式工具。

Tableizer (推荐)

将你 Excel 表格中的内容复制粘贴到这个站点,它会帮你生成 HTML 格式的表格(HTML Table)。

FollowUpThen: Easy Email Reminder

-假如你希望有人提醒你什么时候该做什么事,你可以给比如 1day@followupthen.com 一类的地址发个邮件,1day 表示一天后,这样,一天后,你会收到他们的提醒邮件,1day 可以改成人和别的时间间隔。

Divine: Conversion tool from PSD to HTML

这个工具是一个 Photoshop 插件,可以将你的 PSD 转换成 WordPress 主题。(译者:有待验证)

转:10 个强大的开源 Web 流量分析工具

Web 流量分析工具多不胜数,从 WebTrends 这样专业而昂贵的,到 Google Analytics 这样强大而免费的,从需要在服务器端单独部署的,到可以从前端集成的,不一而足。本文收集并介绍了10个功能强大的开源 Web 流量分析工具,因为是开源的,因此可以免费部署到你的网站。

TraceWatch

TraceWatch 是一个开源 Web 流量分析程序,支持实时分析,可以提供深度分析报告。

SlimStat

基于 PHP-MySQL,同时,可以像 Google Analytics 那样,通过 JavaScript 或 PHP 脚本集成到网站。

Piwik


可以生成站点的详细的实时访问报告,基于 PHP 和 MySQL,也可以像 Google Analytics 那样在前端集成。

Open Web Analytics

基于 PHP,内置对 WordPress,Gallery 以及 MediaWiki 的支持。

W3Perl

W3Perl 是一个 Web Log 分析工具。

CrawlTrack

CrawTrack 是一个很好的 Google Analytics 的开源替用品,提供非常独特的报告,比如,CrawTrack 可以帮你预防诸如 SQL 注射一类的攻击。

BBClone

BBClone 是一个 Web 计数器,可以提供很详细的访问报告。基于 PHP。

PhpMyVisites


基于 GNU/GPL 开源协议,可以提供很详细的,有关访问者信息的报告,它的 GUI 界面很有趣而且实用,安装也很简单。

AWStats

可以提供非常强大的,关于网站,FTP 站点,乃至 Email 服务器的访问分析报告,基于 CGI。

Grape

Grape 的界面比较简单,功能虽然不多,但很实用。

本文国际来源:reencoded.com 10 amazing open source web analytics (原文作者:denbagus

转载自:http://blog.csdn.net/comsharp/archive/2010/06/17/5675810.aspx