🚀 Thêm Hiệu Ứng 'Kính Lỏng' vào Portfolio của Tôi

Khi tôi lần đầu xây dựng portfolio cho nhà phát triển của mình, nó đã rất chức năng và sạch sẽ — nhưng tôi muốn mang lại một cảm giác hiện đại và cao cấp hơn. Đó là lúc tôi thử nghiệm với hiệu ứng UI 'kính lỏng' nổi tiếng của Apple — hiệu ứng mờ kính bạn thấy trong macOS 26 và iOS 26.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách tích hợp hiệu ứng này vào portfolio của mình được xây dựng bằng React + Vite.

🔍 Hiệu Ứng 'Kính Lỏng' Là Gì?

Hiệu ứng này còn được biết đến với tên gọi glassmorphism:

Các lớp trong suốt
Nền mờ
Biên mờ với ánh sáng nhẹ
Hiệu ứng độ sâu phát sáng

Nó mang đến cho các trang web một diện mạo giống như Apple, tương lai trong khi vẫn giữ mọi thứ tối giản.

🛠️ Cài Đặt Của Tôi

Frontend → React + Vite
Styling → CSS thuần (cũng có thể dùng với Tailwind)
Triển Khai → Vercel

🎨 Công Thức CSS

css Copy

.glass-card {
  background: rgba(255, 255, 255, 0.1); /* lớp trong suốt */
  backdrop-filter: blur(10px);          /* hiệu ứng mờ thần kỳ */
  -webkit-backdrop-filter: blur(10px);  /* cho Safari */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: #fff;
}

Bạn chỉ cần bọc các phần trong portfolio của mình trong một div với class="glass-card".

✨ Trước và Sau

Trước → các phần phẳng đơn giản
Sau → các panel thanh lịch, lấy cảm hứng từ Apple với độ sâu + mờ

Tôi đã sử dụng hiệu ứng này trong navbar, thẻ dự án, và phần giới thiệu để giữ cho thiết kế nhất quán.

📈 Những Gì Tôi Đã Học

Sử dụng mờ nhẹ (5–15px) → quá nhiều sẽ trông lộn xộn.
Giữ văn bản có độ tương phản cao (trắng/đen) để dễ đọc.
Thêm đổ bóng phát sáng để làm cho các thẻ nổi lên.
Hoạt động tốt nhất trên nền tối.

🚀 Demo Trực Tiếp

Bạn có thể thấy hiệu ứng kính lỏng trực tiếp trên portfolio của tôi:
👉 jerophin-portfolio.vercel.app

🔑 Điểm Nhấn Chính

Một thủ thuật CSS đơn giản như backdrop-filter có thể biến đổi cảm giác của toàn bộ trang web. Thêm những chi tiết nhỏ như thế này có thể làm cho portfolio của bạn trông cao cấp và sẵn sàng cho nhà tuyển dụng — và điều này thực sự dễ dàng để thực hiện!

💬 Đến Lượt Bạn

Bạn đã thử glassmorphism trong các dự án của mình chưa? Hãy chia sẻ liên kết hoặc ý kiến của bạn — tôi rất muốn xem chúng!

Thêm Hiệu Ứng 'Kính Lỏng' của Apple Vào Portfolio (React + CSS)