Archive for the ‘Javascript’ Category

ทำกล่องขอบโค้งง่าย ๆ ด้วย 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”); [...]

More »