menu

webkit自定义滚动条

在之前的 Google Reader的颓然改变 里我吐槽了google reader的这次改版实在是糟糕透了,但是现在看来,自己似乎也渐渐习惯了——这得益于Google的不断的改进,扭转很多不如意的方面。比如内容区添加了清晰的边线,工具条的高度被压缩,甚至如果窗口高度不高的情况下,搜索栏和工具栏的空间会被压缩的更多。当然,直到现在我还是没法接受那种泛白的背景,长时间阅读还是很累人的。

但其实改版里还是有很多令人眼前一亮的地方,就比如webkit优化的滚动条,更为美观也更加节省空间。

于是我也整了整自己网站的滚动条,基本上就是自己写的简化版的Google滚动条,代码更少更简单,直接加到CSS文件里就搞定了。

::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-button{}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{width:0;height:0;}
::-webkit-scrollbar-track-piece{background-clip:padding-box;background-color:whitesmoke;border:solid white;}
::-webkit-scrollbar-track-piece:vertical{box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-track-piece:horizontal{box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.05);border-width:0;}
::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;}
::-webkit-scrollbar-thumb:vertical{border-width:1px 1px 1px 2px;min-height:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:horizontal{border-width:2px 1px 1px 1px;min-width:24px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1);}
::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:horizontal:hover{background-color:rgba(0,0,0,.6);box-shadow:inset 1px 1px 0 rgba(0,0,0,.5),inset -1px 0 0 rgba(0,0,0,.3);}

其水平滚动效果在之前我刚写完的 修复WordPress的Pingback 里第一次显现,水平的改善效果明显优于垂直。

刚好前段时间闹的沸沸扬扬的webkit威胁论,把webkit前缀推向了恶的一方,但其实webkit本身没什么过错,只是它的崛起从某种程度上来说意味着它可能重演IE的过去。我的博客的访问量50%来自Chrome,所以做这样的改变其实不足为奇。但倘若IE和FF甚至是OPERA都去实现-webkit前缀,那么有与无还有什么区别呢?

Google Reader的颓然改变

今天Google Reader的改版如约而至,但作为一个Google Reader的死忠来说,却一点也高兴不起来。新版本统一了很多外观性的东西,但个个方面都出现了严重倒退——体验、功能、开放,这让我实在忍不住吐槽:Google这就是你引以为傲的用户体验?晃眼的白板?狭小的可视空间?实用功能的退化?

引用一位微博网友@caoxg的话:

我本以为Google Reader会死在党的手里,没想到它自杀了。

随后我看到了各种来源的信息,其中大部分人都表示了对这次改版的不满。甚至有人表示这次的改版毫无可取之处,虽然有些偏激,但这种失望我自己也有切身感受——当真是爱之深责之切。

Read more... »

WOFF和Google Font API

Web Design Is 95% Typography,这并不夸张。尽管我不是设计师,和字体打交道的时间相对较少,却也知道其重要性。不过 Typography 一词并没有非常正式的官方中译,通常称为“字体排印”,而我们Web开发者讨论的也只是其中一个子集 Web typography。对此我没有什么深入研究,我强烈推荐 Type is Beautiful Blog,不论是Web开发者还是设计师,都应该对 Typography 这个我们日常工作内容的超集有所了解——对于前端恐怕尤为如此,毕竟浏览器便是此分支中的一个排版引擎。

本文主要讨论的是 WOFF,以及 Google Font API 中 WOFF 调用的相关应用。

Read more... »

通过Google Chart API生成QR code

QR code

QR code

QR code ,Quick Response code,是一种流行的2维条形码,能够存储多达4296个字母数字字符的任意文本,对于汉字,做多存储1817个,相对于177×177这么小一块区域来说容量已经相当高,更重要的是读取速度——准确而高效,因而在各个领域都有非常广泛的应该。导致现在手机读取条码软件也是相当流行。

Google Chart API 里就有专门的 QR code 生成调用,能非常方便的获取自己想要的 QR code。配图的内容为 swordair.com,长宽为150px,由google生成,看起来还挺不错挺蛋疼的。 如果只是随便玩一下,网络上也有在线的QR code 生成工具,使用起来更加便捷。

问题在于,我们拿着这幅自己完全看不懂的图做什么?用来写情书吗?恐怕是个不错的主意,绕这么多圈子想不收卡都难了,哈哈。

难得闲来无事,对此API我就简单封装了一个QRcode.js,方便日常使用。好吧,我常常写情书,而且一写就停不下来:)

当然,卡也就没少收了…

Read more... »