|
喵喵立體捲軸~4 (邊線對比呈現立體效果篇)
【CSS與文章捲軸語法運用之不同】 /* CSS捲軸範例-參考喜樂捲軸 */ html{ SCROLLBAR-FACE-COLOR: #4A3B1C;
<div style="SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #face78; SCROLLBAR-DARKSHADOW-COLOR: #9c6c10; HEIGHT: 180px; SCROLLBAR-HIGHLIGHT-COLOR: #e3d1af; SCROLLBAR-SHADOW-COLOR: #e3d1af; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #f0dcb6; SCROLLBAR-3DLIGHT-COLOR: #fffbf2">
/* CSS捲軸範例--註解 */ html{ SCROLLBAR-FACE-COLOR: #b3e6e3; /*軸面顏色*/
<div style="SCROLLBAR-ARROW-COLOR: #三角箭頭顏色; SCROLLBAR-FACE-COLOR: #軸面顏色; SCROLLBAR-DARKSHADOW-COLOR: #右邊外側顏色; HEIGHT: 捲軸高度px; SCROLLBAR-HIGHLIGHT-COLOR: #左邊內側顏色; SCROLLBAR-SHADOW-COLOR: #右邊內側顏色; OVERFLOW: auto瀏覽器判斷區塊是否超過設定的寬高而出現捲軸; SCROLLBAR-TRACK-COLOR: #軸軌顏色; SCROLLBAR-3DLIGHT-COLOR: #左邊外側顏色">
1為三角箭頭； 2、6為軸面跟軸軌； 3、7為右外側跟左外側邊線； 4、5為左內側跟右內側邊線；
/*文章捲軸-依次序編排-註解1*/ <div style=" 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*/ <div style="SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #aeebe7; SCROLLBAR-DARKSHADOW-COLOR: #599bb5; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #f5feff; SCROLLBAR-SHADOW-COLOR: #79bbd1; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #e4f7f6; SCROLLBAR-3DLIGHT-COLOR: #ebfeff">
/*預覽捲軸+語法範例-2*/ <div style="SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-FACE-COLOR: #face78; SCROLLBAR-DARKSHADOW-COLOR: #573b13; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #e3d1af; SCROLLBAR-SHADOW-COLOR: #ab8338; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #f0dcb6; SCROLLBAR-3DLIGHT-COLOR: #fffbf2">
/*預覽捲軸+語法範例-3*/ <div style="SCROLLBAR-ARROW-COLOR: #1f0400; SCROLLBAR-FACE-COLOR: #7d1d10; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #cc666b; SCROLLBAR-SHADOW-COLOR: #1f1f1f; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #99200f; SCROLLBAR-3DLIGHT-COLOR: #000000">
/*預覽捲軸+語法範例-4*/ <div style="SCROLLBAR-ARROW-COLOR: #643d7a; SCROLLBAR-FACE-COLOR: #9b7fad; SCROLLBAR-DARKSHADOW-COLOR: #432057; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #decaeb; SCROLLBAR-SHADOW-COLOR: #643d7a; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #dcd1e3; SCROLLBAR-3DLIGHT-COLOR: #e3cef0">
/*預覽捲軸+語法範例-5*/ <div style="SCROLLBAR-ARROW-COLOR: #c9e5ff; SCROLLBAR-FACE-COLOR: #629ed9; SCROLLBAR-DARKSHADOW-COLOR: #00294f; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #d2e7fc; SCROLLBAR-SHADOW-COLOR: #003c73; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #c5dbf0; SCROLLBAR-3DLIGHT-COLOR: #c9e5ff">
/*預覽捲軸+語法範例-6*/ <div style="SCROLLBAR-ARROW-COLOR: #c9e5ff; SCROLLBAR-FACE-COLOR: #629ed9; SCROLLBAR-DARKSHADOW-COLOR: #00294f; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #d2e7fc; SCROLLBAR-SHADOW-COLOR: #003c73; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #c5dbf0; SCROLLBAR-3DLIGHT-COLOR: #c9e5ff">
/*預覽捲軸+語法範例-7*/ <div style="SCROLLBAR-ARROW-COLOR: #cfc6b8; SCROLLBAR-FACE-COLOR: #806845; SCROLLBAR-DARKSHADOW-COLOR: #2e2311; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #ccba9f; SCROLLBAR-SHADOW-COLOR: #594524; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #ad9c82; SCROLLBAR-3DLIGHT-COLOR: #cfc6b8">
/*預覽捲軸+語法範例-8*/ <div style="SCROLLBAR-ARROW-COLOR: #b8b8b8; SCROLLBAR-FACE-COLOR: #666666; SCROLLBAR-DARKSHADOW-COLOR: #303030; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #b8b8b8; SCROLLBAR-SHADOW-COLOR: #000000; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #969696; SCROLLBAR-3DLIGHT-COLOR: #DEDEDE">
/*預覽捲軸+語法範例-9*/ <div style="SCROLLBAR-ARROW-COLOR: #a37e55; SCROLLBAR-FACE-COLOR: #f0e2ce; SCROLLBAR-DARKSHADOW-COLOR: #8a653b; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #c7b68d; SCROLLBAR-SHADOW-COLOR: #a37e55; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #fff6e3; SCROLLBAR-3DLIGHT-COLOR: #faf6eb">
/*預覽捲軸+語法範例-10*/ <div style="SCROLLBAR-ARROW-COLOR: #ededed; SCROLLBAR-FACE-COLOR: #945f3e; SCROLLBAR-DARKSHADOW-COLOR: #a6948a; HEIGHT: 300px; SCROLLBAR-HIGHLIGHT-COLOR: #a38979; SCROLLBAR-SHADOW-COLOR: #363636; OVERFLOW: auto; SCROLLBAR-TRACK-COLOR: #bf9073; SCROLLBAR-3DLIGHT-COLOR: #dbccc3">  以上捲軸不過是研習範例分享
喵喵還是希望大家自己動手製作
精緻又搭配圖文的捲軸
那將更相得益彰 圖文並茂
大家加油加油喲!
|
