CSS3实现Gmail风格滚动条

经常使用Chrome浏览器浏览Gmail的朋友应该会发现,Gmail在显示比较长的内容时的时(比如常常的邮件列表或者联系人列表),右侧会出现一个灰色调的滚动条,风格与系统自带的完全不同。

Gmail滚动条和普通滚动条的对比

从左至右分别为普通状态、鼠标移动至滚动块上和拖动滚动块时Gmail滚动条和普通滚动条的对比

继续阅读全文

使用JavaScript和CSS实现异步移动侧边栏

最近帮同学(Simollus)搭建了WordPress博客。

尽管有过建Malash.me的基础,对WordPress轻车熟路,但仅限于插件之类表面的东西,在代码层面研究的并不多。这次建站一来想美化一下主题、优化一下功能,二来想拓宽一下自己的知识面,于是深入研究了一下JavaScript和CSS。

研究过程中发现ipc.me上有这样一篇文章(20个将JavaScript推到极致的网站)很有意思,其中Nike Better World的网站非常吸引我。当用户滚动页面时,会营造出一种有趣的视觉差。

受此启发,我写了一段JavaScript脚本在Simollus上实现了异步移动效果的侧边栏。

Simollus上的异步移动侧边栏

Simollus上的异步移动侧边栏预览(点击图片可看原图,未遮盖部分为浏览器可视区域)

继续阅读全文

为WordPress添加首行缩进

WordPress可以说是当前最流行的博客平台,功能强大而且有着大量的插件和主题,但在几乎所有主题中都没有考虑中文首行缩进的问题。网络上有很多人找到了解决办法,但有的过于麻烦(修改WordPress的quicktags.js文件),有的对浏览器有兼容性要求(手动添加全角空格)。最简单的办法是修改style.css文件(一条CSS让wordpress段落首行缩进两字符),但由于主题设置不同这条css语句并不能通用,那么如何对它进行修改呢?

首行缩进效果

首行缩进效果

继续阅读全文