24h購物| | PChome| 登入
2010-07-16 23:23:09 | 人氣19| 回應0 | 上一篇 | 下一篇

【部落格素材教學法】喵喵立體捲軸~4 (邊線對比呈現立體效果篇)

推薦 0 收藏 0 轉貼0 訂閱站台

 

 
 

喵喵立體捲軸~4 (邊線對比呈現立體效果篇)

【CSS與文章捲軸語法運用之不同】

/* CSS捲軸範例-參考喜樂捲軸 */

html{ SCROLLBAR-FACE-COLOR: #4A3B1C;
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;}


/* 文章捲軸範例 */

">


/* 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;/*整體顏色*/}


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

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

 1為三角箭頭；

 2、6為軸面跟軸軌；

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

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

 

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

SCROLLBAR-ARROW-COLOR: #dbfdfb; /*三角箭頭顏色--1*/

SCROLLBAR-FACE-COLOR: #face78; /*軸面顏色--2*/

SCROLLBAR-DARKSHADOW-COLOR: #b4d8fc; /*右立體邊(右邊外側)顏色--3*/

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

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

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

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

SCROLLBAR-TRACK-COLOR: #f5e8d0; /*軸軌顏色--6*/

SCROLLBAR-3DLIGHT-COLOR: #9c7221; /*左立體邊(左邊外側)顏色--7*/

">

*應用技巧*

*在 右外側邊線-3 呈現較深顏色與 左外側邊線-7 呈對比*

*有時也可以 右外側邊線-3 與 右內側邊線-5 搭配採較深的不同顏色 與左側邊線呈對比**

**左淺右深對比--好記口令= 4 7   /  3 5

**口令註解: 左內側-4 跟左外側-7  / 右外側-3 跟右內側-5

但要注意搭配相容對比的色系，整體看起來才美喲!

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

複製框內語法，更改捲軸高度（HEIGHT: 300px; ）即可。

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

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

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

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

/*預覽捲軸+語法範例-4*/

/*預覽捲軸+語法範例-5*/

/*預覽捲軸+語法範例-6*/

/*預覽捲軸+語法範例-7*/

/*預覽捲軸+語法範例-8*/

/*預覽捲軸+語法範例-9*/

/*預覽捲軸+語法範例-10*/

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

 


 

我要檢舉
台長： 落葉之楓

您可能對以下文章有興趣

人氣(19) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 數位資訊(科技、網路、通訊、家電) | 個人分類: 部落格素材教學法綜合/其他 |
此分類下一篇:【部落格素材教學法】吳媽自製GOYO女孩版型5
此分類上一篇:【部落格素材教學法】※ tina 製多段式文字輸入~372 ※

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文