[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. krapalm.com

    ดูทีแรกผมงงๆ นึกว่า Code ใน box เป็น บทความน่าสนใจอื่น ๆ ซะอีก Box มันเหมือนกันมาก

  2. เว็บดีไซน์นิล

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

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

  3. LuviKunG

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

    • DesignIL

      เท่าที่ทดสอบจนถึงตอนนี้ หมาไฟก็ยังไม่เอาโค้ดธรรมดาครับ T^T

  4. NISMO

    ขอถามหน่อยคับ แล้ว Editor ที่เราใช้ๆกันเช่น Dream,Editplus , มัน็เขียนได้ปรกติใช่เป่า

    • DesignIL

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

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


Post a new comment