สร้าง 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 ตัวอย่าง