喵喵捲軸分析演變效果範例~5

喵喵捲軸分析演變效果範例~5

/* CSS捲軸範例+註解*/

html{ SCROLLBAR-FACE-COLOR: #b3e6e3; /*軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc; /*左邊內側顏色*/
SCROLLBAR-SHADOW-COLOR: #90b4d8; /*右邊內側顏色*/
SCROLLBAR-3DLIGHT-COLOR: #fcfcfc; /*左邊外側顏色*/
SCROLLBAR-ARROW-COLOR: #dbfdfb; /*三角箭頭顏色*/
SCROLLBAR-TRACK-COLOR: #e7faf9; /*軸軌顏色*/
SCROLLBAR-DARKSHADOW-COLOR: #b4d8fc; /*右邊外側顏色*/
SCROLLBAR-BASE-COLOR: #fcfcfc;/*整體顏色*/}

/* 文章立體捲軸範例*/

<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-TRACK-COLOR: #f5ccc4; SCROLLBAR-3DLIGHT-COLOR: #cc7373">

 

/* 文章立體捲軸範例-註解*/

<div style="
SCROLLBAR-ARROW-COLOR: #三角箭頭--1;
SCROLLBAR-FACE-COLOR: #上下拉動軸面--2;
SCROLLBAR-DARKSHADOW-COLOR: #右外側邊線--3;
HEIGHT: 300px; /*捲軸高度*/
SCROLLBAR-HIGHLIGHT-COLOR: #左內側邊線--4;
SCROLLBAR-SHADOW-COLOR: #右內側邊線--5;
OVERFLOW: auto; /*瀏覽器判斷區塊是否超過設定的寬高而出現捲軸*/
SCROLLBAR-TRACK-COLOR: #軸軌--6;
SCROLLBAR-3DLIGHT-COLOR: #左外側邊線--7
">

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

 1為三角箭頭；

 2、6為軸面跟軸軌；

 3、7為右外側跟左外側邊線；

4、5為左內側跟右內側邊線；

 

/*文章捲軸-依次序編排-註解1*/

<div style="

SCROLLBAR-ARROW-COLOR: #cc7373; /*三角箭頭色碼--1*/

SCROLLBAR-FACE-COLOR: #f5ccc4; /*上下拉動軸面色碼--2*/

SCROLLBAR-DARKSHADOW-COLOR: #cc7373; /*右立體邊(右外側邊線)色碼--3*/

HEIGHT: 300px; /*捲軸高度*/

SCROLLBAR-HIGHLIGHT-COLOR: #ffeded; /*軸面(左內側邊線)色碼--4*/

SCROLLBAR-SHADOW-COLOR: #ffeded; /*軸面(右內側邊線)色碼--5*/

OVERFLOW: auto; /*瀏覽器判斷區塊是否超過設定的寬高而出現捲軸*/

SCROLLBAR-TRACK-COLOR: #f5ccc4; /*軸軌色碼--6*/

SCROLLBAR-3DLIGHT-COLOR: #cc7373; /*左立體邊(左外側邊線)色碼--7*/

">

【喵喵分享範例捲軸研習篇】

複製框內語法，自行調整捲軸高度（HEIGHT: 300px; ）即可。

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

/*預覽立體捲軸+語法範例-1*/

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

 

/*預覽立體捲軸+語法範例-2*/

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

**刪除 軸軌--6( SCROLLBAR-TRACK-COLOR: #f5ccc4; ) 測試研習呈現效果~~**
**沒有輸入軸軌的效果，即呈現軸軌為預設的底色，
視自己版型軸軌底色或框架底色(如果有設框架的話)而呈現各自不相同的底色**

 

/*預覽立體捲軸+語法範例-3*/

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

**刪除下面兩個語法呈現效果~~**
SCROLLBAR-FACE-COLOR: #f5ccc4; /*軸面--2*/
SCROLLBAR-TRACK-COLOR: #f5ccc4; /*軸軌--6*/

*其呈現效果為與版型或框架捲軸底色一樣的顏色*