สำหรับตอนแรก อ่านได้ที่นี่ครับ:
http://www.designil.com/basic-css3-code-examples-part-1.html 
สำหรับตอนสอง อ่านได้ที่นี่ครับ:
http://www.designil.com/basic-css3-code-examples-part-2.html แนะนำให้ตามไปอ่านในเว็บครับ เพราะมีตัวอย่างให้ดูด้วย พอดี BBCode ของเว็บบอร์ดมันเรนเดอร์ CSS ไม่ได้น่ะครับ
ใส่กรอบโค้งในเว็บดีไซน์ด้วย CSS3หลาย ๆ คนคงเบื่อกล่องเหลี่ยม ๆ จืด ๆ แล้วใช่มั้ยครับ CSS3 มีการเพิ่มการทำขอบกล่องให้โค้งมน ซึ่งนอกจากเอาไปใช้กับกล่องทั่ว ๆ ไป ยังนิยมเอาไปใช้ในการทำลิงค์ให้น่าสนใจด้วยครับ
ชื่อของ Property ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้งครับ ยิ่งค่านี้เยอะยิ่งโค้งมาก อย่างไรก็ตาม ในบราวเซอร์ Mozilla Firefox กับ Safari 3 (บราวเซอร์ที่ติดตั้งมากับ Mac OS ครับ เวอร์ชั่นในวินโดว์ไม่ได้รับความนิยมมากนัก) มีการใส่ฟังก์ชั่นที่ทำงานเหมือนอันนี้เข้าไปแล้ว แต่ใช้ชื่อ Property ที่ต่างกันครับ
การที่จะทำให้กรอบโค้งของเราเรนเดอร์ได้ทุก บราวเซอร์ (ยกเว้นบราวเซอร์เก่ามาก ๆ อย่าง IE6) ก็เลยต้องเรียกใช้ Property ของทุกบราวเซอร์มันซะเลย
โค้ดจะออกมาประมาณนี้ครับ:
* border-radius: 5px;
* -webkit-border-radius: 5px;
* -moz-border-radius: 5px;
โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox หมาไฟของเรานั่นเอง
ตัวอย่างการทำกรอบโค้ง << ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ
ซึ่งเทคนิคในการใช้กรอบโค้งอันนี้ นอกจากจะกำหนดแบบค่าเดียวใช้ทุกมุม ยังกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย โดยใช้โค้ดดังนี้ครับ
สำหรับ -webkit-:
* -webkit-border-top-left-radius: 5px;
* -webkit-border-top-right-radius: 10px;
* -webkit-border-bottom-left-radius: 15px;
* -webkit-border-bottom-right-radius: 20px;
โดยจะใช้คำบอกตำแหน่งมุมที่จะเซ็ตค่า เช่น -top-left- สำหรับมุมบนซ้ายครับ
สำหรับ -moz-:
* -moz-border-radius-topleft: 5px;
* -moz-border-radius-topright: 10px;
* -moz-border-radius-bottomleft: 15px;
* -moz-border-radius-bottomright: 20px;
สังเกตได้ว่า -moz- กับ -webkit- จะแตกต่างกันนิดเดียวครับ ซึ่งโค้ดทั้งสองอันนี้จะแสดงผลดังตัวอย่างด้านล่างเลยครับ:
ตัวอย่างการเซ็ตกรอบให้โค้งไม่เท่ากัน
<< ถ้าใช้บราวเซอร์ที่รองรับจะเห็นครับ
ใส่กรอบให้กล่องในเว็บดีไซน์ด้วย Box Shadowอันนี้แทบจะไม่ต่างจาก text-shadow ที่เขียนถึงในตอนที่แล้วเลยครับ แต่ความแตกต่างคือถ้าจะใช้ความสามารถนี้ เราต้องเขียน -webkit- กับ -moz- ทั้งสองอันครับ โดยโค้ดหน้าตาจะเป็นแบบนี้:
* -webkit-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);
* -moz-box-shadow: (ระยะ X) (ระยะ Y) (ความยาวเงา) (สีเงา);
และสามารถใส่ได้หลายเงาโดยใช้วิธีเหมือนกับ text-shadow เลยครับ ถ้าจำวิธีไม่ได้ลองกลับไปอ่าน ตอนที่แล้ว ใหม่นะครับ
ลองมาดูตัวอย่างการใช้กันนะครับ โดยใช้โค้ดนี้:
* -webkit-box-shadow: 2px 2px 3px #000;
* -moz-box-shadow: 2px 2px 3px #000;
จะออกมาเป็นแบบกล่องด้านล่างครับ:
กล่องทดสอบเงา CSS3
สำหรับบทความสอน CSS3 เบื้องต้น ก็จบลงเพียงเท่านี้ครับ ชอบไม่ชอบยังไงบอกกันได้เลยครับ หรืออยากให้นำบทความเกี่ยวกับอะไรมาเสนอ ก็โพสคอมเม้นท์ไว้เลยครับ ตอบทุกคอมเม้นท์ครับ!
พัฒนาเว็บไซต์
