CSS3 Color และ Opacity (CSS3 Color Module)

หลังจากที่ห่างหายไปกับการพูดถึงเรื่องของ Module ที่เกี่ยวข้องโดยตรงกับ Properties และ Values ของ CSS กันไปเป็นระยะเวลานานพอสมควร อาจเป็นเพราะผมยังมองว่าเรายังเข้าใจหลักการเขียน Selectors กันแบบถูกน้อย ถูกน้อยมากกันอยู่ จึงมัววุ่นอยู่แต่กับ Selector ซึ่งก็ยังพูดกันไม่หมดอยู่ดี แต่การกระโดดไกลแบบเขย่ง ก้าว กระโดดของ User Agents ทั้งหลาย ทำให้ผมไม่สามารถรีรอที่จะพูดถึงความสามารถต่าง ต่าง ที่เป็นส่วนประกอบ (Property) ของ CSS3 ได้อีกต่อไป

ขอเริ่มกันที่ CSS3 Color Module นะครับ เพราะผมเห็นว่า Module นี้ User Agents ที่เป็น Browser ทั้งหลายนั้นได้รองรับกันหลายเจ้าพอสมควร และอีกอย่าง เพื่อต้อนรับการมาถึงของ IE9 ที่กำลังเดินทางมาจากกาแล๊กซี่อันไกลโพ้น

แรกเริ่มเดิมทีนั้น เราคุ้นเคยกับรหัสอักขระหรือเลขที่มี 3 หรือ  6 ตัว ซึ่งทำหน้าที่แสดงผลแทนค่าสี RGB เช่น p {color: #fff;}  หรือ h2 {color: #ff9900;} หรือ HTML Keywords เช่น div {color: black;} โดยที่เราไม่มีโอกาสได้ใช้ RGB เลย ซึ่ง RGB ก็มีให้ใช้มานานนม แต่บราวเซอร์ที่ คุณก็รู้ว่าเป็นบราวเซอร์เจ้าไหน นั้นไม่รองรับสักที เราจึงไม่มีโอกาสได้ใช้ แต่เมื่อตอนนี้ มี แผนปรองดอง โผล่เข้ามา บราวเซอร์เจ้านั้นก็เหมือนจะน้อมรับ ในเวอร์ชั่นที่ 9 นี้ เราจึงอาจจะมีโอกาสได้สัมผัสรสอันหอมหวานของเสรีภาพที่จะได้ใช้ Color Module ของ CSS3 กันอย่างเท่าเทียมกัน

ว่ากันถึง CSS3 Color Module แล้วนั้น ผมขอขึ้นที่เรื่องของ Opacity ก่อน ซึ่งได้ถูกรวมเอาไว้ใน Module เดียวกันนี้

Opacity คือค่าแสดงความทึบแสง มีค่าจาก 0-1 ค่า 0 คือ ไม่ทึบเลย (โปร่งใส) 1 คือ ทึบที่สุด (ไม่เห็นอะไรที่อยู่ด้านหลัง) การใช้เราสามารถใช้ในรูปแบบจุดทศนิยม เช่น div:not(:hover) {opacity: 0.5} หมายความว่า div ที่ไม่ได้อยู่ในสถานะถูกเม้าส์ over อยู่นั้นให้มีค่าทึบแสง 0.5 หรือ 50% ของ 1.0

โดย opacity นั้นจะกระทำกับ ทั้งลูกและหลานของของที่ถูกครอบอยู่ หรือ โปร่งแสงกันทั้งครอบครัวนั่นเลยทีเดียว หรือ เราสั่ง บ้านหลังหนึ่งให้โปร่งแสง โต๊ะ เก้าอี้ โถชักโครก ที่อยู่ในบ้าน ก็จะได้รับค่าโปร่งแสงตามไปด้วย เช่น

  
  div[class|="มีอิทธิพล"] {
                background-color: black;
                height: 100px;
                margin-bottom: 15px;
            }
            div[class$="ปานกลาง"] {
                opacity: .60;
            }
            div[class$="น้อย"] {
                opacity: .20;
            }
  

<div class="มีอิทธิพล-มาก">
  <h1>มีอิทธิพล มาก</h1> 
</div>
<div class="มีอิทธิพล-ปานกลาง">
   <h1>มีอิทธิพล ปานกลาง</h1>
   <p>opacity: .60;</p>
</div>
<div class="มีอิทธิพล-น้อย">
  <h1>มีอิทธิพล น้อย</h1>
  <p>opacity: .20;</p>
</div> 

ดูตัวอย่าง CSS3 Color Module RGB ครับ

จากตัวอย่างจะเป็นได้ว่าเมื่อใส่ Opacity เข้าไปแล้ว จะทำให้กล่อง div ที่มีค่าความโปร่งแสงนั้นแตกต่างกันไป

ผ่านไปกับเรื่อง Opacity

มาถึงเรื่อง ค่าสีกันต่อเลยนะครับ สีจะทนได้หรือทนไม่ได้ นั่นมันเรื่องของสี ในที่นี้ผมจะกล่าวถึง 2 สี ที่แตกต่างกันในความเหมือน คือ RGB(A) และ HSL(A)

RGB (เริ่มแรกใช้กับ จอ CRT (Red, Green, Blue)) คือสีที่ยังไม่ผสม เรามาผสมเองใน ค่าของ CSS แต่ HSL คือสีที่ผสมมาแล้ว ตามลักษณะทางสมการทางคณิตศาสตร์ โดยที่ H เป็นค่าองศาของสี (ตามวงกลมสี) มี S (saturation) เป็นความเข้ม และ L (lightness) เป็นความสว่าง HSL ถูกพัฒนาขึ้นเมื่อปี 1970 เพื่อใช้เป็นส่วนประกอบในโปรแกรมตกแต่งภาพ อ่านเพิ่มเติมได้ที่ http://en.wikipedia.org/wiki/HSL_and_HSV

จากก่อนหน้านี้เราใช้ รหัสอักขระหรือเลขที่มี 3 หรือ  6 ตัว หรือ HTML Keywords แทนการแสดงผลของสี ข้อดีคือ สั้น กระชับ ซอยบ่อย บ่อยได้ ช้อเสียคือ ปรับแต่งความเข้ม หรือแก้ไขค่าความต่างของสียาก เพราะเราต้องจำรหัสที่ใช้แสดงแทนทั้งหมดให้ได้ แต่เมื่อมาเป็น RGB เราสามารถเริ่มจาก Red ไปผสม Green ไปผสม Blue ตามปริมาณที่เหมาะสมได้เลย ถ้าใครเคยเป็นช่างทาสีมาก่อนน่าจะเห็นภาพดีมากมาย โดยที่ค่าจะอยู่ระหว่าง 0-255 ส่วน HSL เราก็จำแค่ องศาตั้งต้นของค่าสี 3 ตัว คือ สีแดงเริ่มต้นที่ 0 องศา สีเขียว เริ่มที่ 120 องศา และสีน้ำเงิน เริ่มต้นที่ 240 องศา อยากได้สีแบบไหนก็หมุนวนเอาตามจานสี ที่เหลือเราก็ไปปรับ ความเข้ม (S) และ ค่าแสง (L) กันอีกรอบ

ต่อกันที่ ตัว A (Alpha) ที่ห้อยอยู่ด้านหลังของ RGB หรือ HSL ซึ่งเมื่อใส่เข้ามา จะกลายเป็น rgba หรือ hsla ซึ่งค่า a นั้นจะเป็น ค่าโปร่งแสงของ Element ที่ถูงสั่งงานเท่านั้น ไม่รวมเอาลูกหลานเข้าไปด้วย

ดูตัวอย่าง CSS3 Color Module RGB ครับ (อย่าลืม View source ด้วยนะครับ)

จากตัวอย่าง โลโก้ ของ ช่อง 7 สี ที่ผมพยายามนั่งเขียน จนมึนอยู่นั้น คงเห็นภาพการใช้งานเรื่อง RGBa แล้วนะครับ ผมขอค้างเรื่อง transform เอาไว้ก่อนนะครับ ส่วน border-radius นั้นน่าจะพอเข้าใจกันไปแล้ว มาถึง HSLa ผมคงไม่ต้องอธิบายอะไรเพิ่มเติมมากมาย ผมเขียนตัวอย่างไว้แล้ว สามารถเข้าไปดูตัวอย่างและสังเกตจาก Source Code ได้เลย โดยตอนนี้ IE ที่เวอร์ชั่น น้อยกว่า 9 ยังคงใช้ไม่ได้

ดูตัวอย่างการเขียน HSLa ของ CSS3 ครับ

ความเหมาะสมและการแบ่งแยกประเภทการใช้งาน

เราจะรู้ได้อย่างไรว่าเมื่อไหร่เราควรใช้ อักขระ 3 หรือ 6 ตัว หรือ เมื่อไหร่เราจะใช้ RGB หรือ เราจะเพิ่ม A (Alpha) ให้กับ RGB เป็น RGBA หรือ เมื่อไหร่เราจะใช้ HSL หรือ HSLA คำถามเหล่านี้ ผมอยากให้เรา เรา ท่าน ท่าน คนทำงาน คิด แยกแยะ หาความเหมาะสมแล้วทดลองด้วยตัวเองจะเห็นผลดีที่สุด เพราะงานแต่ละชิ้นแตกต่างกันในรายละเอียด แค่มองหาข้อดี ข้อด้อยในรูปแบบการใช้สีทั้งสามประเภทแล้วมองดูตัวงานของเรา ประสบการณ์จะสถิตกับเราตลอดไป

มีความสุขกับการใช้ชีวิตครับ