Mục lục
Bước 1: Chuẩn bị cấu trúc HTML
Mỗi card là một khối .im-glass kết hợp các class của UIkit để dễ bố cục. Bạn có thể đặt trên ảnh nền hoặc gradient để thấy rõ hiệu ứng.
<div class="im-glass uk-card uk-card-body uk-border-rounded uk-box-shadow-medium">
<h3 class="uk-card-title uk-margin-remove">Glass Card</h3>
<p class="uk-text-meta">Trong suốt + mờ nền + viền sáng</p>
<p>Nội dung của bạn ở đây. Có thể là text, nút hoặc icon UIkit.</p>
<div class="im-glass-shine" aria-hidden="true"></div>
</div>
Bước 2: Viết CSS cho mặt kính, mờ nền và viền
Chìa khóa nằm ở background bán trong suốt, backdrop-filter: blur() để làm mờ hậu cảnh, viền mỏng có màu trắng/đen trong suốt và một lớp “shine” nhẹ ở góc để tạo cảm giác phản chiếu.
/* ===== Glassmorphism for UIkit ===== */
:root {
--glass-bg: rgba(255, 255, 255, 0.14); /* nền mặt kính (light) */
--glass-stroke: rgba(255, 255, 255, 0.35); /* viền sáng (light) */
--glass-shadow: rgba(15, 15, 15, 0.18); /* bóng nhẹ */
--glass-shine: rgba(255, 255, 255, 0.5); /* ánh sáng lướt */
--glass-blur: 12px; /* độ blur hậu cảnh */
}
.uk-dark,
.dark {
--glass-bg: rgba(20, 20, 20, 0.32); /* nền mặt kính (dark) */
--glass-stroke: rgba(0, 0, 0, 0.35); /* viền tối (dark) */
--glass-shadow: rgba(0, 0, 0, 0.35);
--glass-shine: rgba(255, 255, 255, 0.35);
--glass-blur: 10px;
}
/* Card kính cơ bản */
.im-glass {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-stroke);
border-radius: 16px;
box-shadow: 0 10px 30px var(--glass-shadow);
overflow: hidden; /* bo góc cho shine */
}
/* Shine nhẹ để giả phản chiếu cạnh trên */
.im-glass .im-glass-shine {
position: absolute;
pointer-events: none;
inset: 0;
background:
linear-gradient(120deg,
transparent 0%,
var(--glass-shine) 10%,
transparent 22%) no-repeat;
background-size: 200% 200%;
background-position: -120% -120%;
mix-blend-mode: screen; /* giúp shine dịu hơn trên nền ảnh */
opacity: 0.45;
animation: glass-shine-move 6s ease-in-out infinite;
}
@keyframes glass-shine-move {
0%, 20% { background-position: -120% -120%; }
45%, 55% { background-position: 120% 120%; }
100% { background-position: 120% 120%; }
}
/* Biến thể “đậm” hơn khi đặt trên nền quá sặc sỡ */
.im-glass.im-glass-strong {
--glass-bg: rgba(255, 255, 255, 0.2);
--glass-stroke: rgba(255, 255, 255, 0.5);
--glass-blur: 14px;
}
.uk-dark .im-glass.im-glass-strong,
.dark .im-glass.im-glass-strong {
--glass-bg: rgba(20, 20, 20, 0.42);
--glass-stroke: rgba(0, 0, 0, 0.5);
--glass-blur: 12px;
}
/* Trạng thái hover: hơi “nổi” lên */
.im-glass:hover {
transform: translateY(-2px);
transition: transform 160ms ease;
}
/* Fallback khi không có backdrop-filter: JS sẽ thêm .no-backdrop vào <html> */
.no-backdrop .im-glass {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* tăng opacity để dễ đọc nếu không blur được */
background: rgba(255, 255, 255, 0.85);
}
.no-backdrop.uk-dark .im-glass,
.no-backdrop.dark .im-glass {
background: rgba(20, 20, 20, 0.85);
}
/* Giảm chuyển động theo sở thích người dùng */
@media (prefers-reduced-motion: reduce) {
.im-glass { transition: none !important; }
.im-glass .im-glass-shine { animation: none !important; }
}
/* Demo helper: nền gradient + ảnh nền tùy chọn */
.im-demo-bg {
position: relative;
min-height: 280px;
border-radius: 18px;
overflow: hidden;
background:
radial-gradient(1200px 600px at 10% 0%, rgba(255,0,128,0.25), transparent 50%),
radial-gradient(1000px 800px at 90% 100%, rgba(0,128,255,0.25), transparent 50%),
linear-gradient(135deg, #111827, #0b1220);
}
.im-demo-bg::before {
content: "";
position: absolute; inset: 0;
background-image: url('https://picsum.photos/seed/glassbg/1600/900');
background-size: cover; background-position: center;
opacity: 0.28; /* giữ trung tính để thấy rõ glass */
filter: saturate(1.1) contrast(1.05);
}Bước 3: Đồng bộ dark mode và nền phía sau
Với dark mode, giảm độ trong suốt và đổi viền sang màu tối trong suốt để giữ tương phản. Nếu bạn đang dùng bộ chuyển dark mode (class .uk-dark hoặc .dark trên <html>/<body>), card sẽ tự thích ứng.
Bước 4: Fallback khi không có backdrop-filter
Một số trình duyệt cũ không hỗ trợ backdrop-filter. Ta sẽ thêm class .no-backdrop bằng JS để chuyển sang nền mờ giả định (tăng opacity, bỏ blur) thay vì giữ hiệu ứng “lỗi”.
Mẹo tối ưu
- Giảm số lớp đổ bóng; dùng
box-shadownhỏ + viền mảnh để nhẹ tài nguyên. - Sử dụng kích thước blur vừa phải (8–14px) để cân bằng hiệu ứng và hiệu năng.
- Đặt card trên nền có họa tiết/gradient nhẹ để thấy rõ glass; nền phẳng sẽ ít hiệu quả hơn.
Bình luận