Advanced CSS Showcase - ME-RMUTR-2026

🎲 3D Effects

เอฟเฟกต์ 3D ขั้นสูง

HOVER ME

3D Flip Card

Back Side!

การ์ดพลิกแบบ 3D

Neumorphism

การออกแบบแบบ Soft UI ด้วย Shadow ที่นุ่มนวล

🎨 Interactive Cards

การ์ดที่โต้ตอบได้

Parallax

เลื่อนเมาส์เพื่อดูเอฟเฟกต์

Ripple Effect

Hover เพื่อดูคลื่น

Floating & Skew

ลอยและเอียงเมื่อ Hover

🔘 Advanced Buttons

ปุ่มแบบขั้นสูง

⏳ Loading Animations

แอนิเมชั่นโหลด

Spinner

Pulse Loader

Skeleton Loader

📊 Progress Bars

แถบความคืบหน้า

Static Progress

75%

Animated Progress

Loading...

Multiple Levels

HTML/CSS - 90%

JavaScript - 80%

PHP - 70%

🎚️ Toggle Switches

สวิตช์เปิด-ปิด

Dark Mode

Notifications

Auto Save

📑 Tabs

แท็บสลับเนื้อหา

Overview

ธีม ME-RMUTR-2026 เป็นธีม WordPress ที่ออกแบบมาเฉพาะสำหรับสาขาวิชาวิศวกรรมเครื่องกล มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี ด้วยการออกแบบที่ทันสมัย และใช้เทคโนโลยี CSS ขั้นสูง

Features

✨ Glassmorphism Design
🎨 Gradient Colors
🎬 Smooth Animations
📱 Fully Responsive
⚡ Fast Performance

Documentation

เอกสารประกอบการใช้งานธีม รวมถึงคู่มือการติดตั้ง การปรับแต่ง และการใช้งาน CSS Classes ต่างๆ สามารถดูได้จากไฟล์ README.md

📋 Accordion

รายการแบบพับได้

What is CSS?

▼

CSS (Cascading Style Sheets) คือภาษาที่ใช้ในการจัดรูปแบบและออกแบบหน้าเว็บไซต์ ทำให้เว็บไซต์สวยงามและใช้งานง่าย

How to use Glassmorphism?

▼

Glassmorphism ใช้ backdrop-filter: blur() ร่วมกับพื้นหลังแบบโปร่งใส เพื่อสร้างเอฟเฟกต์กระจกแบบโฟกัส

Advanced Animations?

▼

การใช้ @keyframes ร่วมกับ transform, opacity และ filter สามารถสร้างแอนิเมชั่นที่ซับซ้อนและสวยงามได้

✍️ Text Effects

เอฟเฟกต์ข้อความ

W A V E

Text Reveal

Typing Effect...

🪟 Modal Dialog

หน้าต่างป๊อปอัพ

📐 Grid Layouts

เลย์เอาต์แบบ Grid

Full Width (12 Columns)

Half (6 Columns)

Third (4 Col)

1/4

💻 Code Highlighting

Code Block พร้อม Syntax Highlighting

                    // Function Example
                    function initTheme() {
                     const theme = 'ME-RMUTR-2026';
                     console.log('Theme loaded:',
                        theme);
                     return theme;
                    }
                    
                    // CSS Example
                    .glass-card {
                     background: var(--glass-bg);
                     backdrop-filter: blur(10px);
                    }
                

🔢 Special Effects

เอฟเฟกต์พิเศษ

ADVANCED CSS

🎲 3D Effects

HOVER ME

Back Side!

Neumorphism

🎨 Interactive Cards

Parallax

Ripple Effect

Floating & Skew

🔘 Advanced Buttons

⏳ Loading Animations

Spinner

Pulse Loader

Skeleton Loader

📊 Progress Bars

Static Progress

Animated Progress

Multiple Levels

🎚️ Toggle Switches

📑 Tabs

Overview

Features

Documentation

📋 Accordion

What is CSS?

How to use Glassmorphism?

Advanced Animations?

✍️ Text Effects

Text Reveal

🪟 Modal Dialog

📐 Grid Layouts

Full Width (12 Columns)

Half (6 Columns)

Half (6 Columns)

💻 Code Highlighting

🔢 Special Effects

MATRIX EFFECT