บทความ IT เจ๋งๆ
7 สุดยอด CSS Tools สำหรับ Web Developers ทุกคน
01-ต.ค.-21
คัมภีร์เทพ IT
CSS เป็น Stylesheet Language ที่ Web Developers ทุกคนต้องรู้จัก CSS มี Features เจ๋ง ๆ มากมายที่ช่วยให้เราสร้างประสบการณ์ที่น่าทึ่งบน Web ได้ แต่การเขียนและจัดการ CSS Code ที่ดีนั้นไม่ใช่เรื่องง่าย โดยเฉพาะถ้าเป็น Project ขนาดใหญ่และคุณไม่ได้ใช้ CSS Framework นั่นเป็นเหตุผลที่การใช้ CSS Tools ช่วยทำให้ชีวิตของคุณง่ายขึ้น และบทความนี้ก็เป็น 7 สุดยอด CSS Tools สำหรับ Web Developers ทุกคน
1. Get Waves
Get Waves เป็น Tool ที่น่าทึ่งที่จะช่วยให้คุณสามารถสร้าง SVG Waves ได้อย่างง่ายดาย การสร้าง Wave โดยใช้ CSS นั้นไม่ใช่เรื่องง่าย นั่นคือเหตุผลที่ Tool นี้มีประโยชน์มาก
คุณสามารถสร้าง SVG Waves จากนั้นได้รับ Code ไปใช้งาน อีกทั้งคุณยังสามารถ Download SVG Wave ได้อีกด้วย
2. PurgeCSS
PurgeCSS เป็น Tool ที่ช่วยให้คุณลบ Code ที่ไม่ได้ใช้งานใน CSS ของคุณ นี่เป็นโอกาสที่ดีที่จะลดขนาด CSS Files ของคุณและขณะเดียวกันยังช่วยเพิ่มประสิทธิภาพอีกด้วย
Tool นี้มีประโยชน์อย่างมาก โดยเฉพาะอย่างยิ่ง หากคุณใช้ CSS Framework เนื่องจาก Framework ส่วนใหญ่มี Code จำนวนมากที่เราไม่ได้ใช้งานจริง
3. CSS Scan
CSS Scan เป็น Premium Tool ที่จะช่วยให้คุณได้เห็น CSS Code ทั้งหมดของ Elements ต่าง ๆ บน Web Page ที่คุณนำ Mouse ไปวาง
Tool นี้ช่วยเพิ่มความสามารถในการสร้าง CSS Grid Code สำหรับ Project ของคุณ คุณสามารถ Set ค่า Columns, Rows และ Units จากนั้นคุณจะได้รับ CSS และ HTML Code หากคุณต้องการ
Property Clip-Path ใน CSS จะช่วยให้คุณสร้าง Shape ที่ซับซ้อนได้ (เช่น วงกลม วงรี รูปหลายเหลี่ยม รวมทั้ง Shape ที่ซับซ้อนอื่น ๆ ทั้งหมด) หากคุณไม่คุ้นเคยกับ Property นี้ คุณสามารถใช้ CSS Clip-Path Maker Tool เพื่อสร้าง Shape ที่คุณต้องการได้อย่างง่ายดาย และได้รับ CSS Code อีกด้วย
6. Animista
Animista เป็น Tool ที่ยอดเยี่ยม ที่จะทำให้คุณได้ Collection ของ Pre-Made CSS Animations ที่คุณสามารถนำไปใช้ได้ คุณสามารถเลือกประเภทของ Animation และได้รับ CSS Code อีกด้วย
Smooth Shadows เป็น Tool ที่น่าทึ่ง ที่ช่วยให้คุณสามารถสร้าง CSS Shadows ได้อย่างง่ายดาย Tool นี้จะช่วยให้คุณทำสิ่งต่าง ๆ ได้อย่างอิสระมากขึ้น คุณสามารถปรับแต่ง Layers ของ Shadows, Transparency, Vertical Distance และอื่น ๆ ได้
เมื่อคุณสร้าง Shadow ที่ต้องการแล้ว คุณสามารถ Copy CSS Code และใช้มันใน Project ของคุณได้
สรุป
ตามที่คุณได้เห็นใน List ด้านบน สิ่งเหล่านี้เป็น CSS Tools ที่มีประโยชน์มาก มันช่วยให้คุณประหยัดเวลาได้มากขึ้นเมื่อต้องเขียน CSS อีกทั้งยังทำให้ชีวิตของคุณง่ายขึ้นและช่วยให้คุณ Focus ไปที่งานสำคัญอื่น ๆ ของการ Develop ของคุณ
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด