🎨 Color Palette

ตัวอย่างสีหลักที่ใช้ใน CSS Variables

--primary-dark

#1a0a0a

--primary-red

#991b1b

--accent-red

#ef4444

--accent-orange

#f97316

--accent-rose

#f43f5e

--glass-bg

rgba(255, 255, 255, 0.05)

🔤 Typography

ตัวอย่างฟอนต์และข้อความ

Thai Font

ตัวอย่างข้อความภาษาไทย

วิศวกรรมเครื่องกล RMUTR

สาขาวิชาวิศวกรรมเครื่องกล

font-family: 'Noto Sans Thai', sans-serif;

Tech Font

MECHANICAL

ENGINEERING

RMUTR 2026

font-family: 'Orbitron', sans-serif;

Gradient Text

Amazing Text

GRADIENT STYLE

background: linear-gradient(...)
-webkit-background-clip: text;

Glow Text

Glowing Text

SHINE BRIGHT

text-shadow: 0 0 20px rgba(...);

🔘 Buttons

ตัวอย่างปุ่มต่างๆ

Link Button

                    <button class="btn-primary">Primary Button</button>

                    <button class="btn-secondary">Secondary Button</button>

🃏 Cards

ตัวอย่างการ์ดแบบต่างๆ

Glass Card

การ์ดแบบกระจกใส (Glassmorphism) ที่มี backdrop-filter blur

                        .glass-card {

                          backdrop-filter: blur(10px);

                        }

Research Card

การ์ดวิจัยที่มีเอฟเฟกต์ hover แบบสไลด์

                        .research-card:hover {

                          transform: translateY(-10px);

                        }

🔧

Tool Card

การ์ดเครื่องมือพร้อมไอคอน

                        .tool-card:hover {

                          transform: scale(1.02);

                        }

👤

Team Card

การ์ดทีมพร้อม avatar วงกลม

✨ Effects

ตัวอย่างเอฟเฟกต์พิเศษ

Glow Effect

เอฟเฟกต์เรืองแสงรอบกรอบ

                        .glow {

                          box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);

                        }

Gradient Background

                        background: linear-gradient(135deg, 

                          #ef4444, #f97316, #f43f5e);

Backdrop Filter

Blurred Overlay

backdrop-filter: blur(10px);

🎬 Animations

ตัวอย่างแอนิเมชั่น

Pulse Animation

🤖

                        @keyframes pulse {

                          0%, 100% { transform: scale(1); }

                          50% { transform: scale(1.05); }

                        }

Rotate Animation

⚙️

                        @keyframes rotate360 {

                          from { transform: rotate(0deg); }

                          to { transform: rotate(360deg); }

                        }

Bounce Animation

🎯

                        @keyframes bounce {

                          0%, 100% { translateY(0); }

                          50% { translateY(-20px); }

                        }

Float Animation

animation: float 15s infinite;

🧭 Navigation

ตัวอย่างลิงก์นำทาง

Nav Links with Underline Effect

หน้าแรก เกี่ยวกับเรา งานวิจัย ทีมงาน ติดต่อ

                    .nav-link::after {

                      content: '';

                      position: absolute;

                      bottom: -4px;

                      left: 0;

                      width: 0;

                      height: 2px;

                      background: linear-gradient(90deg, #ef4444, #f97316);

                      transition: width 0.3s ease;

                    }

                    .nav-link:hover::after {

                      width: 100%;

                    }

🔗 Social Links

ตัวอย่างลิงก์โซเชียลมีเดีย

                    .social-link {

                      width: 45px;

                      height: 45px;

                      border-radius: 50%;

                      background: var(--glass-bg);

                      transition: all 0.3s ease;

                    }

                    .social-link:hover {

                      background: linear-gradient(135deg, #ef4444, #f97316);

                      transform: translateY(-3px);

                    }

📊 Stats Counter

ตัวอย่างตัวเลขสถิติ

100+

โครงการวิจัย

500+

นักศึกษา

50+

อาจารย์

                    .stat-number {

                      font-size: 3rem;

                      font-weight: 700;

                      background: linear-gradient(135deg, #ef4444, #f97316);

                      -webkit-background-clip: text;

                      -webkit-text-fill-color: transparent;

                    }

📜 Custom Scrollbar

Scrollbar ที่ปรับแต่งเอง (ลองเลื่อนดู)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

                    ::-webkit-scrollbar {

                      width: 8px;

                    }

                    ::-webkit-scrollbar-thumb {

                      background: linear-gradient(180deg, #ef4444, #f97316);

                      border-radius: 4px;

                    }

📱 Responsive Design

การปรับแต่งสำหรับหน้าจอขนาดต่างๆ

Media Queries

                    @media (max-width: 768px) {

                      .section-title {

                        font-size: 2rem;

                      }

                      .hero h1 {

                        font-size: 2.5rem !important;

                      }

                      section {

                        padding: 60px 0;

                      }

                    }

ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูการเปลี่ยนแปลง

CSS Showcase