➨ さる381㋡ △full.version :: Code

ลำดับตอนที่ #5 : ▍Trks ▍รู้จักกับโค้ดสีเบื้องต้นน(￣▽￣)"

รู้จักกับโค้ดสี
โค้ดสีเป็นเรื่องสำคัญมากก ถ้าคุณจะทำการใช้งานโค้ดหรือแก้ไขโค้ด
และตอนนี้เราก็จะไปรู้จักกับโค้ดสีและวิธีการใช้งานเบื้องต้นกันนน*^*
ในตอนนี้ผมจะขอแนะนำโค้ดสี3รูปแบบนะครับ เอาแบบที่ใช้บ่อยๆกันเลย

แบบที่ 1  - โค้ดสีHEX 
เป็นที่นิยมกันมากสำหรับการใช้ในโค้ด เนื่องจากตัวโค้ดพิมพ์ง่าย และง่ายต่อการจำ
มาดูหน้าตาโค้ดกันเลย
#000000  | #FF4500 
การใช้โค้ดสีแบบนี้จะประกอบไปด้วย
1. '#' ข้างหน้าตัวอักษร6ตัว
2. อักษร6ตัว สามารถเป็นได้ทั้งตัวเลขอารบิกและตัวอักษรภาษาอังกฤษ
สามารถหาตัวอย่างโค้ดสีได้ที่นี่

EX เช่นการตั้งค่ากล่องข้างล่างนี่ให้เป็นสีแดง เราจะกำหนดรหัสสีสีแดงให้มัน คือ#FF0000
ก็จะได้เป็น .box{background:#FF0000!important;}

 

การย่อโค้ดสี
#000 | #F00 | #123
การย่อโค้ดสีจะเป็นการย่ออักษร5ตัวหลังเครื่องหมาย'#' จาก6ตัวให้เหลือ3ตัว
โดยเงื่อนไขการย่อก็คือ!
1. เราจะทำการจับคู่ตัวอักษรเป็น3คู่ คู่ละ2ตัว
ก็จะได้ตัวอักษรตัวที่1คู่กับตัวที่2  ,  3คู่กับ4  ,  5คู่กับ6
2. หากแต่ละคู่เป็นอักษรตัวเดียวกันเราก็สามารถย่อได้เลย
โดยการดึงอักษรแค่ตัวเดียวในแต่ละคู่มาเขียนเป็นโค้ดสีเรียงกัน3ตัวตามลำดับ
EX  โค้ดสี #112233

จะเห็นว่าแต่ละคู่มีอักษรหรือเลขที่เหมือนกัน ทีนี้เราก็ดึงอักษรออกมาย่อกันเลย
ผลออกมาก็จะย่อได้แบบนี้  >> #123 <<
แล้วโค้ดแบบไหนที่เราไม่สามารถย่อได้? 
มีมากมายครับผมม นั่นก็คือโค้ดที่ตัวที่1กับ2 , 3กับ4 , 5กับ6 ไม่เหมือนกันนั่นเอง
เช่น โค้ดสี #123456  #112344  #115599
แล้วเวลาเขียนเราจะเขียนโค้ดกลุ่มนี้ยังไง? ง่ายๆเลยก็คือเขียน#แล้วตามด้วยอักษร6ตัวเหมือนเดิมครัชผม

                                                                                                                                              

แบบที่ 2  - โค้ดสีRGB
โค้ดสีแบบนี้ก็อาจจะได้เห็นกันมั่งแต่ก็ไม่บ่อยเท่าแบบแรก
เนื่องจากลำบากในการจำและการพิมพ์ มาดูหน้าตาโค้ดสีแบบนี้กันเลย
rgb(255,255,255)    |   rgb(0,0,0)  |   rgb(108,123,139)

การใช้โค้ดสีแบบนี้ประกอบไปด้วย
1.คำว่าrgb
2.เปิดวงเล็บ
3.ตัวเลขสามหลัก3ชุด โดยแต่ละชุดต้องคั่นด้วย ','
4.ปิดวงเล็บ
สามารถหาตัวอย่างโค้ดสีได้ที่นี่

EX เช่นการตั้งค่ากล่องข้างล่างนี่ให้เป็น rgb(108,123,139)
ก็จะได้เป็น .box2{background:rgb(108,123,139)!important;}

 

                                                                                                                                              

แบบที่ 3  - Name
การกำหนดรหัสสีแบบนี้ส่วนใหญ่เราจะไม่ค่อยเห็นกัน
เพราะต้องกำหนดเป็นชื่อเฉพาะของแต่ละสี ซึ่งมันยุ่งยากมากครัช5555
มาดูหน้าตาของการกำหนดรหัสสีแบบนี้กันเลย
DarkGreen | MediumVioletRed |  DarkTurquoise
จะเห็นได้ว่าโค้ดสีแบบนี้เราจะใส่แค่ชื่อของโค้ดสีนั้นๆอย่างเดียวเลย
ซึ่งต้องระวังมากหากสะกดคำผิดโค้ดก็จะไม่แสดงผล
สามารถหาตัวอย่างโค้ดสีได้ที่นี่


EX  เราจะมากำหนดรหัสสีของกล่องนี้ด้วยโค้ดเนมกัน ให้เป็นสี MediumVioletRed 
ก็จะได้เป็น .box3{background:MediumVioletRed!important;}

 

                                                                                                                                              



ถ่าแด้ม
ตอนนี้เราก็รู้จักหน้าตาของรหัสสี3แบบไปเรียบร้อยแล้ววว
เราก็สามารถนำรหัสสีนี้ไปประยุกต์ใช้กับการกำหนดสไตล์ต่างๆได้
ไม่ว่าจะเป็น พื้นหลัง ไฮไลต์ สีตัวอักษร สีขอบ สีเงา และอื่นๆได้อีกมากมายย

ใครที่สงสัยเกี่ยวกับการกำหนดรหัสสีต่างๆหรือต้องการสอบถามปัญหาอะไร
สามารถเม้นไว้ข้างล่างได้เลยครับผม หรือสามารถสอบถามได้ที่ไอดีของผมได้เลยครัช

รบกวนเม้น หรือโหวตเป็นกำลังใจให้กันหน่อยนะครับ
สามารถแอดเฟบกดติดตามกันไว้เผื่อบค.อัพเดทจะได้เห็นได้เลยย