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

ใครยังไม่ได้อ่านตอนแรก สามารถกลับไปอ่านบทความสอนใช้ CSS3 เบื้องต้น พร้อมโค้ดตัวอย่าง (ตอน 1) ได้เลยครับ แต่ไม่จำเป็นต้องอ่านตอน 1 ก่อนนะครับ อ่านตอนไหนก่อนก็ได้ ต้นฉบับภาษาอังกฤษของบทความนี้อยู่ที่ WebdesignerWall ครับ

ใส่กรอบโค้งในเว็บดีไซน์ด้วย 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 เบื้องต้น ก็จบลงเพียงเท่านี้ครับ ชอบไม่ชอบยังไงบอกกันได้เลยครับ หรืออยากให้นำบทความเกี่ยวกับอะไรมาเสนอ ก็โพสคอมเม้นท์ไว้เลยครับ ตอบทุกคอมเม้นท์ครับ!