การจัดการสี (Color & Background)

ในบทนี้ เราจะมาเรียนรู้วิธีการจัดการสีสันให้กับเว็บไซต์ของเราด้วย CSS ซึ่งเป็นส่วนสำคัญในการทำให้เว็บไซต์ดูน่าสนใจและสื่อถึงความเป็นตัวตนของแบรนด์หรือเนื้อหาที่เราต้องการนำเสนอ เราจะครอบคลุมทั้งการกำหนดสีให้กับตัวอักษรและพื้นหลัง รวมถึงการใช้รูปภาพเป็นพื้นหลังด้วย

การกำหนดสี (Color)

CSS มีหลายวิธีในการกำหนดสีให้กับ Element ต่างๆ ในเว็บไซต์ของเรา ซึ่งแต่ละวิธีก็มีข้อดีข้อเสียแตกต่างกันไป เราจะมาดูกันทีละวิธีครับ

1. Color Names (ชื่อสี)

วิธีที่ง่ายที่สุดในการกำหนดสีคือการใช้ชื่อสีโดยตรง เช่น red, blue, green, black, white เป็นต้น CSS รองรับชื่อสีมาตรฐานจำนวนมาก ทำให้เราสามารถเลือกใช้สีที่ต้องการได้อย่างรวดเร็ว

p {
  color: red;
}

h1 {
  color: blue;
}

ในตัวอย่างนี้ เรากำหนดให้ข้อความใน Paragraph (<p>) เป็นสีแดง และ Heading 1 (<h1>) เป็นสีน้ำเงิน

2. Hex Codes (รหัสฐานสิบหก)

Hex codes เป็นวิธีที่นิยมใช้กันมากในการกำหนดสีใน CSS โดยใช้รหัสเลขฐานสิบหก (Hexadecimal) ซึ่งประกอบด้วยเครื่องหมาย # ตามด้วยตัวเลขหรือตัวอักษร 6 ตัว (0-9 และ A-F) แต่ละคู่แทนค่าสีแดง (Red), สีเขียว (Green) และสีน้ำเงิน (Blue) หรือที่เรียกว่า RGB

p {
  color: #FF0000; /* สีแดง */
}

h1 {
  color: #0000FF; /* สีน้ำเงิน */
}

h2 {
  color: #336699; /* สีน้ำเงินเฉดหนึ่ง */
}

Hex codes มีข้อดีคือสามารถระบุสีได้อย่างละเอียดและแม่นยำ ทำให้เราได้สีที่ต้องการอย่างแน่นอน นอกจากนี้ ยังมีเครื่องมือมากมายที่ช่วยให้เราสามารถเลือกสีและแปลงเป็น Hex code ได้อย่างง่ายดาย

3. RGB (Red, Green, Blue)

RGB เป็นอีกวิธีหนึ่งในการกำหนดสีโดยใช้ค่าของสีแดง (Red), สีเขียว (Green) และสีน้ำเงิน (Blue) แต่ละค่ามีตั้งแต่ 0 ถึง 255 โดย rgb(0, 0, 0) คือสีดำ และ rgb(255, 255, 255) คือสีขาว

p {
  color: rgb(255, 0, 0); /* สีแดง */
}

h1 {
  color: rgb(0, 0, 255); /* สีน้ำเงิน */
}

h2 {
  color: rgb(51, 102, 153); /* สีน้ำเงินเฉดหนึ่ง */
}

RGB ช่วยให้เราสามารถควบคุมความเข้มของแต่ละสีได้อย่างอิสระ ทำให้เราสามารถสร้างสีที่ต้องการได้อย่างหลากหลาย

4. RGBA (Red, Green, Blue, Alpha)

RGBA เป็นรูปแบบที่ต่อยอดมาจาก RGB โดยเพิ่มค่า Alpha (ความโปร่งแสง) เข้ามา ทำให้เราสามารถกำหนดความโปร่งแสงของสีได้ ค่า Alpha มีตั้งแต่ 0 (โปร่งใสสมบูรณ์) ถึง 1 (ทึบแสงสมบูรณ์)

p {
  color: rgba(255, 0, 0, 0.5); /* สีแดงโปร่งแสง 50% */
}

h1 {
  color: rgba(0, 0, 255, 0.8); /* สีน้ำเงินโปร่งแสง 80% */
}

RGBA มีประโยชน์อย่างมากในการสร้างเอฟเฟกต์ที่ซับซ้อน เช่น การวางข้อความบนพื้นหลังที่มีรูปภาพ โดยให้ข้อความมีความโปร่งแสงเล็กน้อยเพื่อให้เห็นพื้นหลังได้ชัดเจน

การกำหนดสีพื้นหลัง (Background Color)

นอกจากการกำหนดสีให้กับตัวอักษรแล้ว เรายังสามารถกำหนดสีพื้นหลังให้กับ Element ต่างๆ ได้ด้วย Property background-color

body {
  background-color: #f0f0f0; /* สีเทาอ่อน */
}

div {
  background-color: rgba(0, 0, 0, 0.1); /* สีดำโปร่งแสง 10% */
}

ในตัวอย่างนี้ เรากำหนดให้พื้นหลังของ <body> เป็นสีเทาอ่อน และพื้นหลังของ <div> เป็นสีดำโปร่งแสง 10%

การใช้รูปภาพเป็นพื้นหลัง (Background Image)

CSS ยังรองรับการใช้รูปภาพเป็นพื้นหลังด้วย Property background-image โดยเราสามารถกำหนด URL ของรูปภาพที่ต้องการใช้เป็นพื้นหลังได้

body {
  background-image: url("images/background.jpg");
}

ในตัวอย่างนี้ เรากำหนดให้รูปภาพ background.jpg ที่อยู่ใน Folder images เป็นพื้นหลังของ <body>

นอกจากนี้ เรายังสามารถควบคุมการแสดงผลของรูปภาพพื้นหลังได้ด้วย Properties ต่างๆ เช่น:

background-repeat: กำหนดว่าจะให้รูปภาพพื้นหลังแสดงซ้ำหรือไม่ (repeat, no-repeat, repeat-x, repeat-y)
background-position: กำหนดตำแหน่งของรูปภาพพื้นหลัง (top left, center center, bottom right)
background-size: กำหนดขนาดของรูปภาพพื้นหลัง (auto, cover, contain)

body {
  background-image: url("images/background.jpg");
  background-repeat: no-repeat; /* ไม่แสดงซ้ำ */
  background-position: center center; /* จัดกึ่งกลาง */
  background-size: cover; /* ขยายให้เต็มพื้นที่ */
}

ในตัวอย่างนี้ เรากำหนดให้รูปภาพพื้นหลังไม่แสดงซ้ำ จัดกึ่งกลาง และขยายให้เต็มพื้นที่ของ <body>

การใช้รูปภาพเป็นพื้นหลังสามารถเพิ่มความน่าสนใจและความสวยงามให้กับเว็บไซต์ของเราได้อย่างมาก แต่ควรระมัดระวังเรื่องขนาดของรูปภาพ เพื่อไม่ให้เว็บไซต์โหลดช้าเกินไป

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการจัดการสีและพื้นหลังด้วย CSS ซึ่งเป็นส่วนสำคัญในการทำให้เว็บไซต์ดูน่าสนใจและสื่อถึงความเป็นตัวตนของเรา เราได้เรียนรู้การกำหนดสีด้วย Color names, Hex codes, RGB และ RGBA รวมถึงการใช้รูปภาพเป็นพื้นหลัง และการควบคุมการแสดงผลของรูปภาพพื้นหลังด้วย Properties ต่างๆ ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการปรับแต่ง Font เพื่อให้ข้อความในเว็บไซต์ของเราดูสวยงามและอ่านง่ายยิ่งขึ้น