[CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)

จริง ๆ แล้ว CSS3 ก็ออกมาได้สักพักนึงแล้วครับ แต่ด้วยความที่ต้องอัพเดทเว็บบราวเซอร์ของคุณให้เป็นเวอร์ชั่นใหม่ล่าสุดก่อน ถึงจะเรนเดอร์ CSS3 ได้ (เช่น Mozilla Firefox เวอร์ชั่น 3.6+) เลยยังไม่ค่อยได้รับความนิยมเท่าที่ควรในเว็บไซด์ส่วนใหญ่ครับ และเหตุผลอีกอย่างนึงก็คือคนส่วนใหญ่อาจคิดว่า CSS3 น่าจะใช้ยาก แต่ความจริงแล้วมันก็เป็น CSS เดิมที่เพิ่มฟังก์ชั่นใหม่ ๆ เข้ามาเท่านั้นเองครับ

พอดีผมไปเจอบทความหนึ่งจาก WebdesignerWall ซึ่งสรุปเกี่ยวกับพื้นฐานของ CSS3 ไว้ได้เข้าใจง่ายดีมากครับ เลยแปลบางส่วนมาให้ได้อ่านกัน สำหรับใครที่ยังไม่เชี่ยวชาญพื้นฐาน CSS มากเท่าไร แนะนำให้ไปอ่าน [CSS Tutorial สำหรับมือใหม่] เทคนิค CSS ที่ฉันน่าจะรู้ให้เร็วกว่านี้! [English] กันก่อนครับผม (ยังเป็นภาษาอังกฤษอยู่นะครับ เร็ว ๆ นี้จะแปลเป็นภาษาไทยมาให้ได้อ่านกันครับ)

มาดูกันเลยครับว่า CSS3 มีอะไรใหม่ ๆ บ้าง

RGBA

ปกติน่าจะรู้จัก RGB กันใช่มั้ยครับ เป็นโหมดสีที่ใช้ในงานกราฟฟิกส่วนใหญ่บนคอมพิวเตอร์ ซึ่งสร้างสีโดยประกอบสีจากความแตกต่างในค่า R (Red สีแดง) G (Green สีเขียว) และ B (Blue สีน้ำเงิน) ครับ ทีนี้ใน CSS3 จะมีค่า A เพิ่มขึ้นมาให้ใช้กัน นั่นคือค่า Alpha ครับ

ค่า Alpha นี่พูดให้เข้าใจง่าย ๆ จะใช้อีกคำ คือ Transparency หรือ ค่าความโปร่งใส นั่นเอง โดยแบ่งเป็นค่า

• 0 = โปร่งใสจนมองไม่เห็นอะไรเลย
• 1 = ทึบแสง เห็นทุกอย่าง

ซึ่งค่านี้เราสามารถใส่เป็นทศนิยมได้ ตัวอย่างเช่น:

• background: rgba(255, 255, 255, .5);

จะเห็นว่าผมใส่ .5 ในส่วนของ Alpha ซึ่งจะทำให้สีพื้นหลังใส 50% ครับ

ถ้าเห็นตัวหนังสือตัวนี้ใส ๆ แปลว่าบราวเซอร์คุณรองรับ CSS3 (ไม่งั้นจะเห็นสีดำสนิท)

ฟังก์ชั่น RGBA นี่สามารถใช้ได้ในทุกที่ที่ใช้ RGB ได้ครับ เช่น border, background, outline, etc.

Text Shadow

ต่อไปเป็นความสามารถในการใส่เงาให้ตัวอักษรครับ ใช้ง่าย ๆ แบบนี้เลยครับ:

• text-shadow: (ระยะแกนตั้ง X) (ระยะแกนนอน Y) (ความเบลอ) (สีเงา);
• Example: text-shadow: 2px 2px 3px #000000;

อักษรเงาเป็นแบบนี้ครับ (ถ้าบราวเซอร์เรนเดอร์ CSS3 ได้จะเห็นครับ)

ซึ่ง ระยะแกนตั้ง X กับ ระยะแกนนอน Y นี่ถ้าเป็นบวก เงาจะไปทางด้านขวา-ล่าง แต่ถ้าเป็นค่าติดลบ เงาจะไปทางด้านซ้าย-บน ครับผม และเราสามารถใช้ RGBA ในส่วน สีเงา ได้ด้วยครับ

นอกจากนั้นยังกำหนดเงาได้มากกว่า 1 เงาได้ครับ เช่นตัวอย่างจากเว็บไซด์ WebdesignerWall อันนี้:

ทดสอบตัวอักษรแบบยุบลงไป

ใช้โค้ดนี้ครับ

• text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #000000;

จะเห็นว่าใช้เครื่องหมายคอมมา (,) เพื่อแยกการเซ็ตค่าของเงาแต่ละอันครับผม

>> คลิกที่นี่เพื่ออ่านบทความ สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!! <<

สำหรับตอนที่ 1 จะสอน 2 ฟังก์ชั่นนี้ก่อนครับ ใครลองเอาไปใช้แล้วเจอเทคนิคดี ๆ ยังไงก็ลองเอามาแบ่งปันกันครับ ถ้าชอบบทความนี้ก็กดดาว หรือทิ้งคอมเม้นท์ไว้หน่อยครับ ตอบทุกคอมเม้นท์ครับ

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