ต่อไปนี้การทำกล่องโค้งมนจะไม่เป็นปัญหายุ่งยากอีกต่อไปแล้ว เพราะความขี้เกียจของคนเรา ทำให้คนเราเกิดการพัฒนา อิอิ(คิดในแง่บวกก็มีประโยชน์เหมือนกัน) จึงไปหา script อะไรสักอย่างที่สามารถใส่จึ๊กเดียวให้มันได้ดั่งใจเลย

ก็ไปเจอหลายตัวเหมือนกัน เช่น jQuery corner เป็น plug-in ของ jQuery , Nifty , curvyCorners มีีทั้ง โดด ๆ(stan alone) กับที่เป็น plug-in ของ jQuery พอมาลอง ๆ ดูแล้ว รู้สึกว่าถูกใจตัว curvy มากที่สุดเลย เพราะสามารถทำโค้งโดยใส่ border ได้เลย และปัญหาน้อยมาก(แต่ก็มี)

เรามาเริ่มกันเลยละกัน เพื่อไม่ให้เป็นการเสียเวลา
ก่อนอื่นเลย ต้องโหลดโค้ดมาก่อนเลย ที่หน้านี้ จะเห็นคำว่า download นั้นแหละครับ

เมื่อโหลดแล้ว แตกซิปออก เราจะเป็นไฟล์ดังนี้
- curvycorners.src.js เป็นไฟล์โค้ดหลักเลยครับ แต่จะเป็นไฟล์ที่ใหญ่ เพราะยังไม่ได้ตัดพวก comment ออก มีใว้เพื่อให้พวกเราได้ไล่โปรแกรมได้นั้นเอง
- curvycorners.js เป็นไฟล์โค้ดอีกเหมือนกัน แต่จะทำการเอาอะไรที่ไม่จำเป็นออก เช่น comment ,enter ,tab ออก เพื่อให้ไฟล์มีขนาดเล็ก และโหลดเร็ว
- examples อันนี้เป็นไฟล์ตัวอย่างครับ จะมีตัวอย่างมาให้ 6 ตัวอย่าง ลองคลิ๊กเข้าไปที่ index.html เลยครับ
- doc อันนี้ไม่ต้องสนใจ 555+

เห็นไฟล์คร่าว ๆ แล้ว เรามาทดลองเล่นดูขำ ๆ ครับ เจ้าตัว curvy นี้จะมีการเขียนอยู่สองลักษณะครับ อย่างแรกจะเขียนเป็น css และอย่างที่สองจะเขียนเป็น javascript ครับ เรามาดูอย่างแรกก่อนครับ

ลงมือทำ

หากเราต้องการให้ div ของเราโค้ง โดยมี radius เท่ากับ 20px
ก่อนอื่นต้อง include ไฟล์ js มาก่อนนะครับ อย่าลืม

<script src=”curvycorners.js”></script>

จากนั้นก็มาสร้าง css class ครับ ตั้งชื่ออะไรก็ได้ ผมตั้งชื่อว่า test1 นะครับ

.test1 {
width: 300px;
padding: 10px;
background-color: red; /* ใส่สีแดงให้กับ div หน่อย เดี๋ยวจะดูไม่ออก เพราะเป็นสีขาวหมด */
-webkit-border-radius: 20px; /* ตรงนี้แหละสำคัญครับ */
-moz-border-radius: 20px; /* ตรงนี้ก็สำคัญครับ ต้องใส่ทั้งสองบรรทัดนะครับ*/
}

เสร็จแล้วก็ไปสร้าง div มาเพื่อทดสอบ

<div class=”test1″><br><br>ทดสอบโค้ง ๆ<br><br></div>

เสร็จแล้วรันเลยครับ หากได้ตามนี้แสดงว่า เสร็จไป 1 ขั้น

ทีนี้ผมขอลองแบบที่สองบ้าง คือแบบที่เป็น javascript โดยขั้นตอนทุกอย่างเหมือนเดิม ยกเว้นขั้นตอนสร้าง css class ครับ จะเปลี่ยนมาเป็น javascript แทน โดยโค้ดดังนี้ (หากรันไม่ขึ้นให้ย้ายโค้ดนี้ไปใว้ใต้ div)

curvyCorners(
{tr: { radius: 20 },
tl: { radius: 20 },
br: { radius: 20 },
bl: { radius: 20 }},
“.test1“);

โดยจะมีตัว setting อยู่ในรูปแบบ json(ไม่รู้ก็ไม่เป็นไรครับ) โดย t=top, r=right, b=bottom และ l=left ครับ จากนั้นเราให้มันแสดงผลโค้งมนทุก ๆ object ที่ใช้ class=”test1″ (แต่บางตัวก็ไม่ได้ เช่น form) พอรันแล้วก็จะได้เหมือนกัน
แต่โค้ดดังกล่าวจะมาแทนบรรทัด -webkit-…… และ -moz-…… เท่านั้นนะครับ พวก width,background ยังอยู่นะ

ต่อไป เราสามารถเลือกได้ว่าจะเอามุมไหนโค้งบ้าง โดยวิธีการนี้
หากเป็น css ก็จะได้โค้ดดังนี้

.test2 {
width: 300px;
padding: 10px;
background-color: red;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
}

และโค้ด Javascript จะได้ดังนี้

curvyCorners(
{tr: { radius: 0 },
tl: { radius: 20 },
br: { radius: 20 },
bl: { radius: 0 }},
“.test2“);

โดยโค้ดดังกล่าวจะมาแทนบรรทัด -webkit-…… และ -moz-…… เหมือนเดิมนะครับ

เริ่มดัดแปลง

หากเราต้องการแบบที่มีขอบด้วย ก็สามารถเพิ่มได้เลยโดยไม่ยุ่งยาก โดยการเพิ่ม border เขาไปใน css ครับ ก็จะได้ดังนี้

.test1 {
border:1px solid red;
width: 300px;
padding: 10px;
background-color:#fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}

ก็จะได้ดังนี้

ถ้าเปลี่ยน border เป็น 5 ก็จะได้แบบนี้

ดัดแปลงแบบใช้อย่างง่าย

เมื่อวันก่อนไปเจอ css framework มา งงเล็กน้อย แต่พอลองใช้ดูแล้ว มันก็คือ css ที่เขียนมาให้เราหยิบใช้ ๆ ได้เลยนั้นเอง ด้วยความคิดนี้ ก็เลยเกิดไอเดียมาทำ corner framework ฉบับกาก ๆ ของเราเอง หุหุ
ทำก็ง่าย ใช้ก็ง่ายโคตร
เอาล่ะ มาลุยกันเลย

เนื่องจากเรามีพื้นฐานในการใช้ curvy แล้ว เราก็จะเอาไปที่เป็น javascript มาใช้้ให้เป็นประโยชน์ครับ โดยเมื่อเขียนเสร็จแล้ว เวลาเราอยากให้กล่องไหนโค้ง เราก็ใส่ class=”c5px” ได้เลยครับ โดย c คือ corner (ความจริงเป็นอะไรก็ได้) และ 5px คือ radius ที่เราต้องการครับ เช่น เรามีโค้ดอยู่

<div class=”box1″>
//code ๆๆๆๆๆ
</div>

อยากให้มันโค้งก็เติม c5px ลงไปใน class เลยครับ

<div class=”box1 c5px“>
//code ๆๆๆๆๆ
</div>

เราก็จะได้ div ที่มีโค้ง 5px โดยที่เราไม่ต้องยุ่งกับอะไรเลยสักอย่างครับ

เอาล่ะ ได้ดูวิธีใช้ไปแล้ว ทีนี้เราก็มาดูวิธีการสร้างเครื่องมือเลยครับ
เนื่องจากผมไม่ค่อยชอบอะไรลุ่มลาม ก็เลยขอไปแก้โค้ดที่ไฟล์ curvycorners.js เลยนะครับ จะได้ include ครั้งเดียวจบ ไม่ต้องทำอะไรซ้ำ

วิธีคือ ไปเติมโค้ดต่อจากโค้ดของเขา ดังนี้

for (var i=1;i<=20;i++)
curvyCorners({tr: { radius: i },tl: { radius: i },br: { radius: i },bl: { radius: i }}, “.c”+i+”px”);

คือเราจะวนลูป 20 รอบ เพื่อหา class ที่ชื่อว่า .c?px โดย “?” คือตัวเลขของ radius ที่เราต้องการครับ ถ้าเจอก็จะทำการโค้ง ๆ ให้เราตามที่ “?” ที่เราใส่ไปนั้นเอง ถ้าไม่เจอก็ไม่เป็นไรครับ

เพียงแค่นี้เราก็จะได้ framework กาก ๆ มาใช้เองแล้วครับ

หรืออยากจะดัดแปลงอีกก็ได้เช่น

for (var i=1;i<=20;i++){
curvyCorners({tr: { radius: i },tl: { radius: i },br: { radius: i },bl: { radius: i }}, “.c”+i+”px”);
curvyCorners({tr: { radius: 0 },tl: { radius: 0 },br: { radius: i },bl: { radius: i }}, “.cb”+i+”px”);
curvyCorners({tr: { radius: i },tl: { radius: i },br: { radius: 0 },bl: { radius: 0 }}, “.ct”+i+”px”);
curvyCorners({tr: { radius: i },tl: { radius: 0 },br: { radius: i },bl: { radius: 0 }}, “.cr”+i+”px”);
curvyCorners({tr: { radius: 0 },tl: { radius: i },br: { radius: 0 },bl: { radius: i }}, “.cl”+i+”px”);
}

จากโค้ด จะเห็นว่าเราเพิ่มคำสั่งจาก c?px เป็น cb?px , ct?px, cr?px, cl?px ครับ ก็จะได้เป็น corner top ,corner bottom, corner right, corner left ครับ ลองไล่โปรแกรมดูครับ ไม่ยาก

หากมีข้อสงสัยลองไปดู demo ที่ทาง curvy ให้มาดูนะครับ ใคร advance แล้วมาสอนผมกลับด้วยล่ะ อิอิ

download โค้ดสำเร็จได้ที่นี่เลยครับ