CSS3 กับ ฟังก์ชั่นใหม่ที่น่าสนใจ (2)
กรอบโ้ค้งมน
CSS3 มีการเพิ่มการทำขอบกล่องให้โค้งมน ซึ่งนอกจากเอาไปใช้กับกล่องทั่ว ๆ ไป ยังนิยมเอาไปใช้ในการทำลิงค์ให้น่าสนใจด้วย ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้ง ซึ่งหากยิ่งค่านี้เยอะยิ่งโค้งมาก
โค้ดจะออกมาประมาณนี้ครับ border-radius: …px;
อย่างไรก็ตาม เพื่อให้ browser ต่างๆแสดงผลได้อย่างได้อย่างถูกต้องจึงการเขียนโค็ดดังกล่าวเพื่อรองรับกับ browser โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox
-moz-border-radius: 10px;
border-radius: 10px;
นอกจากนั้น ยังสามารถกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย
สำหรับ -webkit-:
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
สำหรับ -moz-:
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;
ซึ่งเรายังสามารถใส่สีให้กับกล่องโค้งมนของเราด้วยคำสั้ง background-color ได้ด้วยครับ
ตัวอย่างครับ
Box Shadow
หลักการทำงานของ Box Shadow ไม่ต่างจาก text-shadow เท่าไหร่ครับ แต่ความแตกต่างคือถ้าจะใช้ความสามารถนี้ เราต้องเขียน -webkit- กับ -moz- ทั้งสองอันด้วยครับ
โค้ดจะออกมาประมาณนี้ครับ box-shadow : (เงาในแกนตั้ง X) (เงาในแกนนอน Y) (ความเบลอ) (สีเงา);
-moz-box-shadow: 2px 2px 3px #000;
Twitter
Facebook