home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

บทเรียน CSS Colors: การใช้สีในเว็บไซต์

เมื่อพูดถึงการทำให้ UI โดดเด่น ไม่มีอะไรเทียบได้กับการเลือก color palette ที่เหมาะสม ด้วยบทเรียนนี้ คุณจะได้เรียนรู้ว่าการกำหนดสีให้กับ elements, fonts และทุกอย่างใน UI นั้นง่ายเพียงใด

ในการเพิ่มสี CSS มี color data type ซึ่งแสดงสีในรูปแบบมาตรฐาน Red, Green, Blue (RGB)

รูปแบบการเขียน color

มีหลายวิธีในการกำหนดสีด้วย CSS:

  • ใช้ keywords: พิมพ์เป็นสตริง เช่น 'red', 'white', 'yellow' หรือค่า hex เช่น #fff
  • ใช้ hexadecimal notation เช่น #fff
  • ใช้ functional notations rgb() หรือ rgba()
  • ใช้ HSL functions เช่น hsl() และ hsla()

การใช้ Keyword Identifiers

วิธีง่ายที่สุดในการเพิ่มสีให้ element ใดๆ คือการใช้ keyword attributes

โปรดทราบว่ามีรายละเอียดเฉพาะเรื่อง property ที่ใช้เพิ่มสี ขึ้นอยู่กับว่าจะเป็น background, text หรือ element สำหรับตัวอย่างเราจะใช้ปุ่ม ด้วย element ปุ่มนี้เรามี 2 ทางเลือกในการเพิ่มสี: ผ่าน property background-color หรือ color โดย color property จะเปลี่ยนสีข้อความ ส่วน background-color สำหรับพื้นหลัง มาเลือกปุ่มและเพิ่มสีกัน!

<button class="color">Color Me</button>

ง่ายใช่ไหม?

บทเรียน CSS Colors: การใช้สีในเว็บไซต์

ฟังก์ชัน rgba() และ hsl()

คุณเห็นแล้วว่าการใช้ keywords สำหรับสีทำงานอย่างไร สามารถอ้างอิง cheatsheet สี keyword ได้ แม้ keyword colors จะให้ตัวเลือกมาก แต่ก็มีข้อจำกัด

สี keyword หรือสีอื่นๆ เกือบทั้งหมด สามารถแสดงในรูปแบบ Hex RGB หรือ RGB decimal ได้ เช่น 'black' คือ #000000 หรือ 0,0,0 ใน decimal วิธีง่ายในการเพิ่ม RGB decimal คือใช้ฟังก์ชัน rgb() ค่าสูงสุดของแต่ละ decimal คือ 255 มาเปลี่ยน keyword colors เป็นสองรูปแบบใหม่นี้:

button.color { /* RGB and decimal */ color: #fff; background-color: rgb(210,105,30); }

สังเกตเห็นไหมว่า black มีตัวอักษรซ้ำกัน? ถ้าตัวอักษรเหมือนกันสามารถพิมพ์แค่ 3 ตัวแรกได้ כמוที่ทำกับ white ด้านบน สามารถเขียนเป็น #ffffff ได้อีกด้วย

อีกทางเลือกคือใช้ฟังก์ชัน hsl() HSL ย่อมาจาก hue, saturation, และ lightness Lightness แสดงเปอร์เซ็นต์จากสีขาว (100%) ถึงสีดำ (0%) Saturation เป็นเปอร์เซ็นต์ของสีเทา โดย 100% คือสีเทาเต็มรูปแบบ Hue แสดงองศา (0-360) ใน color wheel ของ RGB โดย 0 คือแดง 120 คือเขียว 240 คือน้ำเงิน รู้สึกซับซ้อนใช่ไหม 😊

Code editors เช่น Visual Studio มี color picker ให้เล่นได้ ลองพิมพ์ hsl() แล้ว hover ดู color picker จะโผล่ขึ้นมา

บทเรียน CSS Colors: การใช้สีในเว็บไซต์

ด้านซ้ายปรับ hue ได้ ส่วนแถบอีกสองแถบคือ saturation และ lightness ลองเล่นดูว่าสร้างสีสวยๆ ได้อะไรบ้าง HSL มีประโยชน์สำหรับ shades และสามารถปรับ saturation และ lightness ได้ บางคนชอบวิธีนี้เพราะความต้องการเฉพาะตัว

การปรับ Opacity ของสี

คุณอาจสังเกตว่า rgb และ hsl สามารถเขียนในรูป rgba() หรือ hsla() ได้ 'a' ย่อมาจาก alpha ซึ่งคือ transparency/opacity โดย 0 = โปร่งใส 1 = โปร่งแสงเต็มที่

การปรับ opacity ทำให้สีละเอียดขึ้น มา完成ปุ่มของเราโดยปรับ opacity:

button.color { color: #fff; background-color: rgba(210,105,30, 0.7); }

ด้วย opacity ข้อความอ่านง่ายขึ้นมาก!

บทเรียน CSS Colors: การใช้สีในเว็บไซต์