各浏览器的默认CSS可以在这里http://www.iecss.com/找 到，贪心一下，把这些样式都保存了一份：

1. IE6(下载)
2. IE7(下载)
3. IE8(下载)
4. IE9(下载)
5. Firefox 3.6.3(下载)
6. Webkit (r57042) (下载)
7. Opera 10.51(下载)

当然我们还可以找到更老的一些浏览器默认样式：

• Firebird 0.7
• Firefox 0.8
• Firefox 0.9
• Firefox 2.0.0.6
• Firefox 2.0.0.12
• Firefox 3.0b3
• Firefox 3.0.1
• Firefox 3.0.8
• Flock 0.9.0.2
• Flock 1.2.4
• Flock 1.2.7
• Konqueror 3.2.0
• Mozilla 1.0.1
• Mozilla 1.5
• Navigator 6.1
• Navigator 7.1
• Navigator 8.1
• Navigator 9.0b3
• Safari 3.0.4
• Safari x
• Safari 3.1.2
• SeaMonkey 1.1.2

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 打败 IE 的葵花宝典：CSS Bug Table
• 小议使用“完整”的CSS的缺点
• PNG透明兼容IE6的几种方法
• IE不支持的10个非常有用的CSS属性
• IE8面向Web开发人员的功能改进
• CSS在IE6中的bug修正技巧
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack

Feed enhanced by Better Feed from Ozh

今天，趁着想完美公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值 得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

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

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 浏览器中样式的高度自适应
• 小议使用“完整”的CSS的缺点
• 如何高效在多个浏览器之间同步使用的5个工具技巧
• 各浏览器的默认CSS
• PNG透明兼容IE6的几种方法
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• IE不支持的10个非常有用的CSS属性

Feed enhanced by Better Feed from Ozh

在这里我们将要创建一个独特的滑动导航菜单。这个想法是让装有菜单项的盒子（box）滑出，并且弹出一个缩略图 片。同时还要在有需要二级菜单的链接项调用一个子菜单盒子。这个子菜单要依靠在上级菜单的左边或右边的位置悬停。

这里我们要用到jQuery Easing Plugin和tibchris的一些美丽的图片。

1. HTML结构

先来写HTML结构，这里我们用一个无序的列表来放导航菜单的一级菜单，用DIV来放子菜单。

<ul id="sdt_menu" class="sdt_menu">
<li>
		<a href="#">
			<img src="images/1.jpg" alt="" />

			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a></div>
</li>

...</ul>

如果没有子菜单，DIV可以被忽视。图片在开始的时候不会被显示，我们要在CSS中为它的宽和高都设为０。

让我们开看看CSS样式

2. CSS

让我们首先为无序列表设置样式。

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

接下来，我们要去掉菜单链接中的text-decoration和outline。

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

我们要将列表项左浮动，并且要将position设置为relative，因为我们要为它内部的元素进行绝对定位。如要我们不那样设置，绝对定位刚是相对于整个网页的。

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

这里来设计主链接的样式，我们有两个span，标题和描述。如下面这样来为它们写样式。

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

注意z-index: 我们要为重要的元素定义堆叠顺序，来让它们能够停留在上面。
我们要用一个背景图片来创造一种半透明的渐变。当你用一些背景图片（像DEMO中的木纹背景）来创造一种美丽的效果，请务必用一些不同的纹理会让它看起来 棒级了。
你也可以加上阴影－改变一下值像2px 2px 6px #000 inset，同样会给你非常好看的效果。
接下来是图片的样式:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

我们要加上图片由下升起的动画，这就是为什么定位它必然要用“bottom”作为参考点。我们同样加上了很棒的阴影效果。这里前两个值是0，使图片 的周围的阴影显得均匀。这甚至可以把阴影被用作一种特效，无论什么时候，你都可以创造一种边框效果。它的优点在于这些阴影不是真的存在－你不用考虑在元素 中如何来计算它的宽和高。当然现在的缺点是CSS3并不被ＩＥ支持。
下面是包涵标题和描述的span的样式

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

如果你有大量的文字，你则需要改变这些值。也要确保那些改变的值能匹配在JavaScript中设置动画的值。
下一步，我们要定义一个灰色的滑动盒子的样式。我们给它的高设为0并且定位它，在动画中我们只要增加它的高度就可以了。

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

接下来我们要为这些设置一些共有的样式。

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

下面是标题和描述的样式。

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

子菜单盒子起初是一个隐藏在下面的灰色的盒子。我们要让它在我们在的地方动态的向右或向左滑动。像我们这个例子，当鼠标悬停在最后一个位置，我们要它动态的向左滑动，在其它的位置上我们要它向右滑动。

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

第一个子菜单链接需要设置一个margin-top

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

这是所有样式！让我们加上魔法！

3.JavaScript

当我们的鼠标悬停在这些列表元素上，我们要放大图片，并且显示全部，sdt_active和the sdt_wrap。如果这个元素含有子菜单(sdt_box)，将滑动到一旁。如果这个元素在菜单中是最后一个，其子菜单将滑动到左边，其余的滑向右边。

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

就是这样！我们希望你能喜欢这个小菜单，它能对你有帮助。
P.S. 这个在Google Chrome下看起来非常完美。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• CSS3+JQuery实现固定头部的导航菜单
• 解密CSS Sprites：技巧、工具和教程
• 简单的JQuery聚光灯效果教程
• 推荐9个jquery手风琴菜单插件
• 制作jquery文字提示插件
• 八种布局方案改善你的设计
• jQuery + CSS3 实现图片圆角
• 40+ Web前端开发必备的备忘单[上]
• 35个 jQuery的动画教程

Feed enhanced by Better Feed from Ozh

CSS3 的 Media Queries

在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据：

• 浏览器窗口的宽和高
• 设备的宽和高
• 设备的手持方向，横向还是竖向
• 分辨率

如果用户有一个支持 Media Queries 的设备，我们就可以为该设备编写专门的 CSS，让网站适应这个设备的小屏幕，英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站，手机也可以轻松访问，以下是该网站的桌面版和手机版截图：

这个网站在不同尺寸的设备上按不同的布局显示，并且，手机版在 iPhone，Opera Mini， Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

为了让这个布局更好地在手机上显示，我们为手机版设计一个一栏式布局，且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

@media only screen and (max-device-width: 480px) {

}

接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}

最终，我们在小屏幕设备上得到了如下显示效果：

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试 Media Queries

要在不同设备上测试 Media Queries 并非易事，你要有各种设备，还要将代码上传到某个主机进行访问测试。这里有一个在线服务，ProtoFluid，该服务允许你提供你要测试的网站的 URL，或者你本机上的 URL，然后，模拟 iPhone 等移动设备显示你的设计，下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸，来模拟特定的设备。

在 ProtoFluid 使用 Media Queries，你需要同时加上 max-width 和 max-device-width 属性，这意味着，Media Queires 不仅可以针对不同的移动设备，还可以针对桌面系统中某些人为的小窗口情形。

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

使用上面的代码，在桌面浏览器上，当你改变窗口尺寸到达 480 像素的时候，就会看到布局的改变。需要注意的是，上面的 max-width 部分仅仅为了测试，如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变，可以去掉 max-width 部分，而只针对那些移动设备。

对现有网站的整改

上面的例子为了说明问题起见都很简单，现实中的站点不可能这样，下面的例子，作者将使用他自己的公司网站，说明如何使用 Media Queries 对现有网站进行移动化整改。

桌面布局

作者自己的网站是几年前设计的，那是还没有考虑 Media Queries 问题，这是一个三栏式布局。

增加新的式样表

为了适应移动设备，将使用 Media Queries 加载独立的式样表：

<link
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
href="/assets/css/small-device.css"
/>

作者的做法是，将他站点中原来的 CSS 文件另存为 small-device.css ，在这个基础上针对移动设备进行整改。

压缩 Header 部分

第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。

body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}

单列式布局

下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。

.article #aside {
	float: none;
	width: auto;
}

再紧凑一些

然后，将margin 和 padding 进行调整，使之更紧凑一些：

在 iPhone 中测试

在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。

<meta name="viewport" content="width=device-width" />

更多资源

• 后 移动时代的 Web 设计
• A List Apart – Responsive Web Design （ALA – 反应灵敏的 Web 设计）
• Apple – Safari Web Content Guide （Apple – Safari Web 内容指引）
• Sitepoint CSS Reference – Media Queries （SitePoint 的 CSS 参考手册 – Media Queries）
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries  （使用 CSS3 Media Queries 实现面向 iPhone 4 高精细显示屏的设计）
• Aral Balkan: How to make your web content look stunning on the iPhone 4’s new Retina Display（Aral Balkan：如何让你的 Web 内容在 iPhone 4 的高精细屏上更好地显示）
• Stuff and Nonsense: Proportional leading with CSS3 Media Queries （使用 CSS3 Media Queries 实现按比例行间距）
• Matthew James Taylor: iPad layout with landscape and portrait modes （iPad 的水平和垂直布局模式）

在旧浏览器上支持 Media Queries

如果你面向的访问者是 iPhone， Opera Mini 等移动设备，这没有问题，对于那些不支持 Media Queries 的浏览器（像 IE6/7/8），以下文章或许对你有帮助。

• Media Queries section on When Can I Use, showing which browsers have support （Media Queries 的浏览器支持情况）
• Media Queries jQuery plugin (only deals with max/min width) （Media Queries jQuery 插件）
• css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers（在不支持 Media Queries 的浏览器中实现对 Media Queries 的支持）

更多示例

Jon Hicks 在 Hicksdesign 基于 Media Queries 实现了非常好的浏览体验，不仅针对移动设备，还面向那些拥有小屏幕的桌面系统。另外，还可以看看 Simon Collison’s website 以及 Ed Merritt’s portfolio 这些网站中对这种技术的运用。

本文作者

Rachel Andrew

Rachel Andrew 是一名 Web 前端设计师与后端开发者，是一家英国 Web 开发顾问公司 edgeofmyseat.com 的主管，她还是一款小型 CMS 系统 Perch 的设计者。她写过多本 Web 开发与设计相关的书，包括由 SitePoint 出版的 CSS Anthology: 101 Essential Tips, Tricks and Hacks，她的个人博客是 rachelandrew.co.uk。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 后移动时代的 Web 设计
• 从大屏幕到小屏幕迁移的三种设计方案
• 为移动网站编码
• 2010网页设计趋势[下] — CSS3 技术
• 2008年国外最佳Web设计/开发技巧、脚本及资源总结
• 默认Web字体样式
• 黑莓9300最新谍照泄露
• 页面输出时一些常用的小技巧
• 页面元素的两种表达状态：常态，暂态
• 面向对象的CSS

Feed enhanced by Better Feed from Ozh

如果你错过了我以前的职位对CSS和HTML5的，你可以读它之后。如果你拥有更多的例子来分享，请让我放弃我所知道的评论！

演示使用HTML5+CSS3实现所展示的强大的力量。现实中的新案例又有出现了不少，于是我又再次发布了该类主题的这篇文章！请确保您的浏览器最好是最新的版本，最好是Safari或者Chrome。如果您错误了我以前介绍的关于HTML5+CSS3实现的案例，那么千万不要再错过本文，如果您有好的案例，那么就请分享给我们吧，请留下您宝贵的评论！

• Slidenafill
  
• GoogleBox
  
• Page Flip
  
• Bar Chart
  
• Solar System
  
• Colourful Clock
  
• CoverFlow
  
• Leaves
  
• Bokeh
  
• 3D Bar Chart
  
• A Tribute to the Beatles
  
• Pacman
  
• Coke Can
  
  This isn’t made with CSS3 nor HTML5, it’s CSS1/2! Pretty amazing concept.

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
• 转换设计原图 PSD 为 HTML
• 用jQuery和CSS构建下拉菜单
• 基本指南 – CSS处理大背景图片
• 关于浮动的所有实现
• 值得一看的10个很有希望的CSS框架
• CSS溢出属性
• CSS Sprites 会加速您的网站
• CSS Sprites + 圆角
• 21个您应该知道的神奇的CSS技巧

Feed enhanced by Better Feed from Ozh

第一名: CSS3 图表

CSS3 Charts [ 预 览 | 下 载 ]

该设计试验了 CSS3 在图表方面的应用，不借助任何 JavaScript 和图片。用到了 CSS3 强大的选择器功能：nth-child 和 :target，同时用到了过渡，渐变等技术，由来自美国的 Sean Oh 设计。

第二名: CSS3 魔方

CSS3 Rubiks Cube [ 预 览 | 下 载 ]

使用魔方实现导航，虽然在具体应用中体验未必好，但作为一种创意，可以用在作品展示类站点。用到了 CSS3 的过渡和渐变技巧。由来自意大利的 Francesco Benanti 与 Maicol Zenatti 联合设计。

第三名: CSS3 3D

CSS3D [ 预 览 | 下 载 ]

如果你有 3D 眼镜，可以看看这个 3D 效果，支持任意现代浏览器，甚至 iPhone，由来自荷兰的 simurai 设计。

第四名: CSS3 机器人

CSS3 Monsters Blob [ 预 览 | 下 载 ]

使用纯 CSS3 设计的机器人，随着鼠标的移动，机器人的眼镜也在转动，由来自法国的 Sebastien Plaignaud 设计。

第五名: CSS3: 时间的裂缝

CSS3 A Rift in Time [ 预 览 | 下 载 ]

CSS3 支持旋转，我们可以借以试验反传统的倾斜导航，由来自美国的 Maxwell Burton 设计。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

在这里您将看到120个非常优秀的CSS水平导航菜单。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 网站导航设计的6大分类
• 用jQuery和CSS构建下拉菜单
• 在CSS3的级别下考虑您的设计
• 八种布局方案改善你的设计
• 为什么在网页设计中清洁代码如此重要？
• 一个基于JQuery 和CSS3的滑动菜单
• 99款高质量免费XHTML/CSS模板
• 30个漂亮的分页样式设计
• 30+大背景图片网站设计
• 2010网页设计趋势[下] — CSS3 技术

Feed enhanced by Better Feed from Ozh

目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果

左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影

问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着

CSS 淫技

灰常简单: 在图片外头套一层超薄<span />然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display

最终用 jQuery 的解决方案

本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套<span />

不解释, 上代码先

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});

</script>

接下来开始解释
1. 调用 jQuery 库
2. ready 就是 DOM 全部加载后再触发的事件, 否则一旦有图片的 DOM 节点后于 JS 加载,就会绑定不到
3. $(“.rounded-img, .rounded-img2″) 选中所有 class 名为 rounded-img 和 rounded-img2 的元素
4. 给俩元素集绑定 load 事件 (偶很疑惑为何这么写)
5. 在每个图片外面包含一个 span, 这个 span 的 class 为原元素的 class ,这个 span 的 style 里的 background 取值自原图的 src 值, 宽高同理
6. 给每个图片写个style=”opacity:0″

看起来素酱紫滴:

大猫的调整

$(function(){
  $(".avatar").wrap(function(){
      return '<span style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    }).css("opacity","0");
});

理由:
1. $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){}) ,貌似有这么一说,嘻嘻
2. class名改为 .avatar 如果你是 wordpress 的评论头像, 都封装好了,要改结构也不是很方便,哈
3. 去掉图片的 .load 事件, 因为如果图片从缓存中获取, 有可能就不会触发这个事件, 反正是 DOM ready,霸王硬上弓了
4. 直接用链式写法点花点月点秋香

然后你得在你的主题 style.css 加上那么几条
因为 webkit 的内阴影配合圆角就是一坨屎,所以我用外阴影了
iPhone 的safari 还不支持 inset 内阴影, 如果有内阴影控, 可以用线性渐变配合RGBA假装是阴影…

.avatar {
	display: inline-block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

IE 呢?
screw you!

不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看

screw IE!

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 八种布局方案改善你的设计
• 一个基于JQuery 和CSS3的滑动菜单
• CSS3+JQuery实现固定头部的导航菜单
• 40+ Web前端开发必备的备忘单[上]
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧

Feed enhanced by Better Feed from Ozh

PS：本文原文本来提供了一个视频，但是由于众所周知的原因，我们无法观看这个在Youtube上的视频，想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit

尽 管Mozilla和Webkit通常对CSS3属性采取同样的语法，但是对于渐变，他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内 核，它使用下面的结构：

1
2
3
4

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要担心这些语法会让你看花眼，我也是这样的！只要记得我们需要用一个逗号来隔开这个参数组。

• 渐变的类型? (linear)
• 渐变开始的X Y 轴坐标(0 0 – 或者left-top)
• 渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
• 开始的颜色? (from(red))
• 结束的颜色? (to(blue))

Mozilla

Firefox，从3.6版本才开始支持渐变，更喜欢和Webkit略 微不同的语法。

1
2
3
4
5

/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

• 请注意我们将渐变的类型——linear——放到了属性前缀中了
• 渐变从哪里开 始? (top – 我们也可以使用度数，比如-45deg)
• 开始的颜色? (red)
• 结束的颜 色? (blue)

Color-Stops

如果你不需要从一个颜色到另一个颜色的100%渐变怎么办？这就 是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变，比如：

注意顶部的浅灰色到白色的细小的渐变

在过去，标准的做法就是制作一个图片，并将其设为 一个元素的背景图片，然后让其水平平铺。然而使用CSS3，这是个小Case。

1
2
3
4

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

这 次，我们让渐变结束于8%，而不是默认的100%。请注意我们也在头部采用了一个边框，以形成对比。这很常用。

如果我们 想要添加多一种(几种)颜色，我们可以这样做：

1
2
3

background: white; /* 备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

• 对 于-moz 版本，我们定义，从元素的20%的高度的地方开始是红色。
• 而对于-webkit，我们使用color-stop，采用两个 参数：哪里开始停止，使用哪种颜色。

IE

IE并不支持CSS渐变，但是提供了渐变滤镜，可以实现最简单的渐 变效果：

1
2

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */

关于CSS渐变的一些要点：

• 尽可能 的使用它。如果让IE用户看到一个固定的纯色，我鼓励你使用这种方法；
• IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变，Firefox 和Safari用户通常经常升级浏览器，而Chrome的自动升级机制会在后台自动升级，所以这并不是个大问题；
• 总是为不支持这些浏览 器私有属性的浏览器应用一个默认的，纯色背景；
• 永远不要使用红色到蓝色的渐变，就像我用作例子的这种；
• 页 面无须在每个浏览器里面看起来完全一样！
• Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和 y轴的坐标。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

• 查看示例
• 点此下载

效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。

制作教程

一、创建如下的菜单结构

1. <div id=”navi”>
2. <div id=”menu” class=”default”>
3. <ul>
4. <li><a href=”#”>首页</a></li>
5. <li><a href=”#”>jquery</a></li>
6. <li><a href=”#”>设计</a></li>
7. <li><a href=”#”>flex</a></li>
8. <li><a href=”#”>air</a></li>
9. <li><a href=”#”>ajax</a></li>
10. <li><a href=”#”>html5</a></li>
11. <li><a href=”#”>css3</a></li>
12. <li><a href=”#”>WordPress</a></li>
13. </ul>
14. </div><!– close menu –>
15. </div><!– close navi –>

这是一个菜单列表，结构上很简单，跟一般的菜单结构类似。

二、使用css3构建华丽菜单

接下来我们需要用到css3的知识来实现如demo上的菜单效果。
完整代码如下：

1. #navi {
2. height: 50px;
3. margin-top: 50px;
4. font-size:14px;
5. }
7. #menu {
8. /*背景*/
9. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
10. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
11. /*圆角*/
12. border-radius: 5px;
13. -webkit-border-radius: 5px;
14. -moz-border-radius: 5px;
15. line-height: 50px;
16. text-align: center;
17. margin: 0 auto;
18. padding: 0;
19. }
22. ul {
23. padding: 0;
24. }
26. ul li {
27. list-style-type: none;
28. display: inline;
29. margin-right: 15px;
30. }
32. ul li a {
33. color: #fff;
34. text-decoration: none;
35. /*文字阴影*/
36. text-shadow: 1px 1px 1px #000;
37. padding: 6px 12px;
38. /*圆角*/
39. border-radius: 5px;
40. -webkit-border-radius: 5px;
41. -moz-border-radius: 5px;
43. -webkit-transition-property: color, background;
44. -webkit-transition-duration: 0.5s, 0.5s;
45. }
47. ul li a:hover {
48. background:#FFC;
49. color:#333;
51. -webkit-transition-property: color, background;
52. -webkit-transition-duration: 0.5s, 0.5s;
53. }
55. .default {
56. width: 850px;
57. height: 50px;
59. box-shadow: 0 5px 20px #888;
60. -webkit-box-shadow: 0 5px 20px #888;
61. -moz-box-shadow: 0 5px 20px #888;
62. }
64. .fixed {
65. position: fixed;
66. top: -5px;
67. left: 0;
68. width: 100%;
70. box-shadow: 0 0 40px #222;
71. -webkit-box-shadow: 0 0 40px #222;
72. -moz-box-shadow: 0 0 40px #222;
73. }

关键部分代码说明
1、给菜单添加渐变背景

1. /*背景*/
2. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
3. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

webkit和firefox在渐变背景的使用上有出入，语法并不相同，firefox更简洁，webkit更符合标准。接下来明河详细说明下这些 参数是什么意思。
先来看firefox的语法：

1. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

这里有四个参数，含义如下：

• 第一个参数，渐变的起始点，这里用到了简写，本来应该是 left top，火狐可以只用left，top是默认的，也就是至上向下。
• 第二个参数，起始渐变色
• 第三个参数，中间渐变色
• 第四个参数，终点渐变色

1. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));

webkit的参数比较多，含义如下：

• linear 线性渐变
• left top起始位置
• left bottom终点位置
• color-stop(0%,#8AB9EB)起始颜色
• color-stop(40%,#5C9DDC)中间颜色
• color-stop(100%,#2374C5)终点颜色

关于渐变背景的详细说明请点此。
2、给菜单容器添加圆角

1. /*圆角*/
2. border-radius: 5px;
3. -webkit-border-radius: 5px;
4. -moz-border-radius: 5px;

这个很简单，明河就不说明了
3、给菜单项加入如下样式

1. ul li a {
2. color: #fff;
3. text-decoration: none;
4. /*文字阴影*/
5. text-shadow: 1px 1px 1px #000;
6. padding: 6px 12px;
7. /*圆角*/
8. border-radius: 5px;
9. -webkit-border-radius: 5px;
10. -moz-border-radius: 5px;
12. -webkit-transition-property: color, background;
13. -webkit-transition-duration: 0.5s, 0.5s;
14. }

留意这里的文字阴影的用法。

1. -webkit-transition-property: color, background;
2. -webkit-transition-duration: 0.5s, 0.5s;

只适用于webkit浏览器，是控制背景透明度。

三、使用jquery让菜单跟随页面滚动

1. $(function(){
2. var menu = $(‘#menu’),
3. pos = menu.offset();
5. $(window).scroll(function(){
6. if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)){
7. menu.fadeOut(‘fast’, function(){
8. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
9. });
10. } else if($(this).scrollTop() <= pos.top && menu.hasClass(‘fixed’)){
11. menu.fadeOut(‘fast’, function(){
12. $(this).removeClass(‘fixed’).addClass(‘default’).fadeIn(‘fast’);
13. });
14. }
15. });
16. })

关键代码说明：

1. pos = menu.offset();

offset()获取菜单在当前页面的位置，返回的是一个object:{top:”XXpx”,left:”XXpx”}。

1. $(window).scroll(function(){
2. ……..
3. });

监听窗体的滚动事件。

1. $(this).scrollTop()

scrollTop()将得到滚动条的滚动距离，非常重要的一个值。

1. $(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)

根据滚动距离，确定菜单是否还可见，不可见，则改变菜单的定位方式.

1. menu.fadeOut(‘fast’, function(){
2. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
3. });

给菜单加入了fixed样式：

1. .fixed {
2. position: fixed;
3. top: -5px;
4. left: 0;
5. width: 100%;
7. box-shadow: 0 0 40px #222;
8. -webkit-box-shadow: 0 0 40px #222;
9. -moz-box-shadow: 0 0 40px #222;
10. }

有二个关键的点：

• position: fixed;将其定位方式改变成固定定位
• box-shadow ：加入阴影

完毕！有问题可以给明河留言谢谢！

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 一个基于JQuery 和CSS3的滑动菜单
• 解密CSS Sprites：技巧、工具和教程
• 简单的JQuery聚光灯效果教程
• 制作jquery文字提示插件
• 八种布局方案改善你的设计
• jQuery + CSS3 实现图片圆角
• 40+ Web前端开发必备的备忘单[上]
• 10个令人惊异的创建按钮的CSS3教程、方法
• 10个为Web设计师准备的jQuery教程

Feed enhanced by Better Feed from Ozh

然后，我并没有解释它，或者给出适当的语境。抱歉！

正确的粒度是减小CSS的关键之一

在PHP层，下面的会话流(来自Facebook)或许是一个单个对象。所有的检测哪些HTML要显示或者隐藏的逻辑都包含在一个对象结构 中。

一个Facebook会话流

通常，开发人员尝试使这个CSS的匹配中端(介于前端和后端？)逻辑。我们期望用于这个会话流的所有的CSS代码都包含在一个由ID包裹的 沙盒内，比如#story。这将终结臃肿而枯燥的代码。为什么呢？因为CSS层的适当的结构更加细化(粒度更小)。其实，试图在PHP层中给予CSS结构 就像是试图使用数据库架构来配置Apache一样。这是行不通的。

会话流有很多更小(更细致）的对象组成

因此，我们可以看到，上面的会话流是由许多更小的对象组成的。当我们让对象更细化（颗粒更小），我们就会开始看到同样的模式反复出现，然后 同样的对象变得更可重用。我们开始看到在互联网上的大多数网站都是由相同的基本重复的模式以不同的方式结合起来的。作为一个附带好处，CSS会变得体积更 小，更简单。

这个会话流，一个PHP对象，是由几个HTML和CSS的对象组成的：

1个标题

5个媒体块

2个链接样式

1个评论列表

1个动作列表

1个段落

这种方法的好处？

使CSS对象的粒度合适意味着我们的CSS（嗯，推而广之，我们的HTML）变得更简单、更轻。我们的小小的可重用的对象可以在整个网站上 用来创建新的和不同的页面，而不用再增加css的大小。

作为一个起点，我建议您创建下列对象：标题、列表、文字处理和链接、容器、媒体、网格和模板。在做整个页面之前，先创建你的所有最小的对 象，然后你的CSS江自然的保持很小。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

手册难点
中文资料少，对英文翻译功底要求较高；
基础语法要求字斟句酌，避免产生歧义；
兼容性列表涉及浏览器及版本众多；
草案中的Grid布局被业界同仁普遍认为比“天书”还难…
CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的 沉淀制作示例。

备受期待的 CSS 3 新功能
圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

>> 点击下载 CSS 3.0 参考手册 中文版 <<

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• CSS2视觉手册
• ５个免费的图标集下载
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理

Feed enhanced by Better Feed from Ozh

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	zoom: 1;
}

<div>
	<div></div>
</div>

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

• 在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
• 在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。这时的代码相当于：

  <div>
  	<div></div>
  </div>
  <div style="clear: both"></div>

二，.clearfix的弊端

在上面的代码中可以看到，抛开IE6, 7不谈，.clearfix在标准浏览器下插入了一个clear: both的元素，这样很可能清除掉不必要的浮动。举例来说明：

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body { padding: 0; margin: 0; }
		ul { margin: 0; padding: 0; }	

		.clearfix:after {
			content: " ";
			display: block;
			clear: both;
			height: 0;
		}
		.clearfix {
			zoom: 1;
		}

		.left-col {
			background: red;
			float: left;
			width: 100px;
			height: 300px;
		}
		.right-col {
			margin-left: 100px;
		}
		.menu {
			border: 1px solid #000;
		}
		.menu li {
			float: left;
			display: block;
			padding: 0 1em;
			margin: 0 1em 0 0;
			background: #ccc;
		}
		.placeholder {
			background: yellow;
			height: 400px;
		}
	</style>
</head>
<body>
	<div>
	</div>
	<div>
		<ul>
			<li>Menu Item</li>
			<li>Menu Item</li>
			<li>Menu Item</li>
			<li>Menu Item</li>
			<li>Menu Item</li>
			<li>Menu Item</li>
		</ul>
		<div></div>
	</div>
</body>
</html>

上面的代码构成一个两列布局的页面。注意.menu这个菜单设置了边框，但是由于.menu的li元素是左浮动的，导致.menu没有高度，于是可 以用.clearfix来清除.menu内部的浮动。代码如下：

<ul>
	<li>Menu Item</li>
	<li>Menu Item</li>
	<li>Menu Item</li>
	<li>Menu Item</li>
	<li>Menu Item</li>
	<li>Menu Item</li>
</ul>

但是应用完.clearfix后，在标准浏览器下页面变得很乱，这是因为.clearfix:after把.left-col的浮动也给清除掉了。

三，重构.clearfix

在遭遇到上面的错误之后，分析一下除了.clearfix:after这种方式之外还有没有别的方法清除元素内部的浮动。答案是有的，在白话Block Formatting Contexts这篇文章中提到过构成Block Formatting Context的元素可以清除内部元素的浮动。那么只要使.clearfix形成Block Formatting Context就好了。构成Block Formatting Context的方法有下面几种：

• float的值不为none。
• overflow的值不为visible。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。因为是应用了.clearfix 和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。

我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个，但是display: inline-block会产生多余空白，所以也排除掉。剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context，因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。这样我们新的.clearfix就会闭合内部元素的浮动。下面是重构之后的.clearfix。

.clearfix {
	zoom: 1;
	display: table;
}

四，总结

在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，除 了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的。如果可以做到在什么条件下用哪种方法，我认为这样就足够了……

作者：周明智

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 打败 IE 的葵花宝典：CSS Bug Table
• 各浏览器的默认CSS
• PNG透明兼容IE6的几种方法
• IE不支持的10个非常有用的CSS属性
• IE8面向Web开发人员的功能改进
• CSS在IE6中的bug修正技巧
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack

Feed enhanced by Better Feed from Ozh

‎方法一(CSS)：
将下面的代码加到CSS代 码的最顶端即可实现将网页黑白灰的素装。

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

方法二(HTML)：
若网站未使用CSS文件，可在网页/模板的HTML代码<head>和</head>之间加入以下style代码。

<style type=”text/css”>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

如果加入以上代码却未实现网站灰黑色效果，是因为网站没有使用最新的网页标准协议。需将网页最头部的<html>替换为以下代码。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

方法三(FLASH)：
针对部分网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入。

<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>

方法四(HTML)：
将网站变成黑白灰最简单的方法是在网页代码头部增加以下代码。

<style type=”text/css”>
html { filter: gray;}
</style>

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

Create a Vibrant Digital Poster Design with CSS3
一 个通过纯html和CSS来设计的充满活力和抽象的数字海报

CSS3 Leopard-style Stacks
一个纯CSS.没有 JavaScript. 一个Gordon Brander的实验.

Wicked CSS3 3D Bar Chart
一个尝试用CSS3来创建的3D图表. 这个例子只能工作在 Firefox, Chrome, Safari 和 Opera.

Selectable Headlines with Color Transition (CSS3)
一个通过CSS3来实现文本颜色过渡效果的实例. 只能工作在 Safari 和Google Chrome.

Our Solar System in CSS3
这是一个试图实现太阳系运动效果的实例，非常有趣。

Fun With CSS Gradients

CSS3 Bookshelf
这是一个很华丽的设计，通过动画来实现这个书架效果。

Pure CSS Twitter Fail Whale
一个很可爱的CSS动画效果

CSS World Clocks
这是一个通过CSS来实现的时钟效果，注意这其中没有用图片。

3D Text Tower
看惯了一尘不变的text，这里给你加上动态阴影。

Creating a Realistic Looking Button with CSS3
如果你不想用photoshop来设计按钮，可以用它。

CSS3 Spotlight
聚光灯! Works with Webkit & Firefox.

Pure CSS3 Animated AT-AT Walker from Star Wars

Pure CSS Icons
教我们用CSS3来设计icons

Create a Content Slider Using Pure CSS
不要JS来实现滑动效果。

Sexy Tooltips with Just CSS
如果不喜欢JQuery，我们可以这样来做我们想要的效果，这是一个注释样例。

Creating a Polaroid photo viewer with CSS3 and jQuery

这是一个很好的CSS和JQuery结合的实例，通过使用jQuery可以让我们使用更清洁的CSS。

Animated Photoshop selection using CSS3
这是个突出虚线效果的例子。看起来就像photoshop一样。

Sexy Image Hover Effects using CSS3
一个漂亮的图片悬停效果。

CSS3 Dropdown Menu
一个多级菜单，效果很不错，在IE7＋也有不错的表现，不过像圆角就不会有了。

Middle Box Links
一个漂亮的内容框，加上一个动画效果，让你更方便的找到它的链接。

Contextual Slideout Tips With jQuery & CSS3

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius
介绍了非常丰富的CSS3实用技巧。

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

隶属上的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS 外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。

@import次数限制

传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现 这样的情况，说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明 显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方 法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等

兼容性上的差别

由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题（似乎影响不大~）。

使用DOM控制样式时的差别

当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import 不是dom可以控制的。

所以，无特殊情况推荐使用link来引入样式，尽量避免使用 @import，而如果进行Ajax或 者交互的样式，则可以通过@import引入

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧
• 解密CSS Sprites：技巧、工具和教程
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页布局中易犯的10个CSS小错误
• 网站头部右上角的导航实现

Feed enhanced by Better Feed from Ozh

Gif格式图片的特点

透明性

Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha 透明）。

动画

Gif这种格式支持动画。

无损耗性

Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使  得图像质量产生损耗。

水平扫描

Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向 的gif图片更加小。例如500*10的图片比10*500的图片更加小

间隔渐进显示

Gif支持可选择性的间隔渐进显示

由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面 中看到png是最优的选择。

Jpeg格式图片特点

透明性、动画

它并不支持透明，也不支持动画。

损耗性

除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理 都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

隔行渐进显示

它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全到达的时候显示）。
由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

Png格式图片分析

Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png（PNG8）和全色的png（PNG24、 PNG32），你完成可以用256色的png代替gif，用全色的png代替jpeg

透明性

Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象在ie6(下面详细讨论)

动画

它不支持动画

无损耗性

png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使  得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式
水平扫描像GIF一样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示

它支持间隔渐进显示，但是会造成图片大小变得更大

其它图片格式与PNG比较

众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。

• 相比GIF：PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用 PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。
• 相比JPEG：JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG 适合作为编辑JPEG的过渡格式.

Png8的在ie中的怪异表现:

1. 半透明的png8在ie6以下的浏览器显示为全透明。
2. Alpha透明的全色PNG(png32）在ie6中会出现背景颜色(通常是灰色)。

由上面可以总结:

• 全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器 都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。
• 第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。

因此得出结论就是:请使用PNG8。

Png8的软件问题

Photoshop只 能导出布尔透明的PNG8。

Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.

pngquant与pngnq这两个命令行软件可以转换全色png为 256色的png8。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• CSS实现HTML元素透明的那些事
• 43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
• 24 个漂亮的个性化 HTML 表单技术
• 13个利用CSS3+HTML5实现的令人惊叹的例子
• 10个绝妙的HTML5，CSS和Javascript示例
• 100 个高质量的 XHTML/CSS 模板（中）
• 100 个高质量的 XHTML/CSS 模板（下）
• 100 个高质量的 XHTML/CSS 模板（上）
• 面向对象的CSS

Feed enhanced by Better Feed from Ozh

I haven’t really digging into HTML5 yet, but it’s so hot right now I can’t even avoid it. I thought it would take a while to adopt it by web community and I think Apple has play a role in it. Apple’s iPad has stimulate the acceptance of HTML5! Alright, I haven’t got an iPad yet because I think I don’t need it YET. Okay, back to HTML5, HTML5 has changed the game of web development and it’s so exciting. I have collected 10 awesome html5, css and javascript demonstrations that show you the power of them combined together!

[我还没有深入研究HTML5，但是它太热了，我没法忽略它的存在。 HTML5已经改变了web开发的游戏规则，这里我收集了10个绝妙的HTML5，CSS和Javascript示例。]

提 醒：下面的例子需要在支持HTML5的浏览器里运行，比如：Firefox最新版，Chrome。

• Blob
  
  Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity.[可爱的小圆球人物，用到了HTML5的canvas和javascript。]
• Bubble
  
  Generate colorful bubbles using HTML5 and of course with a magic touch of javascript.[使用HTML5和javascript生成的彩色 泡泡]
• jParallax
  
  Awesome jParallax. I have been wanted to use this in my projects, but still haven’t got the chance yet. It’s a plugin and it’s free.[不可思议的jParallax.我一直想在自己的项目里用这个，但是一直没有机会，这 是一个免费插件]
• Firework
  
  Never thought we can make firework with Javascript and html5.[从来没想过我们可以用JavaScript和html5做烟花.]
• Canvas Photo
  
  Create polaroid photo effect with HTML5 canvas. It also come with the export tool.[用HTML5的canvas创建的拍立得效果的相册.]
• Video showcase from Apple
  
  Apple has a sweet demonstration of video masking, scaling and changing perspective of the video.[苹果的例子,可以缩放和改变视频角度。]
• Photo Gallery
  
  Another awesome demonstration. You can change the layout of the photo gallery and it has a nice blur effect.[另一个不可思议的DEMO。您可以更改照片库布局，它有一个很好的模糊效果。]
• Particle Animation
  
  Using 300 sprites to spell out the word. It’s the demonstration of canvas particle animation.[使用300个粒子拼写单词。这是 canvas的动画效果显示。]
• Spread
  
• Block based destruction of HTML5 Canvas Video
  
  If you think apple’s canvas video is awesome, check this out. Recommended to use webkit based browsers.[如果你感觉 苹果的canvas视频非常不可思议，看看这个吧，这个太牛X了！]

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 24 个漂亮的个性化 HTML 表单技术
• 表单元素：40个CSS/JS风格和功能技术处理
• 用css+js控制图片大小的方法
• 前端开发常见图片格式详解
• 八种布局方案改善你的设计
• 使用框架建立富联网应用
• TBCompressor 2.4.2
• CSS实现HTML元素透明的那些事
• 43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤

Feed enhanced by Better Feed from Ozh

CSS3是很是了不起。它正以惊人的速度及新技术、新想法，几乎每天都在更新，推动本身的能力越走越远，使得我们能够减少对JavaScript的依赖。

Turn Your Images Into Polaroids with CSS3

这项技术在某些特定浏览器中运用CSS（2和3）相结合完成，运用一些基本的样式，把经常性使用的老图片看起来像是宝丽来影像风格–并没有额外的标记来显示文本。
运用CSS3技术使得您的影像像是宝丽来风格 »
查看演示 »

Sliding CSS3 Transition Image Gallery

本教程将会向您展示如果运用CSS3变换技术创建一个“幻灯片”效果。
CSS3变换技术完成图片幻灯片 »
查看演示 »

CSS Transitions – Throwing Polaroids at a Table

在这篇教程中，您将会看到如果运用CSS3变换和WebKit变换，使得您可以实现在您网站中布置–桌面可以随意摆放任意尺寸大小的照片
CSS 变换 – 桌面中随意摆放照片 »
查看演示 »

CSS Polaroid Photo Gallery

CSS实现宝丽来照片库 »
查看演示 »

Tabbed Image Gallery with CSS3 Transitions

通过本教材您可以通过运用CSS变换实现标签式动画图片库。
CSS变换实现标签式图片库 »
查看演示 »

Pure CSS3 Animated Sliding Image Gallery

这套主要的想法是为了实现当当前的图片滑出的时候，使得下一张图片滑入。这个可以通过众多 z-index 属性实现，也就是说，最新的那张总是显示在最前端。
纯CSS3实现滑动动画画廊 »
查看演示 »

Fancy Image Gallery with CSS3

这个CSS3教程会告诉您如何创建一个活泼的图片画廊。虽然建议的是，您需要采用兼容CSS3的浏览器中实现，但对于不兼容的浏览器该画廊依然是可见的，没有动画而已。
CSS3实现花式画廊与 »
查看演示 »

Image Slider With Pure CSS3

图像滑块是一种非常流行的图像效果，在作品集站点及博客中经常会被使用，然而，这些大多都是通过JavaScript来实现的。随着CSS3日渐强大，您可以纯粹通过CSS3技术来实现图像滑块效果，这篇文章恰好会告诉您怎么做。
纯CSS3实现图像滑块 »
查看演示 »

Sexy Image Hover Effects using CSS3

在这篇文章中您会被告知通过CSS3创建性感的图像悬停效果。这一类的效果通常都是通过Flash或JavaScript实现的，但当CSS可以完全实现该效果的时候您还会选择它们来实现吗？
用CSS3实现性感的悬停效果 »
查看演示 »

CSS3 Image Enlarger Gallery

此图像画廊仅在Safari, Chrome 和 Opera中有效，所有其他浏览器将会看到即时图像大小悬停时产生变化。如果您使用的是上述3款浏览器，那么您就会看到图像放大效果，收缩顺利的话不会超过0.7秒。
CSS3实现图像放大画廊 »
查看演示 »

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 基本指南 – CSS处理大背景图片
• 关于浮动的所有实现
• 值得一看的10个很有希望的CSS框架
• CSS溢出属性
• CSS Sprites 会加速您的网站
• CSS Sprites + 圆角
• 43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
• 21个您应该知道的神奇的CSS技巧
• 15个网页设计师非常有用的CSS网格布局生成器

Feed enhanced by Better Feed from Ozh