วิธีใช้งาน CSS Shape Editor ใน Adobe Edge Code CC และ Brackets

Download CSS Shape Code on GitHub: https://github.com/teerasej/CSS-3-for-Beginner

CSS Shape

CSS Shape เป็นหนึ่งในความสามารถใหม่ๆ ของ CSS 3 ที่จะทำให้เราสามารถกำหนดรูปทรง Box Model ของ HTML Element ได้หลากหลายกว่า 4 เหลี่ยมแบบเดิมๆ ที่เรารู้จัก

ในปัจจุบันมีรูปทรงดังต่อไปนี้ให้เลือกใช้

• circle() – วงกลม ดิ๊กๆ
• ellipse() – วงรี
• rectangle() – 4 เหลี่ยม (เอ๊ะ)
• polygon() – กำหนดได้หลายเหลี่ยม

หรือจะใช้ภาพที่เอาสร้างใน Illustrator หรือ Photoshop กำหนดรูปทรงของ Shape ก็ได้

ซึ่งในตอนนี้ CSS Shape ยังอยู่ในการพัฒนา สามารถเรียนรู้และทดลองใช้ได้ แต่อย่าเพิ่งเอาไปใช้ใน Project จริงๆ ล่ะ!

เรียนรู้เรื่อง CSS Shape เพิ่มเติมได้ในส่วนของ “เรียนรู้ใช้งาน CSS 3” ครับ

CSS Shape Editor สำหรับ Adobe Edge Code CC และ Brackets

CSS Shape Editor เป็น Extension ตัวหนึงสำหรับติดตั้งใน Adobe Edge Code CC และ Brackets ทำให้เราสามารถกำหนดและปรับแต่ง Shape ได้โดยตรงจาก Web Browser ที่เปิดทดสอบใน Live Preview เลย

ดูวิธีติดตั้งและใช้งานได้ใน Video กันครับ