喵喵捲軸顏色系列分享-(1)

2010070518:25

 

 
喵喵捲軸顏色系列分享-(1)

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

 

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

 

應用技巧 : 以色碼按照順序分為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">

 

*醬子的捲軸看起來比較小,一般只要更改1(三角箭頭)、45(左右內側邊線)的捲軸色碼,其他均應用相似圖檔底色即可。

 

*如要再作進一步的變化,

更改26(軸軌)底色為圖檔相融和顏色;

37(外側邊線)採較深色;

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

採較淡(相容外側邊線)的顏色,效果極佳。

有空希望大家自己多去作測試玩玩,

相信很快就可以抓出其訣竅滴。

【貼語法步驟:】

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


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

喵喵捲軸顏色系列分享-(1)

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

 

預覽捲軸+捲軸語法-1

/*語法*/

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

 

預覽捲軸+捲軸語法-2

/*語法*/

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

 

 

預覽捲軸+捲軸語法-3

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-FACE-COLOR: #5c5c5c; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #969696; SCROLLBAR-SHADOW-COLOR: #969696; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #5c5c5c; SCROLLBAR-3DLIGHT-COLOR: #000000">

 

 

預覽捲軸+捲軸語法-4

/*語法*/

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

 

 

預覽捲軸+捲軸語法-5

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #e3e3e3; SCROLLBAR-FACE-COLOR: #707070; SCROLLBAR-DARKSHADOW-COLOR: #333333; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #e3e3e3; SCROLLBAR-SHADOW-COLOR: #e3e3e3; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #707070; SCROLLBAR-3DLIGHT-COLOR: #333333">

 

 

預覽捲軸+捲軸語法-6

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #aaccf2; SCROLLBAR-FACE-COLOR: #0a3b70; SCROLLBAR-DARKSHADOW-COLOR: #0a3b70; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #aaccf2; SCROLLBAR-SHADOW-COLOR: #aaccf2; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0a3b70; SCROLLBAR-3DLIGHT-COLOR: #0a3b70">

 

 

預覽捲軸+捲軸語法-7

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #a49bcf; SCROLLBAR-FACE-COLOR: #2e2073; SCROLLBAR-DARKSHADOW-COLOR: #2e2073; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #a49bcf; SCROLLBAR-SHADOW-COLOR: #a49bcf; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #2e2073; SCROLLBAR-3DLIGHT-COLOR: #2e2073">

 

 

預覽捲軸+捲軸語法-8

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #a49bcf; SCROLLBAR-FACE-COLOR: #2e2073; SCROLLBAR-DARKSHADOW-COLOR: #2e2073; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #a49bcf; SCROLLBAR-SHADOW-COLOR: #a49bcf; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #2e2073; SCROLLBAR-3DLIGHT-COLOR: #2e2073">

 

 

預覽捲軸+捲軸語法-9

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #99eeff; SCROLLBAR-FACE-COLOR: #0093b0; SCROLLBAR-DARKSHADOW-COLOR: #0093b0; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #99eeff; SCROLLBAR-SHADOW-COLOR: #99eeff; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0093b0; SCROLLBAR-3DLIGHT-COLOR: #0093b0">

 

 

預覽捲軸+捲軸語法-10

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #1ba687; SCROLLBAR-FACE-COLOR: #124d40; SCROLLBAR-DARKSHADOW-COLOR: #124d40; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #1ba687; SCROLLBAR-SHADOW-COLOR: #1ba687; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #124d40; SCROLLBAR-3DLIGHT-COLOR: #124d40">

 

 

預覽捲軸+捲軸語法-11

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #22ab1b; SCROLLBAR-FACE-COLOR: #1c451a; SCROLLBAR-DARKSHADOW-COLOR: #1c451a; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #22ab1b; SCROLLBAR-SHADOW-COLOR: #22ab1b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #1c451a; SCROLLBAR-3DLIGHT-COLOR: #1c451a">

 

 

預覽捲軸+捲軸語法-12

/*語法*/

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

 

 

預覽捲軸+捲軸語法-13

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #bab872; SCROLLBAR-FACE-COLOR: #615e12; SCROLLBAR-DARKSHADOW-COLOR: #615e12; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #bab872; SCROLLBAR-SHADOW-COLOR: #bab872; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #615e12; SCROLLBAR-3DLIGHT-COLOR: #615e12">

 

 

預覽捲軸+捲軸語法-14

/*語法*/

<div style="SCROLLBAR-ARROW-COLOR: #d9b871; SCROLLBAR-FACE-COLOR: #664e1c; SCROLLBAR-DARKSHADOW-COLOR: #664e1c; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #d9b871; SCROLLBAR-SHADOW-COLOR: #d9b871; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #664e1c; SCROLLBAR-3DLIGHT-COLOR: #664e1c">

 

 

預覽捲軸+捲軸語法-15

/*語法*/

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

 

 

 
 
 

Sailing