STYLE 4

กลาสมอร์ฟิซึม

ดีไซน์แบบกระจกฝ้าโปร่งแสง พื้นหลังไล่สีสดใส เน้นความโปร่ง เบา ทันสมัย ให้ความรู้สึกล้ำยุคด้วยเอฟเฟกต์ blur และแสงสะท้อน

แนวคิดการออกแบบ

หลักการและปรัชญาของดีไซน์สไตล์กลาสมอร์ฟิซึม

💎

กระจกฝ้าโปร่งแสง (Frosted Glass)

ใช้เอฟเฟกต์ backdrop-filter blur สร้างพื้นผิวแบบกระจกฝ้า ทำให้เนื้อหาลอยเหนือพื้นหลังอย่างสวยงาม

🌈

พื้นหลังไล่สี (Gradient Background)

ใช้สีม่วง-ชมพูไล่ระดับสร้างความรู้สึกมีชีวิตชีวาและทันสมัย เสริมด้วยวงกลมเบลอเพิ่มมิติ

ขอบโปร่งแสง (Transparent Borders)

ขอบสีขาวโปร่งใสสร้างเส้นแบ่งที่ละเอียดอ่อน ให้ความรู้สึกเบาและหรูหราโดยไม่รบกวนสายตา

🎨

ความลึกแบบลอย (Floating Depth)

ใช้เงาและ blur สร้างความลึก การ์ดลอยเหนือพื้นหลัง พร้อม hover effect ที่ยกขึ้นอย่างนุ่มนวล

ชุดสี (Color Palette)

สีหลักและสีรองที่ใช้ในระบบ

Primary
สีม่วงหลัก (Primary)
#7c3aed
ปุ่มหลัก, ลิงก์, ไอคอนสำคัญ
Primary Light
สีม่วงอ่อน (Primary Light)
#8b5cf6
Hover, Active state, Gradient
Pink
สีชมพู (Pink)
#ec4899
เน้นรอง, Gradient คู่กับม่วง, แจ้งเตือน
Indigo
สีคราม (Indigo)
#6366f1
พื้นหลัง Gradient, ไอคอนประกอบ
Success
สำเร็จ (Success)
#10b981
สถานะอนุมัติ, การดำเนินการสำเร็จ
Warning
เตือน (Warning)
#f59e0b
รอดำเนินการ, แจ้งเตือน
Danger
อันตราย (Danger)
#ef4444
ข้อผิดพลาด, การลบ, ปฏิเสธ
Glass Surface
พื้นผิวกระจก (Glass)
rgba(255,255,255,0.4)
พื้นหลังการ์ด, แผงหลัก
Sidebar Glass
Sidebar มืด (Dark Glass)
rgba(30,15,60,0.65)
Sidebar, ส่วนนำทางหลัก

ตัวอักษร (Typography)

ฟอนต์และขนาดตัวอักษรที่ใช้ในระบบ

Font Family
Kanit
Google Fonts - รองรับภาษาไทยและอังกฤษ | น้ำหนัก 300-700
หัวข้อหลัก (H1)
แดชบอร์ดบริหารทรัพยากรบุคคล
28px / Semi-bold (600) / Letter-spacing: -0.5px
หัวข้อรอง (H2)
รายการบุคลากรล่าสุด
16px / Semi-bold (600)
หัวข้อย่อย (H3)
ข้อมูลทั่วไป
14px / Semi-bold (600)
ข้อความปกติ (Body)
ยินดีต้อนรับกลับมา! นี่คือภาพรวมข้อมูลทรัพยากรบุคคลของมหาวิทยาลัย
14px / Regular (400) / Line-height: 1.6
ข้อความรอง (Secondary)
แสดง 10 รายการจากทั้งหมด 156 รายการ
14px / Light (300) / Color: #6b7280
ข้อความเล็ก (Small)
อัปเดตล่าสุด: 5 นาทีที่แล้ว
12px / Light (300) / Color: #9ca3af

ปุ่ม (Buttons)

รูปแบบปุ่มแบบกระจกฝ้าที่ใช้ในระบบ

ปุ่มหลัก (Primary Buttons)
ปุ่มรอง (Secondary Buttons)

สถานะ (Status Badges)

ป้ายแสดงสถานะแบบโปร่งแสง

อนุมัติแล้ว รอดำเนินการ ปฏิเสธ กำลังดำเนินการ

ฟอร์ม (Form Elements)

องค์ประกอบฟอร์มแบบกระจกฝ้า

การ์ด (Cards)

รูปแบบการ์ดกระจกฝ้าที่ใช้แสดงข้อมูล

👥
8,547
บุคลากรทั้งหมด
รายการล่าสุด ดูทั้งหมด →

เนื้อหาของการ์ดจะแสดงที่นี่ การ์ดมีเอฟเฟกต์กระจกฝ้าและ hover effect ที่ยกขึ้นเล็กน้อย

ระยะห่าง (Spacing)

ระบบระยะห่างที่ใช้ในการออกแบบ

8px
12px
16px
24px
32px
48px

มุมโค้ง (Border Radius)

ระดับความโค้งมนของมุม

6px
ปุ่มเล็ก
10px
Input, ปุ่ม
12px
ไอคอน, Nav
16px
การ์ด
20px
Badge
24px
Section

เงา (Shadows)

ระดับเงาแบบกลาสมอร์ฟิซึมที่ใช้สร้างความลึก

Glass Small
เงาเบา
Glass Medium
เงาปกติ
Glass Large
เงา Hover

ข้อดี-ข้อควรพิจารณา

สรุปจุดเด่นและข้อควรพิจารณาของสไตล์กลาสมอร์ฟิซึม

✅ จุดเด่น

  • ดีไซน์ล้ำสมัย สวยงาม สะดุดตา
  • เอฟเฟกต์กระจกฝ้าให้ความรู้สึกหรูหราและพรีเมียม
  • สีสันสดใสสร้างพลังงานเชิงบวกในการใช้งาน
  • Hover effect นุ่มนวล ให้ feedback ที่ดี
  • เหมาะกับองค์กรที่ต้องการสร้างความแตกต่าง
  • ดูทันสมัยและน่าสนใจสำหรับผู้ใช้รุ่นใหม่

⚠️ ข้อควรพิจารณา

  • Backdrop-filter ใช้ทรัพยากร GPU สูงกว่าปกติ
  • เบราว์เซอร์เก่าบางรุ่นอาจไม่รองรับ blur effect
  • อาจดูไม่เป็นทางการสำหรับหน่วยงานราชการ
  • ข้อความบนพื้นโปร่งแสงอาจอ่านยากในบางกรณี
  • สีสันสดอาจทำให้เมื่อยตาหากใช้งานนาน
  • ต้องทดสอบ Accessibility อย่างละเอียด

เหมาะสำหรับ