CSS打造独特风格的滚动条(附Gmail风格和Outlook风格CSS)
2012-11-28 14:15
323 查看
完美主义者总是不允许任何不完美的出现,所以设计网页时,就连滚动条也不会放过。一个普普通通的滚动条是根本不能体现完美主义者追求完美的心,所以对滚动条做改动也是必然的。当然咯,我不是完美主义者,但我爱好折腾,所以也进行了滚动条改动。你也想改改滚动条?很好,跟着我一起来吧。
注意:更新CSS后请按下Ctrl+F5强制更新下浏览器缓存。(各位访客也请强制更新下我网站的缓存)
最先看到的特色滚动条是在Gmail,我们来看看具体的区别:
从左至右分别为普通状态、鼠标移动至滚动块上和拖动滚动块时Gmail滚动条和普通滚动条的对比。
这个滚动条并不是用JavaScript写成的,没有用到任何插件,只需要几句简单的CSS3即可。主要用到了-webkit-scrollbar、-webkit-scrollbar-button、-webkit-scrollbar-track、-webkit-scrollbar-thumb这几个伪类。
以下是从Gmail的源代码中提取并稍作修改的控制滚动条的CSS代码,本网站即采用了这段CSS。
如果希望自己的网站也拥有Gmail风格的滚动条,只需要把上面的代码添加进CSS文件就可以了。
我们再来看看微软最近上线的Outlook网站的CSS,也是小清新风格,微软最近似乎走小清新路线了,Metro开始,一路小清新到现在。微软采用了和Google同样的技术实现了类似效果。值得一提的是,其中使用的-webkit-scrollbar等一系列CSS3伪元素是Webkit内核浏览器才支持的(Chrome等),在Internet Explorer下不会显示此效果。可见微软这次考虑到了市场份额越来越大的Chrome,开始“讨好”Chrome用户了。
通过分析Outlook的源代码,提取出了相关代码,如果希望自己的网站也显示Windows 8风格的滚动条可以在CSS文件中添加如下代码:
是不是so easy?赶紧行动吧!
注意:更新CSS后请按下Ctrl+F5强制更新下浏览器缓存。(各位访客也请强制更新下我网站的缓存)
最先看到的特色滚动条是在Gmail,我们来看看具体的区别:
从左至右分别为普通状态、鼠标移动至滚动块上和拖动滚动块时Gmail滚动条和普通滚动条的对比。
这个滚动条并不是用JavaScript写成的,没有用到任何插件,只需要几句简单的CSS3即可。主要用到了-webkit-scrollbar、-webkit-scrollbar-button、-webkit-scrollbar-track、-webkit-scrollbar-thumb这几个伪类。
以下是从Gmail的源代码中提取并稍作修改的控制滚动条的CSS代码,本网站即采用了这段CSS。
::-webkit-scrollbar { height:11px; width:11px } ::-webkit-scrollbar-button { height:0; width:0 } ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display:block } ::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement { display:none } ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-style:solid; border-color:transparent } ::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{ background-clip:padding-box; background-color:#fff; } ::-webkit-scrollbar-thumb { -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1),inset0-1px0rgba(0,0,0,.07); background-clip:padding-box; background-color:rgba(0,0,0,.2); min-height:28px; padding-top:100 } ::-webkit-scrollbar-thumb:hover { -webkit-box-shadow:inset1px1px1pxrgba(0,0,0,.25); background-color:rgba(0,0,0,.4) } ::-webkit-scrollbar-thumb:active { -webkit-box-shadow:inset1px1px3pxrgba(0,0,0,.35); background-color:rgba(0,0,0,.5) } ::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-width:0; } ::-webkit-scrollbar-track:hover { -webkit-box-shadow:inset1px00rgba(0,0,0,.1); background-color:rgba(0,0,0,.05) } ::-webkit-scrollbar-track:active { -webkit-box-shadow:inset1px00rgba(0,0,0,.14),inset-1px-1px0rgba(0,0,0,.07); background-color:rgba(0,0,0,.05) }
如果希望自己的网站也拥有Gmail风格的滚动条,只需要把上面的代码添加进CSS文件就可以了。
我们再来看看微软最近上线的Outlook网站的CSS,也是小清新风格,微软最近似乎走小清新路线了,Metro开始,一路小清新到现在。微软采用了和Google同样的技术实现了类似效果。值得一提的是,其中使用的-webkit-scrollbar等一系列CSS3伪元素是Webkit内核浏览器才支持的(Chrome等),在Internet Explorer下不会显示此效果。可见微软这次考虑到了市场份额越来越大的Chrome,开始“讨好”Chrome用户了。
通过分析Outlook的源代码,提取出了相关代码,如果希望自己的网站也显示Windows 8风格的滚动条可以在CSS文件中添加如下代码:
::-webkit-scrollbar { width:17px; height:17px; background-color:#f0f0f0; border:none } ::-webkit-scrollbar-thumb { background-color:#cdcdcd; border:1pxsolid#f0f0f0 } ::-webkit-scrollbar-thumb:hover { background-color:#dadada } ::-webkit-scrollbar-thumb:active { background-color:#606060 } ::-webkit-scrollbar-thumb:disabled { background-color:#f9f9f9 } ::-webkit-scrollbar-corner { background-color:#f0f0f0 } ::-webkit-scrollbar-button { background-color:#f0f0f0; background-image:url(http://malash.googlecode.com/svn/trunk/win8-scrollbar/win8-scrollbar.png); background-repeat:no-repeat } ::-webkit-scrollbar-button:vertical { height:33px } ::-webkit-scrollbar-button:horizontal { width:33px } ::-webkit-scrollbar-button:horizontal:increment { background-position:0-444px } ::-webkit-scrollbar-button:horizontal:decrement { background-position:12px-425px } ::-webkit-scrollbar-button:vertical:increment { background-position:-1px-391px } ::-webkit-scrollbar-button:vertical:decrement { background-position:-1px-358px } ::-webkit-scrollbar-button:hover { background-color:#dadada } ::-webkit-scrollbar-button:horizontal:increment:hover { background-position:0-548px } ::-webkit-scrollbar-button:horizontal:decrement:hover { background-position:12px-529px } ::-webkit-scrollbar-button:vertical:increment:hover { background-position:-1px-495px } ::-webkit-scrollbar-button:vertical:decrement:hover { background-position:-1px-462px } ::-webkit-scrollbar-button:active { background-color:#606060 } ::-webkit-scrollbar-button:horizontal:increment:active { background-position:0-652px } ::-webkit-scrollbar-button:horizontal:decrement:active { background-position:12px-633px } ::-webkit-scrollbar-button:vertical:increment:active { background-position:-1px-599px } ::-webkit-scrollbar-button:vertical:decrement:active { background-position:-1px-566px } ::-webkit-scrollbar-button:disabled { background-color:#f9f9f9 } ::-webkit-scrollbar-button:horizontal:increment:disabled { background-position:0-756px } ::-webkit-scrollbar-button:horizontal:decrement:disabled { background-position:12px-737px } ::-webkit-scrollbar-button:vertical:increment:disabled { background-position:-1px-703px } ::-webkit-scrollbar-button:vertical:decrement:disabled { background-position:-1px-670px }
是不是so easy?赶紧行动吧!
文章来自:CSS打造独特风格的滚动条(附Gmail风格和Outlook风格CSS)
相关文章推荐
- CSS —— 自定义浏览器滚动条的样式,打造属于你的滚动条风格
- 用CSS打造韩式风格网站
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- CSS编辑工具Topstyle轻松打造网页风格
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
- 利用div+css在GridView模版列打造可定制的ToolTip风格
- 支持outlook等邮件客户端收取/发送 Gmail 邮件, 并有MSN风格的即时新邮件提醒功能!
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格
- 仿Vista风格按钮菜单代码(纯CSS打造)
- JS+CSS打造随滚动条滚动的在线客服工具条
- 支持outlook等邮件客户端收取/发送 Gmail 邮件, 并有MSN风格的即时新邮件提醒功能!
- 自定义浏览器滚动条的样式,打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
- CSS编辑工具Topstyle轻松打造网页风格
- 利用div+css在GridView模版列打造可定制的ToolTip风格