Lightbox弹框效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行Javascript库中。本文收集10个最佳的Lightbox效果插件。

jQuery Lightbox Plugin

More »

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

More »

最近一直在帮YelpClone做定制模板。

今天闲来无事上了QZONE看看，看到那些头像（他们叫portrait，不过我们平时做开发都叫avatar）圆角就像去解剖一下看看他的做法。

TX的前端还是挺牛的，大量运用了CSS Sprite，今天就说说他们圆角头像的做法吧。

研究过代码后发现他们圆角其实是一个图片：http://qzonestyle.tc.qq.com/ac/qzone_v5/skin_img/21/portrait_round.png
有兴趣的下载下来看看，嘿嘿，注意背景千万别是白色，不然你什么都看不到了。

如果你的背景是黑色的话，可以看到如下：

这个明显是想运用CSS Sprite技术做圆角的遮盖嘛。

我以前的做法是把四个角的图片单独弄下来，然后做成position:absolute; top:-1; left:-1; （左上），以此类推做出四个角，好处是能自动适应宽度。可以用四个图片，但也可以用CSS sprite整合成一张图片，不过这样一来好像很违背标准的感觉。于是感觉TX的遮蔽式圆角头像还不错。代码大概是这样的：

这里省时间和空间就不用标准方法写了，属性都强加在标签后面了，呵呵。

<div style="position:relative; width:100px; height:100px;">
 <span style="background:url(portrait_round.png) 0 -181px; width:100px; height:100px; position:absolute"></span>
    <img src="red_concise/images/add-cart.gif" width="100" height="100" />
</div>

原来思路也差不多，遮蔽的部分是absolute浮在外层relative的DIV的上面。这招也不错，以后我再开发类似的东东会借鉴的，毕竟弄四个角挺麻烦的。

转载自：http://ued.taobao.com/blog/2009/12/17/html5_css3/

互联网的发展总是在不断地催生新技术的产生，而HTML5和CSS3是最近一直被讨论的热门话题，对于每个互联网开发者尤其是前端开发者而言，都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢？我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》，PPT在这里：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名为Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些：

HTML5新增和移除的元素

More »

最近在做 YelpClone 的 Theme 定制服务，边做边学很多。

有两个网站拿出来分享一下，一直忘了分享，也许是域名太好记了。呵呵

Ajaxload.info 本人比较喜欢这个

Load Info

Preloaders

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

More »

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。

More »

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery  的特长是网页效果，因此，它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

拉洋片
在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。
More »

今天看Reader，又一次领略了CSS3的威力，CSS3做的按钮太酷炫了，进来看看把。因为没有时间，所以就不翻译了，原版抄来。

More »