บทความ IT เจ๋งๆ
15 Websites ที่ช่วยประหยัดเวลาทำงานของ CSS Developer
28-ก.พ.-24
คัมภีร์เทพ IT
คนไอทีรวมทั้งคนทำงานทุกคน ล้วนอยากทำงานด้วยความสะดวกและรวดเร็ว การที่เรามีเครื่องมือหรือ Resources ดี ๆ ที่มาช่วยให้ทำงานสะดวกขึ้น น่าจะทำให้เรามีเวลาทำสิ่งสำคัญอื่น ๆ ได้มากขึ้น และบทความนี้ก็เป็น 15 Websites ที่ช่วยประหยัดเวลาทำงานของ CSS Developer
1. CSS Buttons
คุณสามารถใช้ CSS Buttons เพื่อทำให้ขั้นตอนในการออกแบบ “ปุ่มต่าง ๆ” ทำได้ง่ายขึ้น Website นี้มี Collection ของปุ่มสไตล์ต่าง ๆ ที่สามารถปรับแต่งได้มากมายพร้อมกับ CSS Code ที่เกี่ยวข้อง เพื่อให้งานของคุณเสร็จเร็วขึ้น
คุณสามารถใช้ Neumorphism หรือ Soft UI เพื่อสร้าง Neumorphic Elements และได้รับ CSS Code ที่เกี่ยวข้องเพื่อให้ Elements ของคุณมีลักษณะเป็น Physical Objects
คุณสามารถใช้ CSS Strips Generator เพื่อสร้าง Backgrounds ที่เป็นลักษณะลายทาง อีกทั้งช่วยทำให้การออกแบบของคุณดีขึ้นอีกด้วย
4. Google Fonts
คุณสามารถใช้ใช้ Google Fonts สำหรับ Collection ของ Fonts มากมายที่เป็น Open-Source และใช้งานได้แบบฟรี ๆ เพื่อช่วยปรับปรุงตัวอักษรใน Website ของคุณให้ดูดีขึ้น คุณสามารถใช้ Fonts เหล่านี้ใน Projects ของคุณได้อย่างง่ายดายด้วยการใช้ Google Fonts
Get Waves สามารถถูกใช้เพื่อสร้าง SVG Wave Patterns ที่สะดุดตา เพื่อทำให้กับ Website ของคุณดูมี Dynamic มากขึ้น
6. Can I Use
สิ่งสำคัญคือ คุณจำเป็นต้องทราบความเข้ากันได้ (Compatibility) ของ Browsers เมื่อคุณเขียน CSS และกรณีนี้ คุณสามารถใช้ Can I Use เพื่อดูตาราง Browser Support ที่ Update ล่าสุดได้
7. ColorSpace
การที่คุณเลือก Color Palette ที่เหมาะสม จะทำให้ Website ของคุณดูน่าดึงดูดมากขึ้น คุณสามารถใช้ ColorSpace เพื่อเลือกสีที่เหมาะกับ Projects ของคุณได้ เพียงแค่ระบุสีที่ต้องการเข้าไป
CSS Grid Generator เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้าง Grid Layouts ที่มีความซับซ้อน รวมทั้งสร้าง CSS Code ที่เกี่ยวข้อง
คุณสามารถใช้ BEM Cheat Sheet สำหรับใช้อ้างอิงสำหรับแบบแผนในการตั้งชื่อ BEM (Block Element Modifier) อย่างรวดเร็ว
10. Blobmaker
คุณสามารถใช้ Blobmaker เพื่อสร้าง SVG Blobs ที่สามารถปรับแต่งได้ แล้วนำไปใช้ใน Backgrounds, Illustrations รวมทั้ง Graphical Elements อื่น ๆ
CSS Gradient Generator สามารถสร้าง CSS Gradients ที่มีความซับซ้อนได้อย่างง่ายดาย นอกจากนี้ยังมี CSS Code ที่เกี่ยวข้องให้คุณนำไปใช้อีกด้วย
12. Animate.css
คุณสามารถใช้ Animate.css ที่มี Collection ของ Animations ที่พร้อมใช้งานอยู่มากมาย ซึ่งคุณสามารถนำไปใช้งานกับ Projects ของคุณได้อย่างง่ายดาย
13. Glassmorphism
คุณสามารถใช้ Glassmorphism เพื่อสร้าง Elements ที่มีลักษณะคล้ายกระจกแก้ว อีกทั้งสามารถปรับแต่งทั้ง ความโปร่งใส, ความเบลอ และสี เพื่อให้ได้รูปลักษณ์แบบกระจกฝ้าที่กำลังได้รับความนิยม
14. Clippy — CSS Clip-Path Maker
คุณสามารถใช้ Clippy — CSS Clip-Path Maker เพื่อสร้างรูปร่างที่มีความซับซ้อนได้อย่างง่ายดาย
15. CSS Validator
CSS Validator สามารถถูกใช้เพื่อให้แน่ใจว่า CSS Code ของคุณเป็นไปตามกฎของ Web โดย CSS Validator ของ W3C จะตรวจสอบ Stylesheets ของคุณ เพื่อค้นหาข้อผิดพลาดในการเขียน Code และตรวจสอบว่า เป็นไปตามมาตรฐานของ CSS หรือไม่
ที่มา: https://blog.stackademic.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด