บทความ IT เจ๋งๆ
9 CSS Tools ที่มีประโยชน์สำหรับ Web Developers
14-ส.ค.-20
คัมภีร์เทพ IT
ไม่ว่าคุณจะเป็น Developer ที่มีประสบการณ์ในระดับใด ก็ล้วนต้องการทำให้ชีวิตของคุณง่ายที่สุด ซึ่งการเลือกใช้ Tools ที่เหมาะสม จะช่วยคุณในเรื่องดังกล่าว แต่คุณอาจต้องใช้เวลาสักหน่อยในการเลือก Tools ที่เหมาะกับความต้องการของคุณ และในบทความนี้คือ 9 CSS Tools ที่มีประโยชน์สำหรับ Web Developers ที่จะทำให้ชีวิตของคุณง่ายขึ้นและมีประสิทธิภาพมากขึ้น
หนึ่งใน CSS Properties ที่มีความเป็นไปได้อย่างมาก ซึ่งทำให้ยากที่จะจำพวกมันได้ทั้งหมด ก็คือ Transition Property
Tool นี้ยอดเยี่ยมอย่างมากในกรณีที่คุณ ไม่แน่ใจจริง ๆ ว่า คุณต้องการ Transition แบบใด หรือเมื่อใดก็ตามที่คุณต้องการลองใช้พวกมันหลาย ๆ อย่าง Tool นี้ทำให้ง่ายต่อการผสมผสานแง่มุมต่าง ๆ ของ Transition เช่น ระยะเวลา และความล่าช้า ด้วยวิธีนี้ คุณจะเห็นได้อย่างชัดเจนว่าแต่ละ Transitions ทำงานอย่างไร
และที่สำคัญคือ Website นี้ยังมี Tools อื่น ๆ อีกมากมาย เช่น Gradient และ Transform Generator
2. Transfonter
Transfonter เป็น Tool ที่จะใช้ในการ Convert Fonts ของคุณ เพื่อให้คุณสามารถใช้งานบน Web ได้ มันรองรับ Format ต่าง ๆ มากมาย เช่น TTF, EOT, WOFF, WOFF2 และ SVG
มันมีประโยชน์อย่างมาก เมื่อคุณมี Custom Font ซึ่งคุณจำเป็นต้องใช้งานพวกมันบน Web
ในบางครั้งคุณอาจต้องใช้ Flip Switch สำหรับ Application ใหม่ที่คุณกำลังสร้าง แทนที่จะต้องสร้างสิ่งที่มีอยู่แล้ว คุณสามารถใช้ Tool นี้ เพื่อช่วยสร้าง Code ให้คุณได้
4. Flexbox.help
Flexbox.help เป็น Tool ที่ยอดเยี่ยม ที่คุณสามารถใช้ได้ทุกเมื่อที่คุณต้องการความช่วยเหลือเกี่ยวกับ Flexboxes นี่เป็นทางออกที่ยอดเยี่ยมหากคุณยังใหม่กับ Flexbox ด้วย Tool นี้ คุณสามารถทดลองใช้กับ Flex Option ทั้งหมดที่มีอยู่ จากนั้น CSS จะถูกสร้างขึ้นสำหรับคุณตาม Option ที่คุณเลือก ดังนั้น คุณจึงไม่จำเป็นต้องเขียน Code ทั้งหมดด้วยตัวเอง
5. SASS to CSS
การใช้ Tool นี้ คุณสามารถ Convert SASS Code ของคุณกลับไปเป็น CSS ซึ่งอาจมีประโยชน์เมื่อคุณต้องการสร้าง SASS Code ที่คุณเขียนขึ้นซึ่งพร้อมที่จะใช้งานบน Web
CSS Filter Property จะช่วยให้คุณสามารถเข้าถึง Effect อย่าง การเบลอ หรือ การเปลี่ยนสี ในการแสดงผลของ Element ก่อนที่ Element จะถูกแสดงขึ้นมา Tool นี้ช่วยให้คุณสามารถทดลองกับความเป็นไปได้ทั้งหมดที่ Filter Property มีให้
ลองตรวจสอบ และดูว่าคุณสามารถสร้าง Effects ที่ยอดเยี่ยมได้มากขนาดไหนโดยใช้เพียงแค่ Property นี้
บางครั้งคุณอาจจะขาดแรงบันดาลใจในการค้นหาสีที่ดีที่สุดสำหรับการออกแบบบางอย่าง หรือ Website เมื่อใดก็ตามที่คุณรู้สึกขาดแรงบันดาลใจ คุณควรใช้ Tool นี้ มันเป็น Tool ที่สวยงามและใช้งานง่ายมากซึ่งมี Tone สีที่สวยงามให้คุณเลือกมากมาย
Tool นี้มีประโยชน์เป็นอย่างยิ่งเมื่อคุณทำงานกันเป็นทีม ซึ่งมีคนหลายคนทำงานในส่วนของ Frontend มันจะช่วยให้คุณสร้าง Style Guide ได้ ดังนั้น จึงช่วยทำให้ไม่เกิดความเข้าใจผิดเกี่ยวกับวิธีจัด Style ของ Elements
9. Darken / Lighten a Certain Color
Tool สุดท้ายนี้ จะช่วยให้คุณสามารถปรับสีให้เข้มขึ้นหรือจางลงได้ เชื่อว่าคงมีหลายสถานการณ์ที่คุณต้องการจะทำให้สีเข้มขึ้นหรืออ่อนลงเพียงเล็กน้อย อย่างเช่น เมื่อคุณกำลังมองหาสี Background สำหรับปุ่มของคุณ ที่สำคัญมันจะช่วยทำให้คุณรู้สึกว่า การค้นหาสีที่เหมาะสมเฉพาะในจุดที่ต้องการนั้น ไม่เคยเป็นเรื่องง่ายขนาดนี้มาก่อน
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด