วันนี้ท่องเว็บอยู่ดี ๆ ไปเจอ Web Application (โปรแกรมที่ทำงานบนเว็บ ไม่ต้องดาวน์โหลดมาลงเครื่อง) เจ๋ง ๆ ตัวนี้เข้า เลยเอามาแบ่งปันกันครับ CSS3 Generator ตัวนี้เอาไว้ช่วยเว็บดีไซน์เนอร์ที่อยากใช้ CSS3 แต่จำโค้ดได้บ้างไม่ได้บ้างครับ แต่ก่อนจะใช้เครื่องมือนี้ แนะนำให้อ่านบทความสอน CSS3 ก่อนครับ จะได้รู้ว่า CSS3 เนี่ยมีความสามารถอะไรบ้าง

โดยวิธีใช้ CSS3 Generator ก็ไม่ยากเลยครับ เริ่มจาก เข้าเว็บไซด์ CSS3 Generator แล้วเลือกว่าอยากได้โค้ด CSS3 เอามาทำอะไรครับ ซึ่งมีให้เลือกดังนี้:

• Border Radius – โค้ดสำหรับทำกรอบโค้ง
• Box Shadow – ใส่เงาให้กล่อง
• Text Shadow – ใส่เงาให้ตัวอักษร
• RGBA – กำหนดสีแบบโปร่งใส
• @Font Face – ใช้ฟ้อนต์พิเศษนอกจาก Web Safe Fonts
• Multiple Column – แบ่งตัวหนังสือเป็นหลายคอลัมน์ในกล่องเดียว
• Box Resize – ตั้งให้กล่องขยายตามเนื้อหาในกล่องเองได้ เลือกให้ขยายเฉพาะแนวตั้งหรือแนวนอนได้
• Box Sizing – ตั้งว่าจะให้กรอบของกล่องเข้าไปอยู่ด้านในพื้นที่กล่อง หรืออยู่ด้านนอก (ปกติจะอยู่นอกกล่อง)
• Outline – กรอบกล่อง ตั้งค่าเหมือน border โดยอันนี้จะแสดงกรอบนอก border อีกที
• Selectors – ไม่มี Generator สำหรับอันนี้

พอเราเลือกแล้วจะมีช่องให้เรากรอกค่าต่าง ๆ เช่น ถ้าเลือก Text Shadow ก็จะให้เลือกใส่ค่าตำแหน่งเงา ความเบลอเงา และสีเงา (มีหน้าต่าง Color Picker ให้เลือกง่าย ๆ)

กรอกเสร็จแล้วสามารถก็อปปี้โค้ดในช่อง Your Code ไปใส่ในไฟล์ CSS เราได้เลย!

สังเกตว่าตรงมุมบนขวาของช่อง Your Code จะมีไอคอนบราวเซอร์ต่าง ๆ อยู่ อันนั้นเป็นข้อมูลบอกว่าคำสั่ง CSS3 ที่เราเลือกจะแสดงผลได้ในบราวเซอร์ตัวไหนบ้าง ถ้าเราชี้ตรงไอคอนบราวเซอร์จะมีเลขขึ้น อันนั้นคือเลขเวอร์ชั่นของบราวเซอร์ที่แสดงผลได้

ใครมีเครื่องมืออะไรดี ๆ เกี่ยวกับเว็บดีไซน์มาแนะนำก็ทิ้งคอมเม้นท์ไว้ได้เลยครับ!

อย่าลืมติดตาม Twitter @designil ของเรา และ เว็บบอร์ดเว็บดีไซน์ ครับ!

บทความ Web Design น่าอ่าน

• [Free] รวมปลั๊กอิน (Plugin) เจ๋ง ๆ ของ WordPress แห่งปี 2011 !!
• [CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง + Validate CSS ตระกูล -moz- ยังไงให้ผ่าน?
• Webdesign Toolbox ภาค 1: แฉเครื่องมือทำมาหากินงานเว็บดีไซน์!
• [Lightbox Scripts] รวม 15 สุดยอด jQuery สำหรับทำป๊อปอัพงาม ๆ
• [Free Course] เรียน jQuery ฟรี ๆ กับคอร์ส "Learn jQuery in 30 Days" !!