Skip to content

เครื่องมือ CSS ที่ช่วยทุ่นเวลาในการเขียนโค้ด CSS บางคนอาจจะรู้ CSS เพียงนิดหน่อย หรือไม่รู้เลยก็สามารถใช้ได้ เพราะเครื่องมือเหล่านี้จะเจนโค้ดมาให้เราพร้อมใช้งาน เราเพียง Copy โค้ดแล้วไปแปะในเว็บที่ต้องการได้เลย

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้ควบคุมรูปลักษณ์ของเว็บเพจ เปรียบเสมือนเสื้อผ้าที่ช่วยแต่งเติมให้เว็บไซต์ของคุณดูสวยงาม น่าสนใจ ดึงดูดสายตา โดย CSS จะทำงานร่วมกับภาษา HTML ซึ่งใช้สร้างโครงสร้างเนื้อหาของเว็บเพจ CSS จะช่วยควบคุมรายละเอียดต่างๆ ของหน้าเว็บ เช่น สี ตัวอักษร ขนาด รูปภาพ ตำแหน่ง การจัดวาง ฯลฯ

ประโยชน์ของ CSS

+ ปรับแต่งสีตัวอักษรให้เหมาะกับเนื้อหา

+ เปลี่ยนขนาดและรูปแบบของตัวอักษร

+ ปรับแต่งรูปภาพและจัดวางตำแหน่งให้สวยงาม

+ กำหนดพื้นหลังของเว็บเพจ

+ สร้างเมนู navigation ที่ใช้งานง่าย

+ ออกแบบเว็บไซต์ให้รองรับหน้าจอขนาดต่างๆ (Responsive Design)

+ สามารถทำงานซ้ำ ๆ โดยอัตโนมัติและปรับปรุงขั้นตอนการทำงาน ช่วยประหยัดเวลาและลดโอกาสที่จะเกิดข้อผิดพลาด

เครื่องมือ CSS นักพัฒนาเว็บ

เครื่องมือ CSS สำหรับนักพัฒนาเว็บจะช่วยปรับปรุงขั้นตอนการทำงานไปจนถึงการยกระดับประสบการณ์ผู้ใช้ การใช้คุณสมบัติขั้นสูง และความเข้ากันได้ข้ามเบราว์เซอร์ เครื่องมือเหล่านี้ทำให้การพัฒนา CSS สำหรับเราเป็นเรื่องง่ายขึ้น เดี๋ยวเราไปไล่ดูว่ามีเครื่องมือตัวไหนน่าโดนกันบ้างครับ

1. EnjoyCSS

เริ่มที่เว็บ EnjoyCSS เป็นเว็บ Generate CSS3 มี UI ที่ใช้งานง่าย ช่วยปรับสไตล์กราฟิกที่หลากหลายได้อย่างรวดเร็วและไม่ต้องเขียนโค้ด

คุณสมบัติหลัก:

– 2D และ 3D transforms

– สร้าง transitions ที่ซับซ้อนได้หลายชิ้น

– การไล่ระดับสีแบบ linear หรือ radial หลายแบบ

– สร้าง box และ text shadows

– แบบอักษรที่กำหนดเอง (รวมถึงแบบอักษรของ Google)

– ฯลฯ

เราสามารถเล่นกับพารามิเตอร์ใน EnjoyCSS ได้เหมือนกับใน Photoshop หรือโปรแกรมวาดภาพประกอบ ด้วยแถบเลื่อน เครื่องมือเลือกสี โดยผสมผสานความสามารถของ CSS3 ยิ่งไปกว่านั้นยังสามารถสร้าง pseudo state (:hover, :active, :focus, :after, :before) และจัด Style ได้ทั้งหมด โค้ด CSS ที่จำเป็นทั้งหมดจะถูกสร้างขึ้นโดยอัตโนมัติ เราสามารถคัดลอกและวางโค้ดทั้งหมดลงในเว็บของเราได้อย่างง่ายดาย หรือจะเลือกรับโค้ดสำหรับแต่ละลักษณะสไตล์แยกกัน เช่น โค้ดสำหรับการไล่ระดับสี เงา หรือการแปลงแต่ละรายการ

2. CSS Grid Generator

CSS Grid Generator เป็นเครื่องมือที่ใช้งานง่าย ช่วยเราสร้าง Grid Layout CSS ได้อย่างรวดเร็วและง่ายดาย ด้วยอินเทอร์เฟซที่ใช้งานง่าย สามารถกำหนดโครงสร้างของ Grid กำหนดขนาดของคอลัมน์และแถว และสร้างโค้ด CSS ที่เกี่ยวข้องได้อย่างง่ายดาย เป็นเครื่องมือที่ต้องมีสำหรับการสร้างเลย์เอาต์แบบ Grid

3. AutoPrefixer

เครื่องมือตัวนี้สามารถช่วยให้เพื่อนๆ เขียนโค้ด CSS แบบไม่ต้องใส่ Vendor prefixes โดย AutoPrefixer จะเจนโค้ดสำหรับ Vendor prefixes ให้เราเอง “CSS vendor prefixes” หรือบางครั้งเรียกว่า “CSS browser prefixes” เป็นคุณสมบัติ CSS ที่สำคัญซึ่งมีบทบาทสำคัญในการรับประกันความเข้ากันได้แบบข้ามเบราว์เซอร์และให้การควบคุมคุณสมบัติ CSS ได้ดียิ่งขึ้น

ตัวอย่าง Vendor Prefixes

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

หรือ

-webkit-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

4. SCSS Compiler

SCSS Compiler ช่วยในการคอมไพล์ภาษา SCSS ให้เป็น CSS ธรรมดา และช่วยบันทึกและแชร์ CSS ที่แปลงแล้ว เป็นเครื่องมือประมวลผลล่วงหน้าแบบไดนามิกสามารถแปลงโค้ด SCSS เป็น CSS ทำให้เป็นระเบียบและมีประสิทธิภาพ มีคุณลักษณะต่างๆ เช่น nesting, variables, mixins และ inheritance ทำให้โค้ดมีความกระชับและนำมาใช้ซ้ำได้ เครื่องมือนี้ช่วยลดจำนวนโค้ดที่ซ้ำกัน ช่วยให้นักพัฒนาสร้างโค้ด CSS ที่สามารถบำรุงรักษาและปรับขนาดได้

ตัวอย่างภาษา SCSS

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

}

li { display: inline-block; }

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

}

5. CSS Arrow Please!

CSS Arrow Please! เป็นเครื่องมือออนไลน์ฟรีสำหรับการสร้างโค้ด CSS สำหรับกล่องพร้อมลูกศรที่กำหนดเอง เครื่องมือนี้ใช้งานง่ายและมีตัวเลือกการปรับแต่งที่หลากหลายสำหรับรูปลักษณ์ของลูกศร ผู้ใช้สามารถป้อนความกว้าง ความสูง สี ตำแหน่ง และรูปแบบของลูกศรที่ต้องการ รวมทั้งเพิ่มเงาหรือเส้นขอบให้กับกล่องได้ หลังจากปรับแต่งลูกศรแล้ว ผู้ใช้สามารถก๊อปปี้โค้ด CSS ไปใช้งานได้เลย CSS Arrow Please! มีประโยชน์สำหรับการเพิ่มความน่าสนใจให้กับเว็บหรือบล็อก และสร้างคำแนะนำเครื่องมือและองค์ประกอบได้

6. CSSmatic

CSSmatic เป็นเครื่องมือสำหรับ Web Designer แบ่งเป็น 4 หมวด คือ

+ Gradient Generator เครื่องมือสร้างการไล่ระดับสี สามารถใช้ได้หลายสีและปรับ Opcaity เพื่อให้ได้การไล่ระดับสีที่น่าทึ่ง การไล่ระดับสีเหล่านี้สามารถใช้เป็นภาพพื้นหลังของแบนเนอร์ วอลเปเปอร์ ปุ่ม หรือตาราง และในแอปพลิเคชันอื่นๆ อีกมากมาย

+ Border Radius ใช้สร้างกรอบมนที่ใช้งานง่ายสุดๆ ประหยัดเวลา สามารถปรับเปลี่ยนเส้นขอบทั้งหมดที่เลือกได้พร้อมกัน

+ Noise Texture สร้างรูปแบบพื้นหลังด้วยแพทเทิร์นแบบ Pixel และ Noise สามารถเปลี่ยนสีและค่า และดูตัวอย่างผลลัพธ์แบบเรียลไทม์

+ Box Shadow สร้างเงา ใช้วิธีการเบลอ การเปลี่ยนแปลงสี ขนาดเงา ทุกสิ่งที่คุณต้องการเพื่อสร้างเงาตกกระทบ

7. css-doodle

CSS-Doodle สามารถสร้างลวดลายที่ซับซ้อนสวยงามและแปลกตาด้วย CSS มีอินเทอร์เฟซที่ใช้งานง่ายสำหรับการสร้างกราฟิกที่มีการผสมผสานระหว่างรูปทรงเรขาคณิต ภาพเคลื่อนไหว และการไล่ระดับสี สามารถทดลองใช้คุณสมบัติและค่า CSS ที่แตกต่างกันเพื่อสร้างการออกแบบที่มีเอกลักษณ์และดึงดูดสายตา เหมาะสำหรับการสร้างพื้นหลัง แอนิเมชั่น และองค์ประกอบตกแต่งบนเว็บไซต์

8. Image Filters by w3schools

เป็นการใช้เทคนิคจาก CSS สร้างสรรเอ็ฟเฟ็คแปลกๆ ให้กับภาพ คล้ายกับเราใช้พวกแอพตกแต่งภาพเลย สามารถเข้าไปทดลองใช้ได้ที่ w3schools

ตัวอย่างโค้ด

img {

-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */

filter: grayscale(100%);

}

9. PostCSS

เครื่องมือตัวสุดท้ายที่เราจะมาแนะนำคือ PostCSS เป็นเครื่องมือที่ใช้ปลั๊กอินจาวาสคริปท์แปลง CSS ให้เป็น CSS ที่ถูกต้องและเหมาะสม เช่น เขียนคำสั่งเกี่ยวกับ Vendor prefixes ตัวปลั๊กอินจะแปลงให้เป็นค่าต่างๆ ให้ครบถ้วน หรือแปลงค่าสีที่เป็นภาษา CSS สมัยใหม่ให้เหมาะสมกับเบราว์เซอร์ส่วนใหญ่เข้าใจ

สำหรับการใช้งานต้องติดตั้ง PostCSS extensions ผ่านโปรแกรมเขียนโค้ดอีกทีครับ สามารถดูวิธีติดตั้งผ่านหน้าเว็บที่เราได้เพิ่มลิงก์ไว้ที่หัวข้อแล้ว

สรุป

การเขียนโค้ดด้วย CSS เป็นวิธีการควบคุมรูปลักษณ์ของหน้าเว็บ ช่วยกำหนดสี ขนาด ตำแหน่ง ฟอนต์ และคุณสมบัติการออกแบบอื่นๆ อีกมากมายสำหรับองค์ประกอบต่างๆ CSS เป็นเครื่องมืออันทรงพลังที่สามารถช่วยสร้างหน้าเว็บที่สวยงามและใช้งานง่าย เพื่อนๆ สามารถฝึกฝน เรียนรู้การใช้ CSS เพื่อสร้างเว็บไซต์ที่น่าทึ่งได้เลยครับ

Back To Top
Search