ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    Gather ★ Codes.

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

    • เนื้อหานิยายตอนนี้เปิดให้อ่าน
    • 790
      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
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

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

    ความคิดเห็น

    ×