网络生活——关注网络，关注前端设计

IETESTER V0.44强势公布

2010年6月29日雨无形没有评论

之前介绍过前端页面调试利器IETESTERIETester多IE版本共存的解决方案。目前出了最新版V0.44。

IETester是一个免费的WebBrowser控件，让您有渲染和IE9预览，IE8的，JavaScript引擎在IE7 IE 6和在Windows 7，Vista和XP的IE5.5以上，以及在同一过程中安装IE浏览器。

这是一个alpha版本，您可以随意发表评论，对IETester论坛/错误。
要求：Windows 7，Windows Vista或Windows XP的IE7的最低（视窗XP/IE6配置有一些问题，例如不和IE8在XP下工作而不7）
注意IE9：IETester安装程序不包括IE9文件，所以你将需要安装IE9预览和复制文件手动：查看如何安装在IETester（IE9 IE9预览要求Vista SP2或Windows 7）。
CHANGE LOG (更新信息)：
2010年5月30日：v0.4.4
•更正IE9打开的多个错误（比照论坛的报告）
•重复任务栏缩略图更正错误（比照论坛的报告）
•增加了选项，使任务栏缩略图每选项卡（默认情况下启用禁用弹出窗口）
2010年4月21日：v0.4.3
•增加的选择遇到IETester IE9实例
•新增孟加拉语言
2009年10月24日：v0.4.2
•关闭错误更正介绍v0.4
•增加了菜单，启用/禁用功能：
◦启用/禁用缓存
◦启用/禁用图片
◦启用/禁用影片
◦启用/禁用背景声音
◦启用/停用JavaScript
◦启用/禁用Java
◦启用/禁用ActiveX
◦启用/禁用行为
•新增通知时，标签和按钮重新崩溃的标签
•视窗7只：添加任务栏图标覆盖选项卡崩溃时
•修正的“Internet Explorer选项”不工作在多进程模式
•修正“输入”和“Esc键”键错误
2009年9月23日：v0.4.1
•改进的标签关闭处理onbeforeunload事件（见错误报告）
2009年9月21日：v0.4
•新增“管理员窗口的标题时IETester作为管理员启动（Vista和Windows 7只）”信息。
•增加了多进程架构。使用此选项，每个选项卡是推出一个新的进程。
•增加了在Windows 7的Aero皮克功能。
•修正了几个bug密切的标签
2009年7月24日：v0.3.5
•增加了对新版本的每周检查
•IETester现在工作在Windows 7（但不太稳定）
•卸载错误更正
2009-07-17：v0.3.4
•增加了“文字大小”菜单
•增加了按Ctrl + L型/ Alt + D以/ F6来选择解决当前标签栏
2009年5月10日：v0.3.3
•实施“window.external”功能
•增加了透明度，支持IE5.5以上
2009年3月24日：v0.3.2
•更正DebugBar定位
•增加了IE8的最终决定，取消IE8的RC1的
2009-03-18：v0.3.1
•DebugBar可以打开成IETester（DebugBar v5.2.1或更需要）
•修正螺纹“window.close”处理死锁错误（此处报告）
•增加了按Ctrl + + /按Ctrl + – /按Ctrl +0处理变焦使用快捷键
•增加了“关闭全部页面”图标，剪彩酒吧（按Ctrl + Alt + W键盘快捷键）
•新增“关闭除积极”图标所有打开的标签来ribbont栏（Ctrl +轮班+ ALT键+瓦/ Ctrl + Alt键+ F4键键盘快捷键）
•在“打开所有版本”，即可用性，选择哪个版本的开放标签
•新增“查看源文件”对话框（需要DebugBar）（按Ctrl + U的键盘快捷方式）
2009-02-16：v0.3
•增加了一些新的语言如维吾尔族（）
•增加了命令行参数
•增加了缩放功能
•增加了按Ctrl +宽快捷关闭标签
•增加了IE8的RC1和删除IE8的测试版2
•新编丝带接口
•新增按钮打开所有版本的URL
•与IE6的XP的安装现在IE7的实例（尚未工作非常好，一个很大的错误，在以后的版本会改善）
•修正“网络搜索”框提示旗帜截断错误。
•更正网页闪烁调整大小时IETester
•更正的线程同步错误时关闭标签
•更正错误的JavaScript window.close
•改进的线程处理
•更正选项卡崩溃时，按’输入’错误
2008-09-07：v0.2.3
•修正在地址栏上的限制
•更正（IE浏览器打印功能崩溃）是提高稳定性小错误
•增加了打印和打印预览作品
•增加了IE8的Beta 2和删除IE8的测试版1
2008-05-27：v0.2.2
•增加了搜索框快捷键（Ctrl + E或按CTRL + K shortkeys）
•可定制的网页
•增加了对刷新shortkeys：F5/Ctrl +受体;按Ctrl + F5键刷新为完成
•增加了一个“刷新完成”菜单项，以绕过缓存刷新
•新增“全部刷新”菜单项
•修正下拉IE7的错误选择
•修正了剪彩按钮小图标
•增加了大量的翻译
2008-04-22：v0.2.1
•更正错误是提高稳定性
•新增翻译
•IETester现在可以在XP下没有SP2的推出。自定义版本的残疾，但仍然是一项关于XP完整版本的第一步。
2008-03-20：v0.2
•新增IE7和IE8的测试版1的实例
•现在的工作模态对话框
•上下文菜单IE6和IE5.5以上工作情况
•小错误更正
2008-02-29：v0.1.3
•XP的样式，IE6和IE7的工作情况
2008-02-25：v0.1.2
•添加“Internet选项”对话框
•现在的工作条件的意见
2008-02-19：v0.1.1
•IETester现在工作在Windows XP SP2的
2008-02-18：v0.1
•首先释放Vista与IE6和IE5.5以上的IETester

分类: css 标签:

sIFR文本替换技术

2009年9月22日雨无形没有评论

最近一个项目在使用jquery tools在用Flashembed组件的时候，发现了sIFR这个东西，就顺便了解了一下。

一、什么是sIFR?

sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。

二、如何使用sIFR？

sIFR的用法很简单，首先在官方http://www.mikeindustries.com/blog/sifr/下载最新的sIFR版本。然后在页面中引用相关的js（sifr.js和sifr-addons.js，如果用jquery tools则不需要加载这两个js），最后通过js方法将指定选择器按指定的样式来调用即可。具体可以看官方demo和jquery tools上的介绍。

三、最遗憾的，sIFR的局限

讲了这么多，你可能已经心动了吧，我当初了解了以后也是，这个在制作一些企业网站的时候是很有用的，不过最大的问题，目前sIFR不支持中文，主要原因是中文字库太大。不过我想如果能自己做一个只有一个企业站常用字的字库是否可行呢？不过这个还涉及到了字库的制作，不是更麻烦了？还是老老实实用图片先吧，也许在不久的将来随着带宽的提高技术的进步会有更多更好的方案出来，现在还是忍忍吧！

最后羡慕下国外的同行吧！

想了解更多的同志可以去看看：

如何以及何时使用sIFR

sIFR网页字体替换技术

sIFR 2.0: Rich Accessible Typography for the Masses

分类: 设计标签: flash, sIFR, 设计

网页中圆角的制作方法与选择（一）宽度固定高度自适应的圆角

2009年8月12日雨无形没有评论

今天在做移动新版页面的模板的时候因为页面中用到了很多圆角的效果，基本效果如下：

圆角效果

所以准备做一个圆角的通用模板。考虑到网站中此圆角样式只有两种宽的尺寸370和750，但高度不定所以首先做了一个固定宽高度自适应的模板。

代码如下：

Html部分：

<div class="box">
<div class="box-top">
<h2>宽固定高自适应box</h2>
</div>
<div class="box-bd">
<ul>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
</ul>
</div>
</div>

CSS部分：

.box {
	width:370px;
	padding-bottom:3px;
	background:url("../images/box-round.png") 0 100% no-repeat;
}
.box .box-top {
	height:27px;
	padding:2px 2px 4px;
	background:url("../images/box-round.png") -370px 0 repeat-x;
}
.box .box-top h2 {
	font-size:14px;
	line-height:27px;
	color:#1866a6;
	padding-left:20px;
	background:url("../images/ico.gif") 5px 7px no-repeat;
}
.box .box-bd {
	border-left:1px solid #c6c6c6;
	border-right:1px solid #c6c6c6;
	padding:5px 10px 8px;
}
.box {
	background-position:0 100%;
}
.box .box-top {
	background-position:-370px 100%;
}

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>grids</title> <link href="http://www.yuwuxing.cn/code/box/css/reset.css" rel="stylesheet" type="text/css" /> <link href="http://www.yuwuxing.cn/code/box/css/base.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div style="margin:20px auto; width:370px;"> <div class="box"> <div class="box-top"> <h2>宽固定高自适应box</h2> </div> <div class="box-bd"> <ul> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> </ul> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

如果还要新加一个750宽度的，则要修改一下代码。

html代码：

<div class="width1">
<div class="box">
  <div class="box-top">
    <h2>宽固定高自适应box</h2>
  </div>
  <div class="box-bd">
    <ul>
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
    </ul>
  </div>
</div>
</div>
<div class="width2">
<div class="box">
  <div class="box-top">
    <h2>宽固定高自适应box</h2>
  </div>
  <div class="box-bd">
    <ul>
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
    </ul>
  </div>
</div>
</div>

CSS代码：

.width1 {
	width:370px;
	margin:20px auto;
}
.width2 {
	width:750px;
	margin:20px auto;
}
.box {
	padding-bottom:3px;
	background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") no-repeat;
}
.box .box-top {
	height:27px;
	padding:2px 2px 4px;
	background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") repeat-x;
}
.box .box-top h2 {
	font-size:14px;
	line-height:27px;
	color:#1866a6;
	padding-left:20px;
	background:url("http://www.yuwuxing.cn/code/box/images/ico.gif") 5px 7px no-repeat;
}
.box .box-bd {
	border-left:1px solid #c6c6c6;
	border-right:1px solid #c6c6c6;
	padding:5px 10px 8px;
}
.width1 .box {
	background-position:0 100%;
}
.width1 .box .box-top {
	background-position:-370px 0;
}
.width2 .box {
	background-position:-740px 100%;
}
.width2 .box .box-top {
	background-position:-1490px 0;
}

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>grids</title> <link href="http://www.yuwuxing.cn/code/box/css/reset.css" rel="stylesheet" type="text/css" /> <link href="http://www.yuwuxing.cn/code/box/css/base.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> </head> <body> <div class="width1"> <div class="box"> <div class="box-top"> <h2>宽固定高自适应box</h2> </div> <div class="box-bd"> <ul> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> </ul> </div> </div> </div> <div class="width2"> <div class="box"> <div class="box-top"> <h2>宽固定高自适应box</h2> </div> <div class="box-bd"> <ul> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> </ul> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

宽度固定，高度自适应的圆角就这样完成了，如果需要宽度也能自适应敬请期待PART II，宽高自适应的圆角边框

分类: css, 网页设计标签:

CSS3 Columns属性研究

2009年8月6日雨无形没有评论

CSS3 Columns属性研究

Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码分别是定义的栏数根每栏的宽度

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

属性的使用很简单，比如要做一个宽度固定为800px，4栏的布局可以用如下代码：

width: 800px;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

同样如果要制作一个高度固定为400px，每栏宽度300px的布局可以用如下代码

height:400px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
column-width: 300px;

但是如果同同时使用了column-width和column-count会有怎么样的效果呢？
我们实验一下最开头的代码，

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;

分别用FF3.5和chrome/safari打开看一下
我们发现chrome/safari是按照设定的每栏宽250px，两栏显示的，但是FF下却成了两栏，但是每栏的宽变成了整个容器的50%的宽度。说明在FF下优先考虑的是容器的宽度。

然后我们再测试一下极端一点的情况：

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .textcol { height:400px; background:#FC0; -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard gets fully supported */} </style> </head> <body> <div class="textcol"> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在限定了高度，栏数，栏宽，字数又超过了的情况下，在FF下，栏宽还是容器宽度的50%，栏宽的限制也不起作用了，唯一起作用的是高度，在chrome/Safari下，栏宽跟高度还是保持，栏数超出设置。这个在使用这个属性的时候都是要注意的。

分类: css, 网页设计标签: css, css3

9个你现在可以使用的CSS3属性

2009年8月6日雨无形没有评论

前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。

原文：9 CSS3 Properties You Can Use Now

当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。

下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。

1.Text-shadow

这个属性使用的属性值是这样定义的：

1	text-shadow: 2px 2px 5px #000;

其中第一个和第2个值代表了阴影的偏移量，第3个值代表模糊半径，第4个值代表阴影颜色。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

注：想了解该属性详细情况可以查看之前的一篇文章CSS文字阴影效果

2.Box-shadow

这个属性跟文字阴影有点相像，但是又有一些区别，它可以作用于一块区域的阴影效果，而不像文字阴影只能作用文字区域。它的属性值是如下所示定义的：

1	box-shadow: 5px 5px 10px 10px #000;

前两个属性值代表阴影的便宜量，第3个值代表模糊半径，第4个值代表阴影的扩散半径，第5个值代表阴影的颜色值。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

3.Box-sizing

这个属性虽然被列入CSS3属性中，但是还尚未广泛支持CSS3的规格。

这个属性相对比较简单，包含了3个属性值，content-box、border-box和inherit。

1	box-sizing: content-box \| border-box \| inherit;

在浏览器行为中，默认情况下为content-box，内容显示的大小实际上是内容、填充、边界以外指定的宽度和高度，所以一个有20px宽度内容、1px边界以及5px的间距实际上会被当成总宽度为20+1+1+5+5=32px。

所以利用这个属性，如果我们定义为border-box，那边界和边距将会被定义在元素之内，上面举的例子中，总宽度将会被当成20px，这个在实际布局中很有用。

支持此属性的浏览器：IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+

4.Columns

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码告诉我们，内容将会以2列展示，每一列250px宽。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

5.Border-radius (rounded corners)

因为很多人都很喜欢圆角，但是在CSS3之前就不得不使用图片来实现很多效果，所以在CSS3中加入了这个属性，收到了大家的欢迎，但是在Mozilla 和 Webkit 核心浏览器中仍然需要他们自己的前缀，属性书写如下：

1
2
3

-moz-border-radius: 10px; /* For FireFox */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

支持此属性的浏览器：Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)

6.Border-image

这个属性没有像Border-radius这个属性那么频繁的被使用，因为在理解上还是有点困难。但是对于一些特殊的效果，用这个属性就很合适：

1 2	-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch; -moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

需要查看这个属性的更多细节，请点击：his full article

浏览器对于此属性的支持：Safari 3.1+, FireFox 3.5, Chrome 1.0+

7.@font-face (web font embedding)

这个属性是说用户可以自定义一些个性字体，为了包含自己定义的字体，可以通过这个属性进行定义：

@font-face {
font-family: "My Awesome Font";
src: url(MyAwesomeFont.otf) format("opentype");
}

然后可以通过下面的形式进行引用：

1	h1 { font-family: "My Awesome Font", sans-serif; }

支持此属性的浏览器：Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (sort of)

8.RGBA color

这个属性还是值得一提的，之前我们定义背景颜色，就是一个颜色值，但是通过CSS3的这个属性，如果你想定义一个透明度为50%的一个背景色，就会很容易实现：

1	background: rgba(0, 0, 0, 0.5)

浏览器对于此属性的支持（不包含滤镜）：Safari 3.1+, FireFox 2.0+, Chrome 1.0+

9.Transitions

这个属性可以让你实现一些之前必须用图片实现的效果，比如说线性渐变之类的：

#element {
opacity: .7;
-webkit-transition: opacity 1s linear;
}
#element:hover {
opacity: 1;
}

以前都是CSS3属性中加入的属性，对我们在工作当中都有了一个很好的帮助。

分类: css, 网页设计标签:

CSS文字阴影效果

2009年8月5日雨无形没有评论

上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考：http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <h2 id="test4">4 : This is heading with text-shadow 中文标题</h2> <h2 id="test5">5 : Multiple shadows are Hot</h2> </div> </body> </html>

提示：你可以先修改部分代码再运行。

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影IE滤镜版</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>文字阴影</title> <style type="text/css">  </style>  </style> <![endif]--> </head> <body> <div id="wrapper"> <h1>Text Shadow Use CSS</h1> <h2 id="test1">1 : This is heading with text-shadow 中文标题</h2> <h2 id="test2">2 : This is heading with text-shadow 中文标题</h2> <h2 id="test3">3 : This is heading with text-shadow 中文标题</h2> <p id="test4">4 : This is heading with text-shadow 中文标题</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

分类: css, 网页设计标签: css, css3

另辟蹊径，用css制作简单图片阴影效果

2009年8月4日雨无形没有评论

一般制作阴影效果都是使用的图片背景或者css滤镜，个人对于CSS滤镜一直抱有抵触心理，所以能不用就不用，有时候为了实现一些效果需要给图片加上阴影。可以尝试一下以下CSS方法。

a.shadow {
	display:inline-block;
	padding:1px;
	background:#d1d1d1;/* 第三层边框的颜色 */
	border:solid #f0f0f0 1px;/* 第四层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
a.shadow img {
	padding:1px;
	background:#676767;/* 第一层边框的颜色 */
	border:solid #a4a4a4 1px;/* 第二层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title></title> <style type="text/css" > body {background:#fff;} img {border:none;} a.shadow { display:inline-block; padding:1px; background:#d1d1d1;/* 第三层边框的颜色 */ border:solid #f0f0f0 1px;/* 第四层边框的颜色 */ /* 各标准浏览器中圆角定义 */ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } a.shadow img { padding:1px; background:#676767;/* 第一层边框的颜色 */ border:solid #a4a4a4 1px;/* 第二层边框的颜色 */ /* 各标准浏览器中圆角定义 */ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } </style> </head> <body> <a class="shadow" href="#" title=""><img src="http://www.yuwuxing.cn/wp-content/uploads/2009/08/1.jpg" alt="花" title="花" /></a> </body> </html>

提示：你可以先修改部分代码再运行。

分类: css, 网页设计标签:

适合自己的才是最好的——打造最适合自己习惯的reset.css

2009年7月14日雨无形没有评论

最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，以YUI为蓝本，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

3、Eric的reset css

4、YUI 3的CSS RESET

5、Less is more – my choice of Reset CSS

首先是最基本的清除padding跟margin：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}

这个我在YUI的基础上进行的修改，去除了pre,code,blockquote三个标签，因为我一般做的项目都是企业或门户型网站，用到这三个标签的机会极少，因此就去除了这三个标签的重置，节省几个字节。

然后是清楚border，一般常用的需要清除的只有fieldset、img两个元素，特别是img，如果不清楚在加上链接的时候会出现蓝色边框。

1
2
3

fieldset, img {
border: 0;
}

对于h标签,我只重置了该标签的font-size其它都没重置，在yui中的font-weight:normal;重置被我去除了，因为在我的使用中的大多数情况下h标签都是需要font-weight:bold的，在这里去除了以后还要加，反而麻烦了。

1
2
3

h1,h2,h3,h4,h5,h6 {
font-size:100%;
}

li标签的list重置，我选择了eric大牛的方法，

1
2
3

ol, ul {
list-style: none;
}

而没有用yui的方法

1
2
3

li {
list-style: none;
}

因为蓝色理想那篇文章里写，前一种方法的性能更好，这个目前没有什么实例证明，不过3个直接姑且就先用第一种吧。

再下来是table的样式

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
font-weight:normal;
}

最后几个伪类的样式

1
2
3

:focus {
outline: 0;
}

这个主要是针对非IE浏览器链接点击时的虚线框。

另外我一直很犹豫是否把链接的下划线去掉，经过考虑以后还是不在reset里面去掉了。

秉承够用就好的原则，代码中我去掉了那些我不常用的标签的重置，比如abbr,acronym,sup,sub,code,address,cite,dfn,var,blockquote,q标签，一般项目中基本上用不到，所以就不设置了。strong,em等标签还是使用默认样式，这里也不重置了。

将前面的综合一下最后的代码是：

/*
reset css version: 1.0 | 20090714
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
	font-weight:normal;
}
:focus {
	outline: 0;
}

分类: css, 网页设计标签: css, reset

根据访问者分辨率，自动调用不同版式CSS的代码

2009年7月8日雨无形没有评论

虽然现在已经基本淘汰800分辨率了1024已经成为主流，但是随着大屏幕液晶的不断降价，更高的分辨率将会逐步成为主流，为了适应越来越大的分辨率，有时候我们会采用流体布局，但是流体布局有时候也有局限性，下面一段js可以实现根据用户客户端分辨率的不同，调用不同的css代码来实现适应不同分辨率的效果。

var Swidth = screen.width;
var Surl = "http://www.yours.com/";
var Skin = ["cssstyle1.css", "cssstyle2.css"];
var Skintemp;
if (Swidth >= 1280) {
    Surl += "skin_1200";
} else {
    Surl += "skin";
}
for (var i = 0; i < Skin.length; i++) {
    Skintemp = document.createElement("link");
    Skintemp.type = "text/css";
    Skintemp.rel = "stylesheet";
    Skintemp.href = Surl + "/" + Skin[i];
    document.getElementsByTagName("head")[0].appendChild(Skintemp);
}

分类: JavaScript, 网页设计标签: css, JavaScript, 分辨率

网络生活——关注网络，关注前端设计

存档

IETESTER V0.44强势公布

sIFR文本替换技术

推荐一个不错的jq的UI库

网页中圆角的制作方法与选择（一）宽度固定高度自适应的圆角

CSS3 Columns属性研究

9个你现在可以使用的CSS3属性

1.Text-shadow

2.Box-shadow

3.Box-sizing

4.Columns

5.Border-radius (rounded corners)

6.Border-image

7.@font-face (web font embedding)

8.RGBA color

9.Transitions

CSS文字阴影效果

另辟蹊径，用css制作简单图片阴影效果

适合自己的才是最好的——打造最适合自己习惯的reset.css

根据访问者分辨率，自动调用不同版式CSS的代码

最近评论

分类目录

功能

月度索引

链接表

我在读的书

我想读的书