ทำกล่องขอบโค้งง่าย ๆ ด้วย Javascript
คำเตือน : เหมาะสำหรับผู้มีพื้นฐาน html/css อยู่บ้าง ไม่งั้นอาจจะงงได้
ปัจจุบันนี้ เว็บไซต์ส่วนใหญ่มักจะมีการออกแบบให้ขอบของกล่องต่าง ๆ ในเว็บไซต์มีความโค้งมนเพื่อความสวยงาม แต่การจะทำให้ขอบมีความโค้งมนนั้น แต่ละคนก็จะมีเทคนิคหรือวิธีการทำที่แตกต่างกันไป ซึ่งเทคนิคส่วนใหญ่จะเป็นการสร้างกล่องที่มีพื้นหลังเป็นรูปขอบโค้งบนและล่าง ดังภาพ
ซึ่งเทคนิคนี้เป็นเทคนิคที่ค่อนข้างเปลืองโค้ด (ต้องสร้าง div เปล่าถึง 2 ที่เพื่อแสดงผลขอบโค้งบนล่าง) แถมยังไม่ได้มาตรฐานอีกต่างหาก (สร้างโค้ดโดยที่ไม่มีความหมาย) แล้วอย่างงี้เราจะใช้วิธีไหนดีหละ ?
วันนี้ผมจึงขอนำเสนอวิธีการทำขอบโค้งโดยที่ไม่ต้องใช้รูปภาพกัน โดย Alessandro Fulciniti
วิธีการทำกล่องขอบโค้งโดยไม่ใช้รูปภาพนี้ สิ่งที่จะต้องมีก็คือ (สามารถดาวน์โหลดไฟล์ได้ที่ข้างล่างครับ)
- ไฟล์ javascript ชื่อ “niftycornerscube.js”
- ไฟล์ css ชื่อ “niftycorners.css”
- “javascript เฉพาะ” สำหรับหน้านั้น ๆ ขึ้นอยู่กับ selector และ keyword ที่เราต้องการ
<script type="text/javascript">
window.onload=function(){
Nifty("selector","keyword");
}
</script>
ก่อนจะไปดูตัวอย่างการทำกล่องขอบโค้งกัน เรามาทำความเข้าใจกับการใช้งาน “Javascript เฉพาะ” กันก่อนดีกว่า ตารางด้านล่างนี้จะแบ่งประเภทของ selector และยกตัวอย่างการใช้งานให้ดูด้วย (เวลาเอาไปใช้ จะได้ใช้ถูกไง)
| Selector | ตัวอย่าง |
|---|---|
| tag selector (ใช้งาน tag ตรง ๆ) | “p” “h2″ |
| id selector (มี id เข้ามาเกี่ยวข้อง) | “div#header” “h2#about” |
| class selector (มี class เข้ามาเกี่ยวข้อง) | “div.news” “span.date” “p.comment” |
| descendant selector (แบบหลาย ๆ ชั้น) | “div#content h2″ “div#menu a” |
| descendant selector (นี่ก็แบบหลายชั้นแต่ใช้ class) | “ul.news li” “div.entry h4″ |
| grouping (สามารถนำหลาย ๆ แบบด้านบนมาผสมกันได้) | “h2,h3″ “div#header,div#content,div#footer” “ul#menu li,div.entry li” |
ส่วนตารางนี้จะบอกความหมายของ keyword ที่นำมาใช้
| keyword | ความหมาย |
|---|---|
| tl | ขอบโค้งมุมซ้าย บน |
| tr | ขอบโค้งมุมขวา บน |
| bl | ขอบโค้งมุมซ้ายล่าง |
| br | ขอบโค้งมุมขวาล่าง |
| top | ขอบโค้งด้านบน |
| bottom | ขอบโค้งด้านล่าง |
| left | ขอบโค้งด้านซ้าย |
| right | ขอบโค้งด้านขวา |
| all (default) | ทั้ง 4 มุมเลย | none | กำหนดให้ขอบทั้ง 4 ไม่ต้องโค้ง |
| small | ขอบโค้งขนาดเล็ก (2px) |
| normal (default) | ขอบโค้งขนาดปกติ (5px) |
| big | ขอบโค้งขนาดใหญ่ (10px) |
| transparent | ใช้ในกรณีที่สีพื้นหลังของกล่องไม่เหมือนกันทั้งกล่อง หรือเอาไว้ใช้กับเมนูที่มีการเปลี่ยนสีขณะ hover |
| fixed-height | กำหนดขนาดความยาว ห้ามยืด ห้ามหด |
| same-height | กำหนดให้ความสูงของตัวแปรทุกตัวในกลุ่มนั้น ๆ เท่ากันหมดโดยยึดตามตัวแปรที่มีความสูงมากสุด |
พอทำความเข้าใจเรียบร้อยแล้วก็ไปดูตัวอย่างกันเลย Let’s go !!!
ตัวอย่างที่ 1 div โดด ๆ
เริ่มกันด้วยตัวอย่างง่าย ๆ ก่อนโดยการทำกล่องขอบโค้ง 1 กล่อง โดยใช้ id ชื่อว่า box และขอบโค้งมีขนาดใหญ่ (10 px)
ตัวอย่างที่ 2 div คู่
ต่อมาเราจะลองทำกล่อง 2 กล่อง โดยใช้ id ชื่อ content และ nav ขอบโค้งของทั้ง 2 กล่องจะเป็นขนาดธรรมดา (5 px) ซึ่งเป็นค่ามาตรฐาน เนื่องจากตัวอย่างที่ 2 เราไม่ได้ใส่ keyword เพราะฉะนั้นเราไม่ต้องใส่ keyword ก็ได้นะครับ ถ้าเราอยากได้ขอบโค้งขนาดธรรมดา
ตัวอย่างที่ 3 กล่องที่มีพื้นหลังไล่สีก็ยังทำขอบโค้งได้นะ
ในกรณีที่เราต้องการทำกล่องซึ่งมีพื้นหลังแบบไล่สีให้มีขอบโค้ง เราก็สามารถทำได้ โดยใส่ keyword ว่า transparent เพียงเท่านี้ก็เรียบร้อย
ตัวอย่างที่ 4 เอาไปทำเมนูก็แจ่ม
ทีนี้เราจะทำเมนูขอบโค้งบ้าง แต่เนื่องจากว่า ปกติแล้วกล่อง (div) และ เมนู (ul) นั้นจะมีความแตกต่างกันตรงที่พื้นหลังของกล่องจะไม่มีการเปลี่ยนสี แต่เมนูนั้นจะมีการเปลี่ยนสีได้ (a, a:hover) เพราะฉะนั้นจึงต้องใช้ keyword ว่า transparent เพื่อให้เมนูสามารถเปลี่ยนสีได้
ตัวอย่างที่ 5 ทำกล่องแบบกำหนดความสูงด้วย li
ในการทำกล่องนั้น บางทีเราไม่จำเป็นจะต้องใช้ div เสมอไปนะคับ ให้ดูการใช้งานเป็นหลัก อย่างในกรณีนี้นั้นเราต้องการทำกล่องหลาย ๆ กล่องเรียงต่อกัน ซึ่งข้อมูลด้านในดันมีความเกี่ยวข้องกันซะด้วย จึงสามารถใช้ li (list) แทนได้ กรณีนี้ที่จริงจะใช้ div ทำกล่องทุกกล่องก็ไม่ผิดนะครับ แต่เพียงแค่ต้องการนำเสนอเทคนิคการทำกล่อง(ที่ถูกต้อง) อีกแบบหนึ่งเท่านั้นเอง
ตัวอย่างที่ 6 กล่อง 2 กล่องโดยกำหนดให้ความสูงที่ยืดออกเท่ากัน
บางครั้งถ้าเรามีกล่อง 2 กล่อง ซึ่งเราอยากให้มันยืดออกเท่า ๆ กันไม่ว่าแต่ละกล่องจะมีข้อมูลหรือไม่ก็ตามก็ให้ยึดความยาวของกล่องที่มีข้อมูลมากเป็นหลัก ทำได้โดยใส่ keyword ว่า same-height เพียงเท่านี้ก็จะได้กล่อง 2 กล่องที่ยืดออกเท่ากันแล้ว
ตัวอย่างที่ 7 เอาไปใช้ทั้งเว็บกันเลยดีกว่า
ทีนี้เรามาดูหน้าเพจที่มีการใช้ขอบโค้งอย่างหลากหลายกันคับ
ปล. เนื่องจากมีการใช้ css ค่อนข้างเยอะ จึงทำ external css แทนนะครับ ชื่อ NiftyLayout.css
จะเห็นว่าถ้าเราทำขอบโค้งด้วยวิธีนี้ จะทำให้ประหยัดโค้ดกว่าวิธีแบบเดิม ๆ เยอะเลย
สำหรับคนที่สนใจสามารถดาวน์โหลดไฟล์ตัวอย่างทั้งหมดได้ ที่นี่
อ้างอิงและได้แรงบันดาลใจจาก : http://www.html.it/articoli/niftycube/index.html