喵喵立體捲軸-(3 )~自由搭配篇~

2010070814:33

 

 

 
 
喵喵立體捲軸-(3 )~自由搭配篇~
/*CSS 捲軸語法*/
html{
scrollbar-base-color : #整體顏色色碼;
scrollbar-face-color : #軸面顏色色碼;
scrollbar-track-color: #軸軌顏色色碼;
scrollbar-arrow-color : #箭頭顏色色碼;
scrollbar-3dlight-color: #左立體邊顏色色碼;
scrollbar-highlight-color : #軸面左角邊顏色色碼;
scrollbar-shadow-color : #軸面右角邊顏色色碼;
scrollbar-darkshadow-color : #右立體邊顏色色碼;}
 

立體捲軸變化以及運用,參考範例如下~~

 

<div style="SCROLLBAR-ARROW-COLOR: #CCCCCC; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #666666; HEIGHT: 100px; SCROLLBAR-HIGHLIGHT-COLOR: #CCCCCC; SCROLLBAR-SHADOW-COLOR: #CCCCCC; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #666666">

 

應用技巧 : 以色碼按照順序分為7個色碼;如下範例~~

 1為三角箭頭

 26為軸面跟軸軌

 37為左右外側邊線

45為左右內側邊線

 

<div style="SCROLLBAR-ARROW-COLOR: #1; SCROLLBAR-FACE-COLOR: #2; SCROLLBAR-DARKSHADOW-COLOR: #3; HEIGHT: 100px; SCROLLBAR-HIGHLIGHT-COLOR: #4; SCROLLBAR-SHADOW-COLOR: #5; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #6; SCROLLBAR-3DLIGHT-COLOR: #7">

【立體感捲軸的變化技巧以及演練】

26(軸面與軸軌)底色一深一淺

37(外側邊線)採較深色(或較淺)的顏色;

1(三角箭頭)、45(內側邊線)

採較淡(或較深-相容外側邊線)的顏色。

【貼語法步驟:】

在編輯文章時 在要放置捲軸的地方
輸入隨意數字記號(如 3333333333 )
以作為尋找標記
然後點 觀看HTML原始碼
在裡面找到 數字記號 3333333333
反白那一小段語法
貼上語法即可。


*注意貼上語法下面不要有空格喲*
*捲軸還是要搭配框架底色跟邊線 互相融合輝映才完整、才好看。

參考工具 :  色碼選擇器

一般捲軸範例預覽
 

 

<div style="SCROLLBAR-ARROW-COLOR: #697840; SCROLLBAR-FACE-COLOR: #adb092; WIDTH: 250px; SCROLLBAR-DARKSHADOW-COLOR: #697840; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #697840; SCROLLBAR-SHADOW-COLOR: #697840; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #adb092; SCROLLBAR-3DLIGHT-COLOR: #697840">

 

 
是不是顯得比較死板呀?!
看看下面的吧!~~
 

喵喵立體捲軸-3 (自由搭配篇)

複製框內語法,更改捲軸高度HEIGHT: 180px;即可。

一般文章捲軸高度 300px 已經很足夠囉。

 

預覽捲軸+捲軸語法-1

 
<div style="SCROLLBAR-ARROW-COLOR: #9e9999; SCROLLBAR-FACE-COLOR: #363636; SCROLLBAR-DARKSHADOW-COLOR: #636363; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e9999; SCROLLBAR-SHADOW-COLOR: #9e9999; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #636363">
 
 

 

預覽捲軸+捲軸語法-2

 

<div style="SCROLLBAR-ARROW-COLOR: #4d0b0b; SCROLLBAR-FACE-COLOR: #6e4937; SCROLLBAR-DARKSHADOW-COLOR: #8c7265; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #4d0b0b; SCROLLBAR-SHADOW-COLOR: #4d0b0b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #4d0b0b; SCROLLBAR-3DLIGHT-COLOR: #8c7265">

 

 

預覽捲軸+捲軸語法-3

 

<div style="SCROLLBAR-ARROW-COLOR: #b3ac8c; SCROLLBAR-FACE-COLOR: #8a8259; SCROLLBAR-DARKSHADOW-COLOR: #615930; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b3ac8c; SCROLLBAR-SHADOW-COLOR: #b3ac8c; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #756c3b; SCROLLBAR-3DLIGHT-COLOR: #615930">

 

 

預覽捲軸+捲軸語法-4

 

<div style="SCROLLBAR-ARROW-COLOR: #b59984; SCROLLBAR-FACE-COLOR: #66404d; SCROLLBAR-DARKSHADOW-COLOR: #4a333b; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b59984; SCROLLBAR-SHADOW-COLOR: #b59984; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #613241; SCROLLBAR-3DLIGHT-COLOR: #4a333b">

 

 

預覽捲軸+捲軸語法-5

 

<div style="SCROLLBAR-ARROW-COLOR: #ab9c74; SCROLLBAR-FACE-COLOR: #e6e0d1; SCROLLBAR-DARKSHADOW-COLOR: #ab9c74; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #d9cdb0; SCROLLBAR-SHADOW-COLOR: #d9cdb0; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #ded7c5; SCROLLBAR-3DLIGHT-COLOR: #ab9c74">

 

 

預覽捲軸+捲軸語法-6

 

<div style="SCROLLBAR-ARROW-COLOR: #9e9e6e; SCROLLBAR-FACE-COLOR: #616130; SCROLLBAR-DARKSHADOW-COLOR: #414d08; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e9e6e; SCROLLBAR-SHADOW-COLOR: #9e9e6e; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #464d26; SCROLLBAR-3DLIGHT-COLOR: #414d08">

 

 

預覽捲軸+捲軸語法-7

 

<div style="SCROLLBAR-ARROW-COLOR: #366635; SCROLLBAR-FACE-COLOR: #699c68; SCROLLBAR-DARKSHADOW-COLOR: #366635; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #a9ba7b; SCROLLBAR-SHADOW-COLOR: #a9ba7b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #5c8a5b; SCROLLBAR-3DLIGHT-COLOR: #366635">

 

 

**預覽捲軸+捲軸語法-8**

 

<div style="SCROLLBAR-ARROW-COLOR: #ffeded; SCROLLBAR-FACE-COLOR: #f5ccc4; SCROLLBAR-DARKSHADOW-COLOR: #cc7373; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #ffeded; SCROLLBAR-SHADOW-COLOR: #ffeded; OVERFLOW: auto; SCROLLBAR-3DLIGHT-COLOR: #cc7373">

 

 

預覽捲軸+捲軸語法-9

 

<div style="SCROLLBAR-ARROW-COLOR: #9bb8c7; SCROLLBAR-FACE-COLOR: #5c7b8a; SCROLLBAR-DARKSHADOW-COLOR: #465861; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9bb8c7; SCROLLBAR-SHADOW-COLOR: #9bb8c7; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #44606e; SCROLLBAR-3DLIGHT-COLOR: #465861">

 

 

預覽捲軸+捲軸語法-10

 

<div style="SCROLLBAR-ARROW-COLOR: #53a8b0; SCROLLBAR-FACE-COLOR: #106f78; SCROLLBAR-DARKSHADOW-COLOR: #084e54; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #53a8b0; SCROLLBAR-SHADOW-COLOR: #53a8b0; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #195d63; SCROLLBAR-3DLIGHT-COLOR: #084e54">

 

 

預覽捲軸+捲軸語法-11  

 

<div style="SCROLLBAR-ARROW-COLOR: #99dbff; SCROLLBAR-FACE-COLOR: #5c94cc; SCROLLBAR-DARKSHADOW-COLOR: #7aa3f5; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #99dbff; SCROLLBAR-SHADOW-COLOR: #99dbff; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #528fcc; SCROLLBAR-3DLIGHT-COLOR: #7aa3f5">

 

 

預覽捲軸+捲軸語法-12

 

<div style="SCROLLBAR-ARROW-COLOR: #9e9e9e; SCROLLBAR-FACE-COLOR: #757575; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e9e9e; SCROLLBAR-SHADOW-COLOR: #9e9e9e; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #4d4d4d; SCROLLBAR-3DLIGHT-COLOR: #000000">

 

 

預覽捲軸+捲軸語法-13

 

<div style="SCROLLBAR-ARROW-COLOR: #9e8b78; SCROLLBAR-FACE-COLOR: #332e25; SCROLLBAR-DARKSHADOW-COLOR: #4d4d08; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e8b78; SCROLLBAR-SHADOW-COLOR: #9e8b78; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #1c1b1a; SCROLLBAR-3DLIGHT-COLOR: #4d4d08">

 

 

預覽捲軸+捲軸語法-14

 

<div style="SCROLLBAR-ARROW-COLOR: #9e866e; SCROLLBAR-FACE-COLOR: #523729; SCROLLBAR-DARKSHADOW-COLOR: #4d3926; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e866e; SCROLLBAR-SHADOW-COLOR: #9e866e; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #452a1c; SCROLLBAR-3DLIGHT-COLOR: #4d3926">

 

 

預覽捲軸+捲軸語法-15

 

<div style="SCROLLBAR-ARROW-COLOR: #6e869e; SCROLLBAR-FACE-COLOR: #3b5875; WIDTH: 250px; SCROLLBAR-DARKSHADOW-COLOR: #26394d; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #6e869e; SCROLLBAR-SHADOW-COLOR: #6e869e; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #264461; SCROLLBAR-3DLIGHT-COLOR: #26394d">

 

 
以上捲軸不過是範例分享
喵喵還是希望大家自己製作
精緻又搭配圖文的捲軸
那將更相得益彰 圖文並茂
大家加油喲!

 


如碰到雅虎的 888  ,先剪下文章內容
輸入隨意數字或文字,如888
按 立即發表。
再按 編輯 ,貼上文章內文
輸入文章名稱跟分類
按 立即發表 即可。