【部落格素材教學法】喵喵立體捲軸~4 (邊線對比呈現立體效果篇)
|
喵喵立體捲軸~4 (邊線對比呈現立體效果篇)
【CSS與文章捲軸語法運用之不同】 /* CSS捲軸範例-參考喜樂捲軸 */ html{ SCROLLBAR-FACE-COLOR: #4A3B1C;
/* CSS捲軸範例--註解 */ html{ SCROLLBAR-FACE-COLOR: #b3e6e3; /*軸面顏色*/ 1為三角箭頭； 2、6為軸面跟軸軌； 3、7為右外側跟左外側邊線； 4、5為左內側跟右內側邊線； /*文章捲軸-依次序編排-註解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*/ |
