CSS Gradient แห่งสี่โลก

เรื่องแอบน่าเบื่อเล็กๆอย่างหนึ่งเวลาทำเว็บก็คืออารมณ์ที่อยากจะใช้พื้นหลังแบบไล่สี (หรือ gradient) ซึ่งหลายคน (ผมก็เคยเป็น) คงเลี่ยงไปใช้โปรแกรมอย่าง Photoshop ในการทำพื้นหลังแบบไล่สี แล้วค่อยเอามาใส่ลงในหน้าเว็บ ซึ่งวิธีนี้ ผลลัพท์คือหน้าเว็บหนักขึ้นจากภาพที่เอามาทำพื้นหลัง แน่นอน

วิธีแก้ปัญหานี้ง่ายมากครับ หันไปใช้ CSS ซะ ซึ่งเบราเซอร์หลักทั้ง 4 ค่าย (Opera, IE, Firefox, Chrome) ต่างรองรับการไล่สีด้วย CSS กันทั้งสิ้น

แต่เรื่องน่าปวดตับมันอยู่ที่ทั้งสี่ค่าย ใช้ CSS ต่างกันหมดเลย…

ความเข้ากันได้กับเบราเซอร์

แน่นอนว่าคงเกิดคำถามกันว่ามันใช้กับเบราเซอร์อะไรรุ่นอะไรได้บ้าง ก็ตามนี้ครับ

• Opera 11.10 ขึ้นไป
• Firefox 3.6 ขึ้นไป
• Chrome และ Safari 4 ขึ้นไป
• และ Internet Explorer 5.5 ขึ้นไป (ถูกต้องครับ IE5.5 ที่มากับ Windows Me!)

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

Opera และ Firefox

สองรายนี้ใช้โค๊ดที่คล้ายกันมากครับ

Opera:

background-image: -o-linear-gradient(ทิศทาง, สีเริ่มต้น, สีจบ);

Firefox:

background-image: -moz-linear-gradient(ทิศทาง, สีเริ่มต้น, สีจบ);

ตรงส่วน ทิศทาง คือกำหนดว่าการไล่สีจะเริ่มที่จุดไหน (เช่น top, left, right, bottom หรือเป็นมุม เช่น top left หรือกำหนดเป็นองศาก็ได้ เช่น 35deg) ซึ่งถ้าไม่กำหนด ก็จะมีค่าเป็น top หรือไล่สีจากบนลงล่างโดยอัตโนมัติ

Chrome และ Safari

สองรายนี้ใช้โค๊ดเดียวกันเป๊ะครับ เนื่อจากทั้งคู่ใช้เอ็นจิ้นการแสดงผลเป็น webkit เหมือนกัน วิธีของ Chrome และ Safari ออกจะต่างไปจาก Opera และ Firefox อยู่บ้าง ดังนี้ครับ

background-image: -webkit-gradient(รูปแบบ, มุมเริ่มต้น, มุมสิ้นสุด, from(สีเริ่มต้น), to(สีจบ));

ตรงรูปแบบนี้เราสามารถเลือกได้ว่าเป็น linear (ไล่สีตรงๆ ธรรมดา) หรือแบบ radial (เป็นวงกลม) ซึ่งถ้าเป็นของ Opera และ Firefox ก็เปลี่ยนคำว่า linear เป็น radial ก็เสร็จครับ (แต่ใน Opera ยังใช้ radial ไม่ได้เรื่องนัก)

ส่วนจุดเริ่มต้นและจุดสิ้นสุด คือให้กำหนดว่าจะให้ไล่สีจากจุดไหนไปจุดไหน? โดยเราจะต้องกำหนดว่าจะให้ไล่จากมุมไหนไปมุมไหนครับ คือจะให้ไล่จากบนลงล่าง ก็กำหนดจุดเริ่มต้นเป็น left top และกำหนดจุดสิ้นสุดเป็น left bottom (ในขณะที่ Opera และ Firefox กำหนดแค่จุดเดียว แล้วมันจะไล่สีไปทิศทางตรงข้ามเองอัตโนมัติ แล้วกำหนดแค่ด้านเดียวก็ได้ ไม่ต้องใช้มุม)

Internet Explorer

ไอ้เนี่ย ใช้โค๊ดได้อินดี้จากชาวบ้านชาวช่องเขามากที่สุดครับ ไปดูหน้าตาของโค๊ดสำหรับ IE กัน

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=’สีเริ่มต้น’, endColorstr=’สีจบ’, gradientType=’รูปแบบ’);

ส่วนรูปแบบจะกำหนดเป็นตัวเลขครับ คือ 0 เป็นแบบ linear และ 1 เป็น radial (หากไม่กำหนด ก็จะได้แบบ linear โดยอัตโนมัติครับ)

ไล่สีสี่โลก

ก็คือการทำให้มันแสดงผลได้ครบทุกเบราเซอร์ ไม่ยากครับ เอาโค๊ดทั้งหมดมารวมกัน ประมาณนี้

#gradient {
background-image: -o-linear-gradient(top, #fafafa, #e1e1e1);
background-image: -moz-linear-gradient(top, #fafafa, #e1e1e1);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e1e1e1));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fafafa’, endColorstr=’#e1e1e1′);
}

ออกมาก็จะมีลักษณะประมาณนี้ครับ

ว่าด้วยเรื่องของสี

ปกติแล้ว เวลาเรากำหนดค่าสีคือเราจะใส่เป็นเลขฐาน 16 จำนวนหกหลัก เช่น #cacaca ใช่มั๊ยครับ อันที่จริงเราสามารถใส่ได้ถึง 8 หลัก ซึ่งอีกสองหลักที่เพิ่มเข้ามาคือค่า alpha หรือความโปร่ง… เอ่อ โปร่งแสงหรือโปร่งใส ผมก็เรียกไม่ถูกหรอกนะ

ผมไม่แน่ใจว่าใส่เลขฐาน 16 จำนวน 8 หลัก จะใช้ได้กับทุกเบราเซอร์หรือไม่ (เพิ่งนึกขึ้นได้ แต่ตอนนี้ก็ขี้เกียจเขียนโค๊ดทดสอบแล้ว) ก็เอาว่าไปลองกันเองนะครับ แต่ถ้าไม่ได้ ก็ใช่วิธีใส่เป็น rgba() ไปเลย

ปกติเวลาใส่สีธรรมดา นอกจากใช้ hex จำนวน 6 หลักแล้ว เรายังใช้ rpg(0,11,222) ได้อีกด้วย (ก็เลขฐานสิบ 0-255 นั่นแหละ) ซึ่งการกำหนก alpha นอกจากใช้ hex 8 หลักแล้ว ยังใช้ rgba ได้อีกเช่นกันครับ

การใส่ค่าของ RGBA เป็นดังนี้

rgba(red, green, blue, alpha)

ค่า red, green, และ blue นั้นใส่เป็น 0-255 ตามปกติครับ ส่วนค่า alpha นั้นมีค่าตั้งแต่ 0-1 (ก็กำหนด 0.2, 0.5 ไปก็ได้ ไม่มีใครว่า) พอออกมามันก็จะใสปิ๊งๆให้เรานั่นแหละ

 

หวังว่าคงพอเข้าใจกันนะครับ หากต้องการศึกษาเพิ่มเติม ก็ตามลิงค์ด้านล่างนี้เข้าไปได้เลยครับ

• CSS Gradient บน Opera
• CSS Gradient บน Firefox
• CSS gradient บน Chrome และ Safari
• CSS Gradient บน Internet Explorer

• Category: HTML & CSS
• Tag: css, gradient, webbrowser