Creamy.

教程 | Scrollbar 教学


 
scrollbar 就是部落格旁边那个可以拉上拉下的滚动条啦 :)

1. 设计 → 修改 HTML

2. Ctrl+F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加你要的效果的代码
4. 按 preview 看看效果有没有出现,再按 保存 即可。

教程 ①:添加背景色在滚动条
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #D9D9D9;
}

::-webkit-scrollbar-thumb {
background-color: #B2C0C6;
-moz-border-radius: 10px;
border-radius: 10px;
}

小解释
红色代码:可以换去你想要的颜色代码
蓝色代码:边框的弧度 *代码 px 两个一定要一样

教程 ②:添加背景图在滚动条
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: url(图片 direct link);
}

::-webkit-scrollbar-thumb {
background: url(图片 direct link);
}


小解释
红色代码:可以换去你想要背景图的 url

<--- 教程更新于 2012.08.20 --->
教程 ③:另类滚动条 I
::-webkit-scrollbar { width: 9px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:10px; display: block; background-color: #cccccc; border:1px solid #fff;}
::-webkit-scrollbar-track-piece { background-color:#cccccc; }
::-webkit-scrollbar-thumb{ background:#000000;border:1px solid #fff;}
::webkit-scrollbar-thumb:vertical {background:#fff);border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom;}

小解释
红色代码:scrollbar 的上下两个点
蓝色代码:scrollbar 的背景色
蓝色代码:滚动条(中间的)的颜色

教程 ④:另类滚动条 II

::-webkit-scrollbar {
width: 9px;
height: 7px;
}
::-webkit-scrollbar-track-piece  {
background-color: #999;
border: 4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #fecdc9;
border: 1px solid #fff;
}

小解释
红色代码:滚动条(中间的)颜色
蓝色代码:滚动条(中间的)边框种类 *可选择要或不要


* 如果想要为你的 thumb 添加边框,可以添加以下代码:
border: 1px solid #000000;
-moz-border-radius: 10px;
border-radius: 10px; 
所有的代码都要添加在 { }之间哦 ^.^

预览图:



18 comments:

  1. 请问一下、你这种的Scrollbar怎样弄呢?

    ReplyDelete
  2. 你的scrollbar的上面有那个小小的四方格,请问你是怎么弄成的?可以教我么?

    ReplyDelete
    Replies
    1. 想留言在亲的部落格,可是发现没有 Cbox :)

      亲,这篇教学明天我会更新,加多两款 scrollbar 进去,到时会想办法通知你的 :)
      可以吗?

      by BII.

      Delete
    2. 教程已更新,欢迎亲来查看。

      by BII.

      Delete
  3. 谢谢你~~~不好意思呀><
    我现在才放Cbox><
    感谢你哦~~~~

    ReplyDelete
  4. 真的真的 好爱好爱你的教程 和素材 . 简单又好看 :) jiayou !

    ReplyDelete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。