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

[woratana]

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

[loveloveaon]

เก็บครับ เดี๋ยวตามไป กำลังอยากศึกษา CSS พอดี 

[iPokz]

แต่เหมือนว่า ใน IE ยังคงเป็นเหลี่ยม 

[Twenty-One]

สะดวกดีจังเลยครับ แต่เสียดาย ie 6 ใช้ไม่ได้
คงต้องรอ ie 6 ลงหลุมก่อน  

[whitecross]

IE 6 โดนทำพพิธีเผาศพไปแล้ว เศร้า แต่ก็ดีคนตะได้มาใช้ FF กันเยอะๆ เวลาออกแบบจะได้ง่าย

[deadclosed]

ขอบคุณครับบ  :wanwan017:ศึกษาไว้

แต่ยังไปใช้งานจริงไม่ได้ก่อน รอให้สนับสนุนของบราพเซอร์ กันให้ดีก่อนน่่าจะดี

[mastergtx]

เก่งนะ +1

[woratana]

สะดวกดีจังเลยครับ แต่เสียดาย ie 6 ใช้ไม่ได้
คงต้องรอ ie 6 ลงหลุมก่อน  

เค้าจัดงานศพกันไปแล้วล่ะครับ 

[ayeweb]

ผมเคยศึกษาแล้วครั้งหนึ่งยากครับ