分类：前端技巧

@chao

2013 年 02 月 24 日

在G+做了Post series插件的广告后得到的反馈是很多人都不明白这个插件是干什么用的，果然还是介绍词没有写好的问题啊

前端开发环境建设经验

发布时间：/作者：/

首先是关于前端开发环境建设的珍贵经验，这些建议来自Google的前端大神Paul Irish的演讲《Paul Irish on Web Application Development Workflow》(youtube视频，需要翻墙)基本可以按照这个建议的顺序逐步优化前端开发环境与流程。 命令行界面中提示符栏需要显示当前目录，当前git项目及所在分支，当前目录分支本地是否修改 位于github的d …

阅读全文→

WordPress摘要相关开发

主题开发时又出现使用more标签显示摘要与使用excerpt摘要相关filter出现混淆的问题。

WordPress主题开发中有两种显示摘要的方法，一种是利用more标签<!--more-->，该方法需要作者在文章适当位置中插入该标签；另一种是正宗的摘要使用函数the_excerpt显示，该方法既可以在文章编辑页面中填入，也会自动生成摘要。

第一种方法可以在调用函数the_content时通过传入参数来定义“阅读更多”链接样式，而与excerpt摘要相关filter完全无关。

第二种方法可以使用多种filter进行“阅读更多”链接定义，使用excerpt_length来定义自动生成摘要的长度(系统默认为55)，使用excerpt_more定义自动生成摘要时“阅读更多”链接的样式，使用get_the_excerpt定义手动添加摘要时“阅读更多”链接的样式。

CSS3中的transform3D变换总结

技术宅的CSS3 3D transform总结

#secondary li{
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	perspective: 400px;
}
#secondary a {
	display: inline-block;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
}
#secondary li:hover a {
	-webkit-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	-moz-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	-o-transform: translate3d(0px,0px,-30px) rotateX(90deg);
	transform: translate3d(0px,0px,-30px) rotateX(90deg);
}
#secondary a::after {
	content: attr(title);
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	color: white;
	background: #333;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	-moz-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	-o-transform: translate3d(0px,105%,0px) rotateX(-90deg);
	transform: translate3d(0px,105%,0px) rotateX(-90deg);
	opacity:1;
}