Card Profile Glass

Xem trước

Emma Watson

Senior UI/UX Designer

128

Posts

12K

Followers

542

Following

Trường hợp sử dụng và tính năng

Bảng điều khiển người dùng: Hoàn hảo để xem tóm tắt hồ sơ của người dùng đã đăng nhập.
Giới thiệu thành viên nhóm: Tính năng này có thể được sử dụng khi bạn muốn hiển thị thông tin thành viên một cách đẹp mắt trong danh sách.
Nền tảng xã hội: Hoạt động như một danh thiếp kỹ thuật số với các CTA như theo dõi và gửi tin nhắn.
Các tính năng chính:
- Hiệu ứng thủy tinh phong phú với backdrop-blur-lg và màu nền mờ (bg-white/20).
- Thiết kế tinh tế hài hòa với sự chuyển màu ở mặt sau.

Điểm thiết kế và UX

Sự hấp dẫn trực quan của hình thái thủy tinh: Bằng cách làm cho dải màu nền trở nên trong suốt, nó mang lại chiều sâu cho giao diện người dùng và ấn tượng hiện đại.
Đường viền và bóng tinh tế: Sự kết hợp giữa đường viền mỏng sử dụng border-white/30 và bóng đổ sâu sử dụng shadow-2xl làm cho tấm thiệp nổi bật đẹp mắt trên nền.
Đảm bảo khả năng hiển thị: Chúng tôi sử dụng màu trắng cho văn bản và duy trì độ tương phản vừa đủ để duy trì khả năng đọc trong khi đạt được bảng màu thống nhất.
Tương tác: Thay đổi một chút độ sáng nền và bóng khi di chuột vào nút để cải thiện phản hồi về tương tác của người dùng.

Cách tùy chỉnh

Điều chỉnh độ mờ: Bằng cách thay đổi backdrop-blur-lg thành backdrop-blur-sm hoặc backdrop-blur-xl, bạn có thể kiểm soát mức độ mờ của kính mờ.
Thay đổi độ trong suốt: Bằng cách thay đổi lớp độ mờ của bg-white/20 thành bg-white/10 hoặc bg-white/30, bạn có thể điều chỉnh độ trong suốt của chính thẻ.
Tương thích với chủ đề tối: Nếu màu nền tối, bạn có thể thể hiện tính thủy tinh phù hợp với chủ đề tối bằng cách thay thế nó bằng các lớp như bg-black/20 hoặc border-white/10.

Mã triển khai

<div class="flex items-center justify-center min-h-[400px] w-full rounded-xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-6">
<!-- Thân thẻ thủy tinh -->
<div class="relative w-full max-w-sm overflow-hidden rounded-2xl bg-white/20 p-8 shadow-2xl backdrop-blur-lg border border-white/30">
  <!-- 装飾用の光彩効果 -->
  <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/30 rounded-full blur-2xl"></div>
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-indigo-500/20 rounded-full blur-2xl"></div>
  
  <div class="relative z-10 flex flex-col items-center">
    <!-- プロフィール画像 -->
    <div class="h-24 w-24 rounded-full overflow-hidden border-2 border-white/50 shadow-inner mb-4">
      <img src="https://api.dicebear.com/7.x/notionists/svg?seed=Emma" alt="Profile avatar" class="h-full w-full object-cover scale-110 !m-0" />
    </div>
    
    <!-- ユーザー情報 -->
    <h2 class="text-2xl font-bold text-white mb-1">Emma Watson</h2>
    <p class="text-sm text-white/80 font-medium mb-6">Senior UI/UX Designer</p>
    
    <!-- 統計情報 -->
    <div class="flex w-full justify-between px-4 mb-6">
      <div class="text-center text-white">
        <p class="text-lg font-bold">128</p>
        <p class="text-xs text-white/70">Posts</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">12K</p>
        <p class="text-xs text-white/70">Followers</p>
      </div>
      <div class="text-center text-white">
        <p class="text-lg font-bold">542</p>
        <p class="text-xs text-white/70">Following</p>
      </div>
    </div>
    
    <!-- hành độngボタン -->
    <div class="flex w-full gap-3">
      <button class="flex-1 rounded-lg bg-white/20 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-white/30 hover:shadow-md transition-all duration-300 border border-white/30 backdrop-blur-sm">
        Message
      </button>
      <button class="flex-1 rounded-lg bg-indigo-600/80 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-600 hover:shadow-md transition-all duration-300 backdrop-blur-sm border border-indigo-500/50">
        Follow
      </button>
    </div>
  </div>
</div>
</div>

Trạng thái tương thích với trình duyệt

Chrome: Được hỗ trợ (bộ lọc phông nền)
Safari: Được hỗ trợ (có thể cần có -webkit-backdrop-filter)
Firefox: được hỗ trợ
Cạnh: Được hỗ trợ