喵喵立體捲軸系列分享-(2)

2010070700:59

 

 
 
喵喵立體捲軸系列分享-(2)
 
一般捲軸預覽
 

 

<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">

 

 
是不是顯得比較死板呀?!

 

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

 

<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
反白那一小段語法
貼上語法即可。


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

 

喵喵立體捲軸系列分享-(2)

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

 

預覽捲軸+捲軸語法-1

 

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

 

 

預覽捲軸+捲軸語法-2

 

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

 

 

預覽捲軸+捲軸語法-3

 

<div style="SCROLLBAR-ARROW-COLOR: #9e826c; SCROLLBAR-FACE-COLOR: #4d2000; SCROLLBAR-DARKSHADOW-COLOR: #5c4433; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #9e826c; SCROLLBAR-SHADOW-COLOR: #9e826c; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #4d2000; SCROLLBAR-3DLIGHT-COLOR: #5c4433">

 

 

預覽捲軸+捲軸語法-4

 

<div style="SCROLLBAR-ARROW-COLOR: #368f4b; SCROLLBAR-FACE-COLOR: #0b3b1f; SCROLLBAR-DARKSHADOW-COLOR: #00210e; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #368f4b; SCROLLBAR-SHADOW-COLOR: #368f4b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #0b3b1f; SCROLLBAR-3DLIGHT-COLOR: #00210e">

 

 

預覽捲軸+捲軸語法-5

 

<div style="SCROLLBAR-ARROW-COLOR: #b09879; SCROLLBAR-FACE-COLOR: #826c4f; SCROLLBAR-DARKSHADOW-COLOR: #634f34; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #b09879; SCROLLBAR-SHADOW-COLOR: #b09879; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #826c4f; SCROLLBAR-3DLIGHT-COLOR: #634f34">

 

 

預覽捲軸+捲軸語法-6

 

<div style="SCROLLBAR-ARROW-COLOR: #874c5b; SCROLLBAR-FACE-COLOR: #451824; SCROLLBAR-DARKSHADOW-COLOR: #29000b; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #874c5b; SCROLLBAR-SHADOW-COLOR: #874c5b; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #451824; SCROLLBAR-3DLIGHT-COLOR: #29000b">

 

 

預覽捲軸+捲軸語法-7

 

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

 

 

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

 

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

 

 

預覽捲軸+捲軸語法-9

 

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

 

 

預覽捲軸+捲軸語法-10

 

<div style="SCROLLBAR-ARROW-COLOR: #806e78; SCROLLBAR-FACE-COLOR: #bda8ac; SCROLLBAR-DARKSHADOW-COLOR: #806e78; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #A8A0A7; SCROLLBAR-SHADOW-COLOR: #A8A0A7; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #b39fa3; SCROLLBAR-3DLIGHT-COLOR: #806e78">

 

 

預覽捲軸+捲軸語法-11

 

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

 

 

預覽捲軸+捲軸語法-12

 

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

 

 

預覽捲軸+捲軸語法-13

 

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

 

 

預覽捲軸+捲軸語法-14

 

<div style="SCROLLBAR-ARROW-COLOR: #91accf; SCROLLBAR-FACE-COLOR: #2c558a; SCROLLBAR-DARKSHADOW-COLOR: #6882a3; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #91accf; SCROLLBAR-SHADOW-COLOR: #91accf; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #2c558a; SCROLLBAR-3DLIGHT-COLOR: #6882a3">

 

 

預覽捲軸+捲軸語法-15

 

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

 

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