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前缀,那么有与无还有什么区别呢?

jQuery plugin – Scroll to Top

“返回顶部”的应用相当广泛,在典型的超长页面里,它几乎是必须的。比如新浪微博里,页面的长度因数据的加载而长达数千像素,它的“返回顶部”并没有太多特别之处,唯一有趣的是那个向上箭头是有两个字符组合而成而并非图片。正是这种细微之处,体现了前端的创想力以及对页面性能的进益求精。

虽然我的题目是插件,但其实内容多半和插件没半毛钱关系…

Read more... »

纯CSS圆角Tab

Tab能算的上是网页里最为常见的组件,不论是作为内容切换,还是直接作为导航,形形色色的Tab扮演着各种交互角色。既然是重要的交互角色,那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的,在视觉上把Tab和其他分隔元素区别开来是必要的,就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入,但却是必须的,因为交互元素的凸显比整个设计浑然一体更为重要。

在IE67日渐边缘的如今,2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了,对于它们,能看看内容就已经不错了,管它美不美观错不错位,时代在进步,往前看才不至于失业……

今天琢磨了会写了下面这样一个CSS圆角Tab,和网上流行的圆角Tab不同之处在于:Tab底部也使用圆角过渡

Pure CSS Rounded Tab Navigation
Read more... »