สร้าง CSS Custom Properties
สร้าง CSS custom properties (ตัวแปร) สำหรับระบบการออกแบบ สร้างจานสีสี มาตราส่วนระยะห่าง ระบบการพิมพ์ ส่งออกเป็น CSS หรือ JSON เหมาะสำหรับการพัฒนาเว็บสมัยใหม่
Loading tool...
สร้าง CSS Custom Properties คืออะไร?
CSS Custom Properties Generator สร้างตัวแปร CSS ที่จัดระเบียบสำหรับระบบการออกแบบ สร้างพาเลตสี มาตราส่วนระยะห่าง ระบบการพิมพ์ และส่งออกเป็น CSS หรือ JSON
ประโยชน์หลัก
- ตัวสร้างระบบออกแบบ
- สร้างโทเค็น
- หลายรูปแบบการส่งออก
- การตั้งชื่อสม่ำเสมอ
กรณีการใช้งาน
- •ระบบออกแบบ
- •ไลบรารีคอมโพเนนต์
- •สร้างธีม
- •แนวทางแบรนด์
วิธีสร้าง CSS Custom Properties
- เลือกหมวดหมู่: เลือกสิ่งที่จะสร้าง: พาเลตสี, มาตราส่วนระยะห่าง, การพิมพ์ หรือระบบการออกแบบที่สมบูรณ์
- กำหนดพาเลตสี: ใส่สีแบรนด์ของคุณ เครื่องมือสร้างเฉด (สว่าง/มืด) และชื่อความหมาย เช่น primary, secondary, success, danger
- ตั้งมาตราส่วนระยะห่าง: เลือกหน่วยฐาน (4px หรือ 8px) และสร้างมาตราส่วนระยะห่างที่สม่ำเสมอ (xs, sm, md, lg, xl)
- ตั้งค่าการพิมพ์: ตั้งขนาดฟอนต์ฐาน อัตราส่วนสเกล และสร้างขนาดฟอนต์ ความสูงบรรทัด และค่าระยะห่างตัวอักษร
- เพิ่มตัวแปรกำหนดเอง: เพิ่มตัวแปร CSS กำหนดเองสำหรับขอบ เงา z-index การเปลี่ยนแปลง หรือค่าซ้ำอื่นๆ
- ส่งออกตัวแปร: คัดลอก CSS custom properties ที่สร้างสำหรับ :root selector หรือดาวน์โหลดเป็นไฟล์ CSS แยก ส่งออกเป็น JSON สำหรับใช้ใน JavaScript
คุณสมบัติหลัก
- ระบบสี: สร้างพาเลตสีที่สมบูรณ์พร้อม shades, tints และชื่อสีตามความหมาย
- มาตราส่วนระยะห่าง: สร้างระบบระยะห่างที่สม่ำเสมอตาม grid 4px หรือ 8px (xs, sm, md, lg, xl, 2xl)
- มาตราส่วนการพิมพ์: สร้างสเกลแบบโมดูลาร์พร้อมขนาดฟอนต์ ความสูงบรรทัด และระยะห่างตัวอักษร
- ระบบเงา: ค่า box-shadow ที่กำหนดไว้ล่วงหน้าสำหรับความสูงและความลึก
- รองรับ Dark Mode: สร้างชุดตัวแปรสำหรับทั้งธีมสว่างและมืด
- ส่งออกหลายรูปแบบ: ส่งออกเป็น CSS custom properties, ตัวแปร SCSS, JSON หรือ objects JavaScript
- ดูตัวอย่างธีม: ดูตัวอย่างสดของระบบการออกแบบพร้อม components ตัวอย่าง
คำถามที่พบบ่อย
CSS custom properties (variables) คืออะไร?
CSS custom properties (--variable-name) เป็นค่าที่ใช้ซ้ำได้ ซึ่งกำหนดครั้งเดียวและใช้ทั่วทั้ง stylesheet ช่วยให้มีระบบการออกแบบที่สม่ำเสมอและปรับธีมได้ง่าย
นำตัวแปรที่สร้างไปใช้อย่างไร?
คัดลอก CSS ที่สร้าง วางใน :root selector และอ้างอิงตัวแปรเช่น var(--primary-color) ที่ใดก็ได้ในสไตล์ของคุณ
สร้างธีม dark mode ได้ไหม?
ได้! สร้างชุดค่าตัวแปรสองชุด (light และ dark themes) จากนั้นสลับโดยใช้ CSS media queries หรือเปลี่ยน class ด้วย JavaScript
สร้างอะไรนอกจากสีบ้าง?
เครื่องมือสร้าง design tokens ที่สมบูรณ์: ชุดสี, มาตราส่วนระยะห่าง (4px, 8px, 16px), มาตราส่วนการพิมพ์ (ขนาดฟอนต์ ความสูงบรรทัด), รัศมีขอบ เงา และอื่นๆ