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

Basic CSS3 Tutorial for Beginners

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







There are 10 comments

Add yours
  1. เว็บดีไซน์นิล

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

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

  2. LuviKunG

    วู้ว =_= ยากจริงๆแฮะ มันมีเรนเดอร์ให้เฉพาะด้วย หว้า – -*
    ทำไมหมาไฟมันไม่ฉลาดเอา code ธรรมดาน้า -3-

    • DesignIL

      ถ้าเป็น Text Editor อย่าง Editplus หรือ Notepad++ ก็ไม่มีปัญหาอยู่แล้วครับ

      ส่วน Dreamweaver นี่ก็เขียนโค้ด CSS3 ได้ตามปกติแหละครับ แต่ผมไม่แน่ใจว่าเวอร์ชั่นใหม่ (CS5) มี Auto-complete โค้ด CSS3 ให้ด้วยมั้ย


Post a new comment