Gather ★ Codes.

ตอนที่ 6 : Gather ★ Codes : สีสกอบาร์สำหรับ IE และ Chrome

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 627
    จำนวนคนให้กำลังใจ : 0 ครั้ง
    22 มี.ค. 57



โค้ดนี้อาจจะได้เปรียบชาวบ้าน 555
เพราะบางคนอาจจะเปิด IE แล้วก็จะเจอสกอบาร์ที่เราแต่งไว้ (แบบหนาๆ นั่นแหละ)
แต่บางคนอาจจะเปิด Chrome ก็เจอสกอบาร์อีกแบบ (เล็กๆ น่ารัก)

ซึ่งสีเหมือนกันเพียงแค่หน้าตาต่างกัน
เรียกว่า ได้ 2 ต่อ! 555

 
 


 อธิบายซักนิดก็แล้วกัน เริ่มจากของ Chrome ก่อน มันง่ายดี 555 //เลวมาก

::-webkit-scrollbar {

width: 10px;  < ขนาดของสกอบาร์

background:#000000;} < สีพื้นของสกอบาร์

::-webkit-scrollbar-thumb {

background:#ed1c24; < สีตัวเลื่อนสกอบาร์

-webkit-border-radius: 2px; < ความโค้งกลม มนๆ บน-ล่าง ของตัวเลื่อนสกอบาร์

border:1px dashed #fbedbc;} < เส้นประรอบๆ ตัวเลื่อนสกอบาร์

 

 ต่อมาก็อธิบายสกอบาร์ IE

วิธีง่ายๆ จำแบบนี้ดีที่สุด ไม่ยากเลยจริงๆ ไม่งงด้วยแหละ พิสูจน์มาแล้ว!!

 

scrollbar-base-color: #FFFFFF;

scrollbar-arrow-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-face-color: #000000;

scrollbar-highlight-color: #FFFFFF;

scrollbar-shadow-color: #FFFFFF;

scrollbar-track-color: #000000;

 

สีดำกรอบปุ่มสกอบาร์ หัวสามเหลี่ยม (ขึ้น-ลง) กรอบตัวเลื่อนสกอบาร์ > จะแสดงผลเป็นสีขาว

สีแดงพื้นปุ่ม พื้นสกอบาร์ พื้นตัวเลื่อนสกอบาร์ > จะแสดงผลเป็นสีดำ


ลองดูตัวอย่างเอานะ ^^

 

มันเป็นวิธีง่ายๆ เรียกว่าลวกๆ น่ะ

 แต่ถ้าใครชอบตัวเลื่อนสกอบาร์เป็นอีกสีล่ะก็

 

scrollbar-base-color: #000000;

scrollbar-arrow-color: #000000;

scrollbar-3dlight-color: #000000;

scrollbar-darkshadow-color: #000000;

scrollbar-face-color: #ed1c24;

scrollbar-highlight-color: #FFFFFF;

scrollbar-shadow-color: #FFFFFF;

scrollbar-track-color: #000000;

 

สีดำปุ่มสามเหลี่ยม (ขึ้น-ลง) พื้นสกอบาร์

สีแดงพื้นตัวเลื่อนสกอบาร์

สีฟ้ากรอบรอบสกอบาร์ กรอบรอบปุ่มขึ้น-ลง

 

ลองดูตัวอย่างตามนี้นะจ๊ะ >< 

 



ขอเครดิตให้เรกิกันบ้างนะคะ TwT

Speacial BG : 
© Tenpoints!

นิยายที่ผู้อ่านนิยมอ่านต่อ

loading
กำลังโหลด...

749 ความคิดเห็น

  1. #729 AyaseMoE (จากตอนที่ 6)
    วันที่ 17 มิถุนายน 2559 / 17:18
    ขอบคุณนะค้าาา><
    #729
    0
  2. #478 HedekoSama (จากตอนที่ 6)
    วันที่ 26 มีนาคม 2557 / 14:48
    ขอบคุณมากๆค่า /////
    #478
    0
  3. #391 {SunBright} บ า ไ ล ค์ ซี้ ! (จากตอนที่ 6)
    วันที่ 10 มีนาคม 2557 / 09:43
    ขอบคุณค้า (- /l -)
    #391
    0
  4. #297 mina.mimi (จากตอนที่ 6)
    วันที่ 14 มกราคม 2557 / 21:24
    ขอบคุณนะคะ ประโยชน์มากเลย
    #297
    0
  5. #268 iced tea aha! (จากตอนที่ 6)
    วันที่ 31 ธันวาคม 2556 / 11:57
    ขอบคุณมากเลยนะคะ :)
    #268
    0
  6. #213 Kyu Jiab (จากตอนที่ 6)
    วันที่ 17 พฤศจิกายน 2556 / 21:54
    Thank you >< ขอบคุณค่ะ
    #213
    0
  7. #17 ทูลีซันฮยอนวู. (จากตอนที่ 6)
    วันที่ 19 เมษายน 2556 / 21:09
    ขอบคุณจ้า ♥
    #17
    0
  8. #13 My name's Pokky (จากตอนที่ 6)
    วันที่ 16 เมษายน 2556 / 19:48
    ขอบคุณค่ะ ^^
    #13
    0