โรงเรียน Web Design ทำเว็บ Mac Final cut Pro Graphic design

CSS3 กับ ฟังก์ชั่นใหม่ที่น่าสนใจ (1)

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

ฟังก์ชั่นใหม่ที่เพิ่มเติมเข้ามา

RGBA

Code : background: rgba(R, G, B, A);

RGB เป็นหมวดสีที่ใช้กันในงานกราฟฟิกแต่เพิ่ม A เข้ามา ซึ่ง A นี้ก็คือ Alpha หรือก็คือ Transparency หรือ ค่าความโปร่งใส นั่นเองครับ โดยค่าของความโปร่งแสงมีช่วงอยู่ที่ 0 ถึง 1 ซึ่ง
0 คือ โปร่งใสจนมองไม่เห็นอะไรเลย
1 คือ เห็นปกติ ไม่มีความโปร่งใส
ซึ่งเราสามารถตั้งค่าความโปร่งใสเป็นจุดทศนิยมได้ครับ เช่น

background-color: rgba(255, 120, 100, .7);
color: rgba(255, 120, 100, .7);

ตัวอย่างครับ

ถ้าเห็นข้อความตัวนี้ใส ๆ แสดงว่า Browser ที่คุณใช้อยู่รองรับ CSS3 ครับ

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

Text Shadow

การใส่เงาให้ตัวอักษร เป็นการเพิ่มเงาในแนวแกน x และ แกน y ให้กับข้อความของเรา

Code : text-shadow: (เงาในแกนตั้ง X) (เงาในแกนนอน Y) (ความเบลอ) (สีเงา);

เ่่ช่น text-shadow: 3px 3px 4px #999999;

ตัวอย่างครับ

ถ้าเห็นข้อความมีเงา แสดงว่า Browser ที่คุณใช้อยู่รองรับ CSS3 ครับ

Tags: CSS, CSS3, โรงเรียนสอนกราฟฟิค