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

designil

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




designil

designil

Front-end & WordPress Developer ที่ชอบอ่านบทความใหม่ ๆ ตลอดเวลา ชอบ Interactive เป็นชีวิตจิตใจ มีความฝันอยากทำ HTML5 Game ดี ๆ ออกมาสักเกม เขียน HTML / CSS / JS เป็นงานหลัก PHP เป็นงานเสริม
บทความทั้งหมด

2 Responses

  1. เป็น ul li เหมือนกันน่ะครับ เลยเป็นกล่องแบบเดียวกัน

    พอดีว่ากล่อง quote ในธีมนี้ยังไม่มี styling เลยใส่ไว้ใน ul ที่ style ให้เหมือนกล่องแทน จะได้ดูง่ายครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

Related posts